WEBサイト制作で気を付けなければならないことの一つにWEBサイトの表示速度があります。
今日は、WEBページの表示速度を高速化させるためにやっておきたい基本的なことを書いておきたいと思います。
基本的には、「PCの性能」「ネットの回線速度」で速度が変わるのが一般的な考え方ですが、WEBサイトを制作する際には、回線速度やPCやスマホの性能が低い場合にもできるだけデータ量が軽くなるように配慮して制作する必要があります。
表示速度が遅いと、ユーザーの離脱率が高くなります。Amazon.comの調査では、表示速度が0.1秒遅くなると、売り上げが1%低下するというデータもあります。
コンテンツ目次
HTTPリクエストの回数を少なくする
WEBページがブラウザに表示されるとき、最初に、土台になるHTMLが読み込まれてから、ページにリンクしてある画像ファイルやスクリプトが順番に読み込まれ、最終的にWEBページが表示されます。
この読み込みを「HTTPリクエスト」といい、ページに複数の画像やスクリプトが多く記述されていればいるほど、WEBページの表示に時間がかかる。ということになります。
出来るだけHTTPリクエストの回数を抑えるためには、そのページでは使っていないCSSやスクリプトは読み込まないように小さいアイコン類は、CSSスプライトにして一枚のファイルにまとめるなど、無駄なファイルを出来るだけ読み込ませないようにしてやる必要があります。
Javascript,CSSは全て外部ファイル化
Javascript、CSS等は全て外部ファイル化しましょう。
そうすることにより、2回目移以降に同一のファイルを読み込む際、クライアント側のファイルキャッシュが働くので、サイト内のページを閲覧している間は再度同じファイルを読み込みにいくことがなくなるので、速度アップに繋がります。
外部ファイル化してやると、コードも整理されてメンテナンス性も向上するので、一石二鳥ですね。
CSSはページのトップで読み込む
HTMLファイルというのは、コードが上から順番に解析されて、ブラウザにレンダリングされるようになります。
なので、ページの表示に関係してくるファイルはできるだけページの上部に読み込んでおくとレンダリング速度がはやくなります。
ですので、CSSファイルの読み込みの記述は、<head>タグの中の上のほうに記述してやるのがベターです。
Javascriptはページの最後に読み込む
Javascriptのファイルの読み込みを
内に記述するのは、基本的な方法ではありますが、スクリプトが実行されるのは、基本的にページの読み込みが終わった後になります。なので、ページ上部のほうにスクリプトが記述されてあると、スクリプトの解析に時間がとられてしまうので、レンダリング速度が低下しますので、表示が遅くなってしまいます。
スクリプトを読み込む際は、必ずしも<head>内に書かなくてはならないということはないので、ページの一番下の</body>の直前に記述してやるとよいでしょう。
そうすることで、ブラウザのレンダリング速度の向上に貢献できます。
gzip圧縮を使用した高速化
gzip圧縮とは、ファイルサイズを小さくするための圧縮方法の1つです。
gzip圧縮を取り入れることで、ユーザとWebサーバ間でやりとりされているHTMLのファイルサイズが小さくなるので、転送速度がアップします。
ここでは、簡単にですが、さらっと触れておきます。
Apache2.0系であれば、「mod_deflate」モジュールを使用します。
.htaccessが有効な場合は、下記の1行を記述すれば大丈夫です。
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript
サーバの設定がいじれない場合、PHPであれば下記のコードをスクリプトの先頭に記述してやる事で有効化できます。
この記述で、出力バッファを gzip圧縮して、表示を最適化することができます。
これを使用するためには、PHPでZlib圧縮関数が使えるようになっている必要があります。
ob_start('ob_gzhandler');
