サイト軽っ!
コーディングで簡単にできる
表示速度の改善方法

「うちのサイト遅くない？遅いのはどうして？」と疑問に思っている方は意外と多いのではないでしょうか？

今回は、サイトの表示速度が遅くなる原因のひとつ、HTML/CSSのコーディングについて話したいと思います。

デザインと同じようにHTMLを制作しブラウザへ表示すること自体は簡単にやろうと思えばやり方はあります。
ページを構築していくときに同じタグを使い続け、そのタグごとにCSS（カスケードスタイルシート）で装飾をしていき、難しそうであれば画像を使う。

そうするとCSSが増え、画像をサイト内で多数読み込むため、サイトの表示速度が遅くなります。不適切なタグの使用と、それに合わせて増え続けるCSSも表示スピードに影響します。

表示スピードはGoogleが導入したCore Web Vitalsに影響するため、今後Googleがランキング要因にCore Web Vitalsを組み込んだ時には、表示スピードが遅いサイトは検索順位が下がる可能性もあります。

悪手な手抜きHTML/CSSはサイト表示スピードにおいて不利益となります。どうやったらコーディングで表示スピードを改善できるか話していきましょう。

外見と中身を構築するコーディング

「HTMLにコード書けば表示される」
これを聞けば、実際に出来上がるWebサイトは、デザインさえできてしまえば早くコーディングの作業が完了し、納期も早くできそうですよね。

実際はそうではありません。

スマートフォンやタブレットに表示させるのであれば、レスポンシブ対応（複数デバイスの横幅に1つのHTMLで対応）が必要になってきますし、複数のブラウザに表示させるのであれば、複数のブラウザに精通しているタグやCSSを使います。

外見も中身も綺麗でサイト自体の評価とユーザーからも評価の高いサイトを作り出していきます。

装飾はCSSで表示スピード改善

「このサイトみたい！！」って思ったときにリンクを開き、表示されなかったら開かずそのまま閉じるなんてことあるんではないでしょうか、少なくとも私はあります（笑）

通信環境や電波が通りにくいところにいるなど一概には言えませんが、画像の読み込みは表示速度に関わってきます。

WEBサイトでは複数の画像が使われます。
企業のサイトであれば、社内の写真や会社の社員さんが笑っている写真、化粧品など商品を紹介するサイトなら商品単体の写真や実際に使っているシーンをビジュアルとして画像を使いますね。
それに加えてボタンや枠線なども画像で作ったとしましょう。

ブラウザはHTMLを上から順番に読み込んでいき、タグの指示通りに画像やコンテンツを読み込んで表示させていきます。１ページ内で過度に画像ファイルが多いと、70KB近い画像ファイルを何度もサーバーに要求するため、表示が遅くなります。

デザインの中にあるよくある表現で画像を使わずに、表現できるものがいくつかあります。

弊社のサイトの中にもいくつかCSSで表現しているものがあります。
CSSで表現することの強みとして、下記の2つです。
・サイトの表示が速くなる
・ユーザビリティの向上
マウスを載せたときのアニメーションをCSSで表現することができ、ユーザービリティの向上も簡単にすることができます。

たかがコードされどコード

安かろうなWeb制作会社・フリーランスの制作では画像を多用して、その結果、表示スピードが遅いサイトになってしまった、なんてことも少なくありません。

今後、Googleのランキング要因として、より表示スピードが重視されてくると、HTML/CSS/JavaScriptなどのコーディングによる実装の精度・品質が重要になります。

たかが表示させるためだけのコードと思わず、今一度見直してみてはいかがでしょうか？