Home > Tips | 雑記 > WEBページの表示を高速化する為のサイト側の設定

WEBページの表示を高速化する為のサイト側の設定


最近はウェブサイト作成者向けにGoogleがPageSpeedというWEBページの読み込み速度について評価するソフトウェアを提供したり、YahooでもYSlowといった同様のツールを公開したりしています。
どちらのツールもページを解析して、より高速にページを表示できる方法や問題点についてアドバイスしてくれるツールです。
少し前に私のサイトでもページに読み込み速度改善のためにこれらのツールを試しており、特に効果が高かった項目について簡単に紹介しようかと思います。
なお、一部の設定はサーバーによっては利用できない可能性もありますのでご了承下さい。

1,gzip圧縮を利用する
ページのファイルをサーバーから転送する際に、gzipで圧縮してからの転送を有効にします。
スクリプトなどのテキストベースのファイルは圧縮率が高いため、この設定を有効にすることで転送速度を上げるだけでなく、転送量の削減にも貢献します。

Apacheのバージョンが1.xの場合はmod_gzipモジュールを使用します。
以下のコードを.htaccessに加えることで、テキストベースのファイル転送時のgzip圧縮を有効にします。

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

また、Apacheのバージョンが2.xの場合はmod_deflateモジュールを使います。
以下のコードを.htaccessに加えて下さい。

<ifModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript
</ifModule>

上記のコードでは画像ファイルなど圧縮率が低くなるようなファイルについては効率が悪いため圧縮対象から場外しています。

2,サイズの大きいテキストファイルをあらかじめgzip圧縮しておく
htmlやCSSなど、大抵のテキストベースのファイルはせいぜい1~10KB程度かと思いますが、大きなJavascriptなどでは100KBなど、比較的大きいファイルサイズになりがちです。
例えばjQueryのスクリプトファイルは約246KBありますが、これはgzipで最高圧縮すると68KB程度までファイルサイズを小さくすることが可能です。
これらのファイルをあらかじめgzip圧縮してサーバーに保存しておき、要求があった際に圧縮されたファイルにリダイレクトすることで、転送速度の高速化と転送量削減が期待できます。

まずはgzipでファイルを圧縮します。gzip圧縮が出来るアーカイバには7-zipなどがあります。
ここで例えば「exsample.js」というファイルを圧縮した場合は「exsample.js.gz」というファイル名にします。
ファイル名に間違いが無いことを確認したらesample.js.gzをサーバーの任意のディレクトリに転送して下さい。

次に以下のコードを.htaccessに追加します。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} "\.(js)$"
RewriteCond %{REQUEST_FILENAME} !"\.gz$"
RewriteCond %{REQUEST_FILENAME}.gz -s
RewriteRule .+ %{REQUEST_URI}.gz [L]
</IfModule>

このコードを追加することで、ディレクトリ内の「exsample.js」というファイルへの要求が「exsample.js.gz」というファイルへリダイレクトされるようになります。
ですのでページ内でJavascriptを呼び出すときも拡張子にgzを付加する必要は無く、通常通りのファイル名「exsample.js」で指定します。

なお、この方法でJavascript以外のファイルもあらかじめ圧縮しておきたい場合は、先ほどの.htaccessのコードの4行目、(js)の部分をに拡張子を加えます。
例えば.cssのファイルもあらかじめ圧縮しておきたい場合は(js|css)とします。

3,複数の画像をCSSスプライトにまとめる
サイトのサイドバーなど全てのページで表示される要素の中で、アイコンなどの画像ファイルを使っている場合、一つ一つの画像をバラバラにしているとその度ブラウザからサーバーへ要求を飛ばすことになり、転送効率が下がります。
そこでそういったアイコンなどの画像を全て1枚の画像ファイルにまとめ、CSSでその画像の中で参照する部分をずらしながら利用することで、ブラウザからの要求を減らすことが出来ます。
CSSスプライトで利用するための画像を生成するサービスにCSS Sprite Generatorというものがあり、スプライトにまとめたい画像ファイルをZIPでまとめて送ると、スプライトに加工した画像ファイルと、それを利用するためのCSSファイルが出力されます。
以下の画像はPC-ZEROで利用しているアイコンなどをまとめたスプライト画像ファイルです。

私感ですが、出力する際は横に並べるより縦に並べた方が何かと使いやすいかと思います。

4,Javascriptの読み込みを最後に行う
最初に読み込む必要のないJavascriptの外部ファイルはの直前などで読み込ませることで、ページを表示した直後の閲覧者側の待ち時間を減らすことが出来ます。
直接的なページ読み込みの高速化にはならないのですが、見る側の感覚としてページを移動したのに中々中身が表示されないという事態を回避できます。

と、一通り設定したことを列挙してみました。
一部説明が雑な点もありますが、他にも詳しく解説しているサイトもありますので、色々と試してみるのも面白いかと思います。

スポンサードリンク

Home > Tips | 雑記 > WEBページの表示を高速化する為のサイト側の設定

アーカイブ
カテゴリー
ツイート
  • 以前にもジャック周りに半田ごて入れてますし、HDDとバッテリも交換してますので、いまさら修理にも出せませんねえ… 2年 ago
  • HD60GD9のイヤホンジャックが劣化したのか、再生中にリモコン機能が誤作動するようになったので、リモコン端子とGNDにジャンパをかまして直せないかテスト中です 2年 ago
  • 過去のLogicool Setpointの保存場所を発見 ftp://ftp.logitech.com/pub/techsupport/mouse/ ロジクールゲーミングソフトウェアはイマイチ使いづらいのです… 3年 ago
  • Comfortable PC Ver 2.9.1を公開しました。 よろしくお願いします。 pc-zero.jp/pages/software… 3年 ago
  • 長いこと放置してしまいましたので少し保守作業です 3年 ago

Follow Me on Twitter

Return to page top

Highslide for Wordpress Plugin