Google PageSpeed Insightsは、ウェブサイトのパフォーマンス測定に欠かせないツールの1つ。ただし、「ブラウザキャッシュを活用する」など、一部の提案は、経験の浅いサイト所有者を混乱させてしまう可能性があります。

分解すれば、キャッシの仕組みを理解するのはそれほど難しくありません。いくつかの調整を行うことで、この開発のベストプラクティスをサイトに実装し、読み込み時間を短縮し、PageSpeedスコアを向上させることができます。

今回の記事では「ブラウザキャッシュを活用する」という提案の概要、そして、WordPressサイトでこの問題を解決するためのいくつかのヒントをご紹介します。

それでは、始めましょう！

「ブラウザキャッシュを活用する」の意味とは？

「ブラウザキャッシュを活用する」を理解するために、最初にGoogle PageSpeed Insightsについて少し知っておくと便利です。初めて使用する方には、詳細ガイド「Google PageSpeed Insights—100点満点を獲得することの真実」を読んでおくことをお勧めします。

「ブラウザキャッシュを活用する」の提案は、Google PageSpeedによる数多くの「診断」の1つであり、次のように、スコア改善の提案として表示されます。

Google PageSpeed Insightsのブラウザキャッシュについての表示
Google PageSpeed Insightsのブラウザキャッシュについての表示

Google PageSpeed Insightsのバージョン5では、このメッセージは「静的なアセットと効率的なキャッシュ ポリシーの配信」に置き換えられました。

Google PageSpeed Insightsの「静的なアセットと効率的なキャッシュ ポリシーの配信」
Google PageSpeed Insightsの「静的なアセットと効率的なキャッシュ ポリシーの配信」

実際の文言や見た目の変更はありますが、これに対する解決策は同じです。

Googleは、ブラウザのキャッシュを使用してページの読み込み時間を短縮し、パフォーマンスを向上させることをお勧めしています。キャッシュとは、簡単に言えば、ユーザーのブラウザがサイトのページの静的コピーを保存する行為です。その後のアクセスの際には（リクエストされたリソースにアクセスするためにブラウザがサイトのサーバーに接続する必要がなくなるため）このコンテンツをより速く読み込むことができます。

ただし、キャッシュされるすべてのリソースについて、有効期限を指定する必要があります。これにより、サイトのコンテンツが古くなったときにはブラウザに通知され、キャッシュされたコピーを新しいバージョンに置き換えることが可能になります。

パフォーマンステストの結果に「ブラウザキャッシュを活用する」が表示された場合、次の2つのいずれかである可能性があります。

  • Cache-ControlまたはExpiresヘッダーが、サイトのサーバーまたはサードパーティのサーバーにない。
  • 必要なヘッダーが存在するものの、有効期限が非常に短く、パフォーマンスに大きな影響がない。

これを解決するためには、上記の問題の一方または両方を修正することができます。

WordPressで「ブラウザキャッシュを活用する」を解決する方法（3つのやり方）

これの原因に応じて、WordPressで「ブラウザキャッシュを活用する」を解決する方法はいくつかあります。3つのソリューションをご紹介します。

1. Cache-Control・Expiresヘッダーを追加する

Cache-ControlとExpiresというブラウザのキャッシュに関連する2つのヘッダーがあります。サイトのブラウザキャッシュを有効にするには、少なくともこれらの1つが存在する必要があります。これにより、ブラウザがリソースを保持する期間を決定することになります。

各リソースの詳細を確認すれば、これが「ブラウザキャッシュを活用する」の原因であるかどうかがわかります。また、Google PageSpeed Insightsバージョン5では、「キャッシュのTTL」の下に「None」と表示されます。

Google PageSpeed Insightsでの「キャッシュのTTL」の項目
Google PageSpeed Insightsでの「キャッシュのTTL」の項目

ちなみに以前のバージョンのGoogle PageSpeed Insightsでは、ヘッダーがない場合には「有効期限が指定されていません」というメッセージが表示されていました。

