『「一人ブラック企業体質」を脱却して、週休3日の時間の余裕を手に入れる4つの経営指標』noteにて公開中!

「静的なアセットと効率的なキャッシュポリシーの配信」を改善する方法

「静的なアセットと効率的なキャッシュポリシーの配信」を改善する方法

ページスピードインサイトで「静的なアセットと効率的なキャッシュポリシーの配信」の左端に黄色い四角がありませんか?
その場合は、キャッシュの設定に改善の余地があります。

この記事では、エックスサーバーでWordPressサイトを運営している方向けに、.htaccessファイルを編集してページスピードを高速化するための方法をご紹介いたします。

ページスピードインサイトの結果で、「キャッシュの有効期間を長くすると、再訪問したユーザーへのページの読み込み速度を向上できます。」と記載がある通り、再訪問ユーザーに対してのページスピード高速化対策となります。

新規ユーザーに対する対策も大切ですが、Webサイトのページビュー数を着実に伸ばし続けていくためには、再訪問率・再訪問ユーザーの増加数や訪問頻度、平均ページ閲覧数などが重要になるため、再訪問ユーザーに対するページスピード高速化も大変意義があります。

エックスサーバーのサーバーパネルにログインする

まずは、エックスサーバーの「サーバーパネル」にログインし、「ホームページ」の「.htaccess編集」をクリックします。

エックスサーバー サーバーパネル画面

.htaccess設定で記述内容を編集する

「使用前のご注意」タブが表示されますので、内容をよくご確認ください。

「.htaccess編集」タブをクリックし、以下の記述を.htaccessファイルの末尾に追記します。

.htaccess編集の前に、WordPressサイトデータ一式のバックアップをお取りいただき、ご自身の責任においてご編集いただけますようお願いいたします。
# BEGIN ブラウザキャッシュ
<IfModule mod_headers.c>
<ifModule mod_expires.c>
ExpiresActive On

# キャッシュ初期化
ExpiresDefault "access plus 1 seconds"

# MIME Typeごとの設定
ExpiresByType text/css "access plus 1 months"
ExpiresByType text/js "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/webp "access plus 1 months"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType application/pdf "access plus 1 months"
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType application/x-shockwave-flash "access plus 1 months"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/x-font-woff2 "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>
# END ブラウザキャッシュ

# BEGIN Gzip圧縮
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE

# 古いブラウザ無効
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

# 圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/js
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
#AddOutputFilterByType DEFLATE application/x-font-woff
#AddOutputFilterByType DEFLATE application/x-font-woff2
AddOutputFilterByType DEFLATE application/x-font-opentype
#AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>
# END Gzip圧縮

(キャッシュに関する設定だけでなく、同じく高速化に有効な、圧縮に関する記述も含まれています。)

念のため、.htaccess編集前の内容も別途テキストエディタやメモ帳に保存しておきましょう。

万一.htaccessファイルの記述がうまく行かないと、Webサイトが表示されないなど重大な影響がありますので、その場合はすぐに編集前の状態に戻せるようご留意いただけましたら幸いです。

.htaccessファイル編集の注意

.htaccess編集で設定を変更する

【補足】エックスサーバーの高速化オプションを設定する

エックスサーバーには独自の高速化オプションがあります。

「静的なアセットと効率的なキャッシュポリシーの配信」とは無関係ですが、エックスサーバーのサーバーパネルにログインしたついでに設定しておきます。

エックスサーバーのサーバーパネル 高速化

Xアクセラレータ

サーバーキャッシュ設定

まとめ

以上で.htaccessファイルの編集、高速化設定は完了です。

Webサイトの表示や動作が問題ないか、必ず確認してください。

キャッシュで問題なく表示されているように見えたものの、時間が経ちキャッシュが無効になると実は不具合が生じていた、ということもまれにあるのでご注意ください。

ページスピードインサイトでスコアの変化を確認してみましょう。

以下はお客様のWebサイトのページスピードインサイトスコア改善事例です。

「次世代フォーマットでの画像の配信」「レンダリングを妨げるリソースの除外」「オフスクリーン画像の遅延読み込み」「静的なアセットと効率的なキャッシュポリシーの配信」「効率的な画像フォーマット」などを一通り改善したところ、90点台に改善できました。

某サーバーでスマホスコア40点→エックスサーバーへ移行しただけで70点に改善→さらに上記の項目を対応し94点に改善、という流れでした。

ページスピードインサイト スマホスコア94点

ページスピードインサイト PCスコア100点

トップページ表示完了までの時間も、1.04s(秒)になりました。
下層ページについては、ソーシャルボタンがある分もう少し遅く1.9秒前後になっていましたが、修正前に比べてよく改善されました。
ページ表示完了までの時間

その他のページスピード改善方法については、以下の記事をご参照ください。

ページスピード高速化に関する記事一覧

「一人ブラック企業体質」を脱却して、週休3日の時間の余裕を手に入れる4つの経営指標

仕事と休みのメリハリがなく、週6~7日終わりのない労働で疲弊している一人社長・フリーランスの方へ。

毎月の利益を確保しながら、働く時間を減らして、時間とお金と心の余裕を手にしませんか?

「一人ブラック企業体質」を脱却して、週休3日の時間の余裕を手に入れる4つの経営指標』noteにて公開中!