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

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

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

改善対策

WordPress を使っている想定として、キャッシュを設定することが対策となります。

レンタルサーバーで 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