調べ物や買い物のため、GoogleやYahoo!などで検索をしていると、
なかなか表示されないサイトがあります。
Amazonの統計データによると、
サイトの表示が0.1秒遅くなるだけで、売上が約１%減少するそうです。
単純計算すると、サイト表示が1秒遅れると、
売上が10%も減少するということになります。
そこで、今回はサイトの高速化について、備忘録代わりにまとめました。
いろいろと効果的な施策がありますが、
まずは気軽に実践できるCSSの外部リンクのTipsから。
HTMLのHEADタグを用いる外部リンク方法がベスト
今まではCSSファイルのリンクは同一ファイル上に@importを使って、
複数ファイルをリンクさせていました。
しかし、これはサイト表示の速度的にあまり好ましくないようです。
HTMLファイルのheadタグ内に複数のCSSファイルをリンクさせた方が、ブラウザ表示は早くなるとのこと。
CSSファイルのリンク方法
CSSファイルで、
@import url(sample.css);
と外部CSSの読み込みを複数設定するのではなく、
htmlファイルのheadタグ内に、
<link rel="stylesheet" href="css/sample.css" type="text/css" media="all" />
とCSSの数だけ記述し、読み込ませます。
CSSファイルの結合
基本的にCSSファイルは複数ではなく、
できるかぎり数を減らし、結合した方がサイト表示は速くなるそうです。
サイト管理の面から、今まではSSファイルを分割していたのですが、
今後は必要最低限のファイルにまとめ、スリム化を行っていきたいと思います。
HTTPリクエストを減らそう
ブラウザがサーバーにアクセスし、サーバー側に要求を送信します。
それらをHTTPリクエストといい、その内容に応じて、
サーバー側は情報を表示したり、様々な動作をします。
複数のCSSファイルがあったり、@importを使用すると、
HTTPリクエストが増えてしまい、サーバーとのやりとりが増えてしまうため、
結果的にサイトの表示が遅くなってしまうというわけです。
極力、サーバーとのやりとりをシンプルにすることで、
サイトの表示は速くなります。
その他のサイト高速化について
CSSの記述方法や画像をひとつにまとめ、
読み込みを高速化する「CSS Sprite」というテクニックもありますが、
またの機会に実施して、まとめたいと思います。
とりあえず、弊社のクライアント様のサイトについては、CSSの外部リンク設定を見直して、
サイト表示の高速化を少しずつ進めたいと思います。
