PageSpeed Insightsで「ブラウザのキャッシュを活用する」「圧縮を有効にする」を最適化推奨されたときの対処法

使ってみて大丈夫そうだったのでメモ。

ブラウザのキャッシュを活用する

• ファイルタイプごとにキャッシュの有効期限を設定し、以前表示されたデータがキャッシュに残ってる場合はそちらを活用するように。
• 更新が少ないファイルはサーバーにリクエストしなくなる→読み込むファイル数が少なくなるので、ページ表示までの時間が短くなる。
• 設定前よりキャッシュが強くなるので、画像やjavascriptの更新が反映されにくくなることがある。

1. サーバーがApacheのモジュール「mod_expires」に対応しているか確認する
2. FTPを使って.htaccessをダウンロード
3. .htaccessの上の方に下記記述を追加

.htaccess

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 15 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</ifModule>

1. 修正した.htaccessを元の場所に上書きアップロード

圧縮を有効にする

• この設定をすると、サーバーはリクエストされたファイルをクライアント（ユーザー側）に送る前に圧縮するようになる。クライアント側では、ブラウザが自動で受け取った圧縮データを展開し表示する。
• データを圧縮して送るので通信の負担が激減→ページ表示までの時間が短くなる。

1. サーバーがApacheのモジュール「mod_deflate」に対応しているか確認する
2. FTPを使って.htaccessをダウンロード
3. .htaccessの上の方に下記記述を追加

.htaccess

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

1. 修正した.htaccessを元の場所に上書きアップロード

---

.htaccessの書き換えを行うので、【ミスするとサイトが閲覧できなくなる】。
必ず作業前にバックアップを取り、問題が発生したら古いファイルに戻すこと。