PageSpeed の「静的なアセットと効率的なキャッシュ ポリシーの配信」対策で速度改善

PageSpeed Insights で、「静的なアセットと効率的なキャッシュ ポリシーの配信」をせよと指示されるケースの対策と改善手法です。

キャッシュのTTL が None になっています。
アセットにキャッシュが設定されていないことがわかります。アセットとは画像や、CSS、JavaScript などのファイルと考えてください。

改善対策

WordPress などウェブサイトを使っている想定した場合、キャッシュポリシーを設定することが対策となります。

Apache を利用している、あるいは .htaccess 記法が使えるレンタルサーバーで WordPressを利用している際に通常利用できる手法をご紹介します。

Expires の指定を追加

Apache などの Web サーバーでは Expires 指定をしてキャッシュすることができます。キャッシュの指定は PageSpeed に影響があり表示速度改善が期待できます。

具体的なキャッシュの指定はウェブサーバーに合わせた指定にしてください。

レンタルサーバーは .htaccess にキャッシュを指定

Apache を利用しているレンタルサーバーなどは、.htaccess に記述すればキャッシュの Expires の指定を追加できます。

<IfModule mod_rewrite.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 days"
    ExpiresByType image/png "access plus 1 months"
    ExpiresByType image/jpeg "access plus 1 months"
    ExpiresByType image/gif "access plus 1 months"
    ExpiresByType text/css "access plus 30 minutes"
    ExpiresByType text/javascript "access plus 10 hours"
    ExpiresByType application/javascript "access plus 10 hours"
</IfModule>

PageSpeed の指摘では JavaScript や画像が出ていたので、画像や JavaScript、CSS を追加します。

パフォーマンスへの影響を確認

再度 PageSpeed Insights を確認します。

相変わらず「静的なアセットと効率的なキャッシュ ポリシーの配信」という項目は表示されています。
しかし、キャッシュの TTL None の項目が消えています。
また、赤いだった表示が、黄色いアイコンになりました。

Expires 設定前の点数

Expires の設定前はデスクトップ版で、90点でした。

Expires 設定後の点数

デスクトップ版のキャッシュありの点数です。

90点から94点となり+4点の変化となりました。
モバイル版では点数の変動はありませんでした。

大きなポイントではないかもしれませんが、キャッシュ指定は忘れず対応したい設定です。

参考

mod_expires – Apache HTTP サーバ バージョン 2.2