レンタルサーバーを利用していてWebサイトやWordPressブログを運用している方は是非とも設定しておきたいhtaccessの設定方法を解説します。ページ表示速度はSEOにも繋がる重要なシグナルです。それよりもユーザーエクスペリエンスの向上や、アクセス時の離脱防止に繋がる要素の方が大きいので、是非取り組むべき内容です。
htaccessを利用できるサーバであれば、ほとんどの環境でページ表示速度を改善できるので、ぜひチャレンジして見てください。
Google Speed Updateについて
スピードアップデートは、2018年1月に発表され、7月に導入に至りました。ページの読み込みが極端に遅いページは評価が下げられる仕組みです。実際に何秒以内ならば早いなど評価の基準は、通信環境の進化などにより、今後も変わってくるかと思いますが、できる限り早くページが表示されるようにサイトを作り込む必要があります。
htaccessの書き方
ひとまず完成形のソースがこちらになります。
# BEGIN Browser Cache
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/js "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
</ifModule>
# END Browser Cache
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
# Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# gifやjpgなど圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
# htmlやcssなどは圧縮
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>
「よくわかんないけどコピペしてしまえ！」でもいいのですが、理解していない記述をコピペすると怒る人もたくさんいると思うので理解した上でのご利用をおすすめします。
すでにhtaccessを設置している場合は下の方に追加するだけでOKです。一番上の階層のhtaccessに記述すれば全てのディレクトリで反映されます。
アップロードしてエラーになったら記述が間違ってるかサーバが対応していないので頑張ってください。
ページ表示速度の改善点を調べる
上記ソースをコピペする前に、まずGoogleが提供するツール「PageSpeed Insights」を利用してページ表示を遅くしている原因を確認します。
URLを入力して、「分析」を押すと改善すべき点がリストアップされます。「修正が必要」に「ブラウザのキャッシュを活用する」と「圧縮を有効にする」が挙がってきた場合はhtaccessの設定を行います。
htaccessで改善できるのは「ブラウザのキャッシュ」と「データ通信の圧縮」に関わる設定になります。詳細はリンク先のヘルプページにも書いてあるので、まだ読んだことない人は一度目を通しておいてください。
ブラウザのキャッシュを制御する
上記ソースの<ifModule mod_expires.c>〜</ifModule>の部分がブラウザのキャッシュを制御する内容です。Googleが推奨するのは「一度ユーザーがダウンロードしたものは一定期間パソコン内に保存して、それを読み込むようにした方がいいよ！」という方針です。画像・CSS・Javascriptの3点に有効期限を設定してキャッシュさせる設定をします。
各リソースを「ExpiresByType ファイルタイプ キャッシュ期間」のような書式で設定していきます。キャッシュ期間を長くしてもいいのですが、あんまり長くても意味がないので、一週間に設定します。ファイルタイプのJavaScriptに関しては1つだとうまく動かなかったりするので4行の記述にしてあります。
デメリットとして公開前後のデバッグや頻繁に更新するコンテンツの場合はブラウザをリロードしてもキャッシュが優先されて更新を確認できなくなってしまうので、デバッグ時はシークレットウィンドウを使うなどして、キャッシュのない状態で確認する必要があります。
Googleアナリティクスなど外部リソースの制御は警告が出ても無視して大丈夫です。
テストページをクライアントと共有している場合など、頻繁にデバッグを行うディレクトリには以下をhtaccessに設定しておけばキャッシュを無効にできます。
データ通信の圧縮を制御する
上記ソースの<IfModule mod_deflate.c>〜</IfModule>の部分が圧縮を制御する内容です。古いブラウザの場合は無効にし、画像など圧縮されたデータには適用せず、htmlやcssなどのテキスト系のリソースを圧縮するように設定してあります。特にデメリットはなく、Apacheのサーバが対応していれば、gzip圧縮に対応しているブラウザで、この設定が有効になります。キャッシュの制御は2回目のアクセスでしか意味がないので、こちらの設定がページ表示速度を上げる要因として大きいです。「gzip圧縮？そんなのわかんねーよ！」って長年悩んでいましたがやってみたら簡単でした。
その他のページ表示に関わる改善点
以上のhtacess以外にもPageSpeed Insightsで指摘される中で「画像を最適化する」「CSSを縮小する」「JavaScriptを縮小する」の2点は簡単に対応することができます。診断結果の下に「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。」というリンクがあるので、ソースをダウンロードして差分を確認しサーバにアップロードするだけでOKです。
ダウンロードした画像の中でJPEGはPhotoshopで書き出したものより汚くなる場合が多いので注意が必要です。また、ページに表示される描画サイズと画像のサイズが違うと縮小されてしまいます。レスポンシブデザインでPCとモバイルで描画サイズが違うけど同じ画像を使用しているときは注意が必要です。書き出しのときに画質を80以下で保存すれば警告を受けることが少なくなります。
PNGに関してはPhotoshopで書き出すよりも容量を小さくできるのでそのまま利用した方がいいです。（他に容量を小さく書き出せるソフトがあれば教えて欲しい！）
あと、CSSとJSのファイルについてはインデントや無駄な改行を削除した状態のものがダウンロードできるので、メンテナンス性を無視してもいいならそのままアップロードしてOKです。ここまでの修正を行えばPageSpeed Insightsで90点以上も狙えるはずです。
PageSpeed Insightsの点数の影響は小さいですが、ユーザーの体感速度に大きく関わる「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という部分に躓くかもしれませんが、これは「ファーストビュー以外の描画に関わるソースは後から読み込むようにしろよ！」というものなのでBootstrapなどのフレームワークを使っていると対応が難しいので無視してます。
