AdRegion

ローカルビジネスの宣伝に必要な全てを

ホームページの表示速度を改善するhtaccessの書き方

レンタルサーバーを利用していてWebサイトやWordPressブログを運用している方は是非とも設定しておきたいhtaccessの設定方法を解説します。ページ表示速度はSEOにも繋がるという迷信もありますが、それよりもユーザーエクスペリエンスの向上や、アクセス時の離脱防止に繋がる要素の方が大きいので、是非取り組むべき内容です。

htaccessを利用できるサーバであれば、ほとんどの環境でページ表示速度を改善できるはずです。

htaccessの書き方

ひとまず完成形のソースがこちらになります。

「よくわかんないけどコピペしてしまえ!」でもいいのですが、理解していない記述をコピペすると怒る人もたくさんいると思うので理解した上でのご利用をおすすめします。

すでにhtaccessを設置している場合は下の方に追加するだけでOKです。一番上の階層のhtaccessに記述すれば全てのディレクトリで反映されます。

アップロードしてエラーになったら記述が間違ってるかサーバが対応していないので頑張ってください。

ページ表示速度の改善点を調べる

上記ソースをコピペする前に、まずGoogleが提供するツール「PageSpeed Insights」を利用してページ表示を遅くしている原因を確認します。

URLを入力して、「分析」を押すと改善すべき点がリストアップされます。「修正が必要」に「ブラウザのキャッシュを活用する」と「圧縮を有効にする」が挙がってきた場合はhtaccessの設定を行います。

htaccessで改善できるのは「ブラウザのキャッシュ」と「データ通信の圧縮」に関わる設定になります。詳細はリンク先のヘルプページにも書いてあるので、まだ読んだことない人は一度目を通しておいてください。

ブラウザのキャッシュを制御する

上記ソースの<ifModule mod_expires.c>〜</ifModule>の部分がブラウザのキャッシュを制御する内容です。Googleが推奨するのは「一度ユーザーがダウンロードしたものは一定期間パソコン内に保存して、それを読み込むようにした方がいいよ!」という方針です。画像・CSS・Javascriptの3点に有効期限を設定してキャッシュさせる設定をします。

各リソースを「ExpiresByType ファイルタイプ キャッシュ期間」のような書式で設定していきます。キャッシュ期間を長くしてもいいのですが、あんまり長くても意味がないので、一週間に設定します。ファイルタイプのJavascriptに関しては1つだとうまく動かなかったりするので4行の記述にしてあります。

デメリットとして公開前後のデバッグや頻繁に更新するコンテンツの場合はブラウザをリロードしてもキャッシュが優先されて更新を確認できなくなってしまうので、デバッグ時はシークレットウィンドウを使うなどして、キャッシュのない状態で確認する必要があります。

Google Analyticsなど外部リソースの制御は警告が出ても無視して大丈夫です。

テストページをクライアントと共有している場合など、頻繁にデバッグを行うディレクトリには以下を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などのフレームワークを使っていると対応が難しいので無視してます。

ちなみに、私のサーバ環境はエックスサーバーを利用しています。