「ブラウザキャッシュを活用する」の警告に表示されているリソース
「ブラウザキャッシュを活用する」の警告に表示されているリソース

Cache-Controlヘッダーはクライアント側のキャッシュをオンにし、リソースのmax-ageを設定し、一方でExpiresヘッダーは、リソースが無効になる時点を指定します。

これは冗長になる可能性があるため、必ずしも両方を追加する必要はありません。Cache-Controlはより新しいもので、通常はこちらが推奨されます。ただし、GTmetrixなどの一部のウェブパフォーマンスツールは、Expiresヘッダーをいまだにチェックしています。

Kinstaをご利用中であれば、これらのヘッダーの設定について心配する必要はありません。当社の全Nginxサーバーには既に含まれています。コンテンツデリバリネットワーク（CDN）を使用している場合も、このヘッダーがすでに適用されているはずです。

別のホスティングプロバイダーを使用している場合は、以下の手順を実行する前に、必ずサイトのバックアップを取るようにしてください。注意を怠ると、.htaccessの編集からサイトが破損してしまう可能性があります。

NginxでCache-Controlヘッダーを追加する方法

NginxにCache-Controlヘッダーを追加するには、サーバーの構成ファイルに以下を追加します。

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
 expires 30d;
 add_header Cache-Control "public, no-transform";
}

指定されたファイルの種類が少なくとも30日間変更されないようにサーバーに通知されます。その期間だけ関連ファイルを保持し、その後更新するようになります。

ApacheでCache-Controlヘッダーを追加する方法

Apacheサーバーの場合には、次のコードを.htaccessファイルに追加します。

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"

このスニペットは「#BEGIN WordPress」の前または「#END WordPress」の後に追加する必要があります。ここでは、キャッシュは84,600秒後に期限切れになるように設定されています。

NginxでExpiresヘッダーを追加する方法

NginxにExpiresヘッダーを追加するには、サーバーブロックに以下を追加します。この例からは、ファイルタイプに基づき異なる有効期限を指定する方法がわかるはずです。

    location ~*  \.(jpg|jpeg|gif|png|svg)$ {
        expires 365d;
    }

    location ~*  \.(pdf|css|html|js|swf)$ {
        expires 2d;
    }

ApacheでExpiresヘッダーを追加する方法

以下を.htaccessファイルに追加することで、ApacheにExpiresヘッダーを追加できます。

## EXPIRES HEADER CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

## EXPIRES HEADER CACHING ##

追加したら、再度Google PageSpeed Insightsを開いて、提案が表示されるか確認しましょう。これでヘッダーが無事に追加されているかどうかがわかります。

2. Googleアナリティクスで「ブラウザキャッシュを活用する」

皮肉なことに、Googleアナリティクスは「ブラウザキャッシュを活用する」と不完全なPageSpeedスコアの原因となる場合があります。これは、キャッシュの有効期限が2時間と短いためです。以前は、このような警告が表示されていました。

「ブラウザキャッシュを活用する」の項目にGoogleアナリティクスのスクリプトが
「ブラウザキャッシュを活用する」の項目にGoogleアナリティクスのスクリプトが

PageSpeed Insightsのバージョン5では、この問題によって警告が発生することはなくなりましたが、Googleアナリティクスは最適化されていないリソースとして、いまだに表示されることがあります。

Google PageSpeed Insightsの合格した監査（Google Analyticsのスクリプトがここに表示されている）
Google PageSpeed Insightsの合格した監査（Google Analyticsのスクリプトがここに表示されている）

リソースはサーバー上にないため、Cache-ControlまたはExpiresヘッダーを使用してこれを変更することはできません。ただし、スクリプトをローカルでホストすることにより、Googleアナリティクスで「ブラウザキャッシュを活用する」方法はあります。

ただし、この方法はGoogleでは公式にサポートされていませんのでご注意ください。

Complete Analytics Optimization Suiteプラグインを使ってGoogleアナリティクスのブラウザキャッシュを活用する

