GZIP圧縮とCache-Controlで表示速度改善

グーグルアドセンスの管理画面にスコアカードが表示されるようになり、ウェブページの読み込み時間のパフォーマンスを見ることができます。ここで指摘されていたGZIP圧縮とCache-Controlでページの表示速度を改善してみました。

今まで様々な方法でウェブページの速度改善に取り組んできましたが、まだまだ改善の余地があります。SNSのボタンや広告の表示で、ページの表示は遅くなるばかりです。

SNSのボタンや広告の表示が遅いのは仕方がないとしても、ページのコンテンツの表示だけは速くする必要があります。広告は遅れて表示されてもかまいません。

でも、ウェブページの表示速度が速いサイトはグーグルの評価が上がる可能性があるそうですので、今後もページの表示速度の改善に努めていきたいものです。

GZIPで自動的に圧縮してページの表示速度を改善(これは失敗)

インターネットでファイルをサーバー楽天から転送する時に、GZIPで圧縮して転送すると、HTMLやCSSやスクリプトなどのテキストベースのファイルは圧縮率が高くなります。これは、転送速度を上げると共に、転送量の削減にも役立ちます。

普通のサーバーでmod_deflateが使える場合は、.htaccessに次の文を記入するだけでgzipが有効になります。

AddOutputFilterByType DEFLATE text/html text/css application/x-javascript application/javascript text/javascript

しかし、XreaやCoreserverなどのサーバーではmod_deflateが使えず、設定するとサーバーエラーが出ます。そこで次のようにmod_gzipを使ってGZIP圧縮をやってみました。

下記の記述を追加したhtaccessファイルをpublic_htmlディレクトリに転送します。

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_minimum_file_size 1024
mod_gzip_maximum_file_size 0
mod_gzip_maximum_inmem_size 60000
mod_gzip_item_include file \.(html?|txt|css|js|php|pl|cgi|inc)$
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.*
mod_gzip_min_http 1001
</ifModule>

エラーは何も出ませんが、これでもCoreserverでは圧縮されないようです。元々XreaやCoreserverなどのサーバーでは圧縮が必要ないという情報もありますがどうなんでしょうか。

手動でGZIP圧縮してページの表示速度を改善

自動圧縮がうまくいかないので、CSSファイルとJSファイルを手動でGZIP圧縮する方法をやってみました。7-Zipというフリーのソフトを使ってあらかじめCSSファイルとJSファイルをGZIP圧縮しておきます。元のCSSファイルとJSファイルと圧縮されたGZファイルの両方をサーバーにアップロードしておきます。

次に、下記のスクリプトをドメインルートのhtaccessファイルに追加します。public_htmlディレクトリのhtaccessに追加した場合は何故かうまく動作しませんでした。

# GZIP処理
RewriteEngine On
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.(css|js)
RewriteCond %{REQUEST_FILENAME} !\.gz
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
AddEncoding x-gzip .gz

CSSファイルとJSファイルの読み込みは従来通り圧縮していないファイルを指定したままです。上記の処理で、gzファイルがあればそれを読み込むようにしています。

HTTPキャッシュヘッダを設定してページの表示速度を改善

Add an Expires headerについては、XREAやCoreserverにmod_expiresが入っていないのでこれで設定することができません。そこでmod_headersを使用して、下記のようにCache-Controlをすることで、コンテンツのキャッシュの有効期限を設定して、ブラウザがキャッシュから読み込んでページの表示速度を改善することにしました。

私は画像とCSSとJSファイルに一週間のキャッシュの有効期間を設定していましたが、もっと長い方が良いとのページスピードインサイトの表示から、キャッシュの有効期限を1ヶ月にしました。max-age=2592000というのは、一ヶ月間の秒数です。

下記の記述を追加したhtaccessファイルをpublic_htmlディレクトリに転送します。ドメインルートでなくてもかまいません。

<IfModule mod_headers.c>
<FilesMatch "\.(jpe?g|png|gif|css|js|gz)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
</IfModule>

「jpe?g」という記述は、正規表現で「jpg」と「jpeg」の両方を表します。「gz」も追加しないと、GZIP圧縮ファイルのキャッシュが設定されません。

結果

グーグルアナリティクスのサイトの速度でチェックすると、キャッシュと圧縮の項目では問題ないようになっていました。SNSと広告については、今は対策をしていますのでページスピードインサイトでは100点満点です。

結局、GZIPで自動的に圧縮するのは、XREAやCoreserverのサーバーではできないようです。直接GZIP圧縮してやる方が簡単です。