⚠️ PageSpeed Insightsの警告と注意点
多くの方が、Google PageSpeed Insightsの「静的なアセットの効率的なキャッシュポリシー(Serve
static assets with an efficient cache
policy)」という警告を解消するためにこの設定を調べているかと思います。
Googleの判定基準では「すべての静的ファイルを1年間キャッシュすること」が理想とされていますが、実際の制作現場でそれを鵜呑みにすると大変なことになります。
PSIの要求とクライアントワークのバランスを取るには、以下の設定が実戦的です。
-
✅
画像・Webフォント:迷わず「1年」に設定
一度公開したら変更されることが少なく、ファイルサイズも大きいため、ここを1年にするだけでPSIのスコアは大きく改善します。 -
⚠️
CSS・JavaScript:「1週間」〜「1ヶ月」が実用的
PSIには怒られるかもしれませんが、頻繁に改修が入るサイトでここを1年にすると、クライアントから「修正したと言われたが、自分のPCでは変わっていない(デザインが崩れている)」というクレームに直結します。
👑 どうしてもCSS/JSを「1年」にして満点を狙う場合
スコア満点を目指してCSSやJSのキャッシュも「1年」に設定する場合は、ファイルを更新した際にブラウザへ「新しいファイルだよ」と強制的に認識させるキャッシュバスター(クエリパラメータ付与)の仕組みが絶対に欠かせません。
<!-- WordPressでの自動キャッシュ突破(filemtime)の記述例 -->
wp_enqueue_style( 'main-style', get_template_directory_uri() . '/style.css', array(), filemtime( get_theme_file_path( '/style.css' ) ) );
※
filemtime
を使うと、ファイルを上書き保存した瞬間にURL末尾のパラメータが変わり、強力な1年キャッシュも即座にクリアできます。