上記の問題を解決したい場合は、Daan van den Bergh氏開発の、Complete Analytics Optimization Suite (CAOS)という無料のプラグインがあります。

CAOS WordPressプラグイン
CAOS WordPressプラグイン

WordPressプラグインディレクトリからダウンロードするか、WordPressダッシュボードの「プラグイン」>「新規追加」でCAOSを検索してダウンロードできます。

このスクリプトをローカルでホストすることには2つのメリットがあります。Googleへの外部HTTPリクエストが2から1に減り、さらにファイルのキャッシュを完全に制御できるようになります。つまり、キャッシュヘッダーが使用できる状態です。

はじめに、上記のプラグインをインストールして、GoogleアナリティクストラッキングIDを入力します。するとプラグインは、Googleアナリティクスに必要なトラッキングコードをWordPressサイトに追加、analytics.jsファイルをダウンロードしてサーバーに保存し、wp_cron()の定期的に機能するスクリプトを使用しファイルを更新し続けます。

また、フッターで読み込むように設定することもお勧めします。

CAOSトラッキングコード設定画面
CAOSトラッキングコード設定画面

CAOSは他のGoogleアナリティクスWordPressプラグインでは機能しませんのでその点にご注意ください。

WP-Rocketを使ってGoogleアナリティクスのブラウザキャッシュを活用する

または、WordPressキャッシングプラグインWP-Rocketを使用して同じ目標を達成できます。

WP Rocket WordPressプラグイン
WP Rocket WordPressプラグイン

このプラグインのGoogleトラッキングアドオンを使用すると、ボタンをクリックするだけで分析スクリプトをローカルでホストできます。「WP-Rocket」>「Add-ons」でステータスを切り替えるだけで完了します。

WP-Rocketとそのアドオンは、他のGoogleアナリティクスプラグインと互換性があります。有料ツールとして提供されれており、ライセンス価格は年間49ドルからです。

3. サードパーティスクリプトの使用を最小限に抑える

Googleアナリティクスのスクリプトは通常、Googleのサーバーでホストされることから、自分ではキャッシュを制御できず、Google PageSpeed Insightsスコアに問題を引き起こす可能性があります。

他のサードパーティスクリプトについても同じことが言えます。WordPressサイトでビジネスを運営している場合、コンバージョンの追跡やA/Bテストなどのためにサードパーティスクリプトを実行しているかもしれません。

これには、Facebookコンバージョンピクセル、Crazy Egg、Hotjarなどのスクリプトが含まれます。残念ながら、これらのスクリプトをローカルでホストする方法を見つけない限り、スクリプト制御のためにできることは何もありません。

Facebookピクセルについての1つのオプションとして、（先ほどとは別の）WP-Rocketアドオンが使用できます。Google PageSpeedスコアを向上させるには、サードパーティスクリプトの使用を最小限に抑えることが理想的です。そのため、サイトの監査を実施し、サイトに不要なスクリプトは削除するのが賢明かもしれません。

まとめ

サイトのパフォーマンスを完璧に測定するわけではありませんが、Google PageSpeed Insightsは、サイトの稼働状況を把握するための非常に便利な指標です。「静的なアセットと効率的なキャッシュ ポリシーの配信」に表示される提案を解決しスコアを向上させると、結果的には訪問者によるスムーズなサイト閲覧を支援できます。

Google PageSpeed Insightsでこれが表示された場合には、次の方法で解決を試みることができます。

  1. Cache-ControlまたはExpiresヘッダーを追加する
  2. Google Analyticsにブラウザキャッシュを適用する
  3. サードパーティスクリプトの使用を最小限に抑える

「ブラウザキャッシュを活用する」の修正や対策についてその他のヒントはご存知ですか？是非とも、下のコメント欄からお知らせください！

Jon Penland

Jon is the Chief Operating Officer at Kinsta and is involved with Kinsta's sales, customer service, and technical support teams on a daily basis. Jon's a family man. So when he isn't feverishly tapping the keys of his laptop he's usually helping one of his kids fix a bike or setting up Netflix for an impatient preschooler.