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

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

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

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

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

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

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

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

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

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

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

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

弊社のサイトの中にもいくつかCSSで表現しているものがあります。
CSSで表現することの強みとして、下記の2つです。

• サイトの表示が速くなる
• ユーザビリティの向上

マウスを載せたときのアニメーションをCSSで表現することができ、ユーザービリティの向上も簡単にすることができます。

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

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

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

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