Google PageSpeed InsightsまたはPingdomでWordPressウェブサイトを確認したことのある方はおそらく「ブラウザのキャッシュを利用する」黄色い警告表示を見たことがあるでしょう。あるからこそ本記事にご興味があるでしょう。今日は、上記の警告の概要、影響と予防方法についてです。

「ブラウザのキャッシュを利用する」とは?

以下のスクリーンショットに示すように、「ブラウザのキャッシュを利用する」警告とは、ブラウザキャッシュのことを指します。ウェブサイトにアクセスする度に、HTML、CSS、JavaScript、画像などのアセットがブラウザのローカルキャッシュにダウンロードされ、ページが読み込まれるたびにそのアセットを再取得せずに済みます。上記の警告表示が表示されるのは、ご利用のウェブサーバーまたはサードパーティのサーバーにHTTPキャッシュヘッダーがない場合です。または、ヘッダーがあるが、キャッシュ時間が短すぎる場合もあります。

ブラウザのキャッシュを利用するpagespeed insights

HTTPヘッダーに有効期限や最大経過時間を設定する

この警告は、Google PageSpeed Insightsを搭載した新しい「think with Google」ウェブサイトスピードテストでも発生することがあります。このページは本当はマーケティングツールですが、結果にびっくりしてウェブマスターに本エラーを転送する方が多いです。そこで、WordPressの開発者やデザイナーが、お客様を納得させる処理方法を探しているでしょう。

think with googleスピードテスト

think with Googleスピードテスト

Google Pagespeed Insightsなら当社の詳細ガイドも是非ご確認ください。 →WordPressでもGoogle PageSpeed Insightsで満点を取得する方法

WordPressの「ブラウザのキャッシュを利用する」警告を処理する

「ブラウザのキャッシュを利用する」警告なら、WordPressの一般ユーザーとしてよく遭遇する理由がいくつかあります。もちろん、ウェブサーバの設定が正しくないことは最も一般的でしょう。皮肉なことに、Google Analyticsのスクリプトが警告の理由である場合もあります。そして3つ目に、警告を返すのはサードパーティ製のスクリプトであることもあります。処理方法は以下通りです。

1. サーバーでの「ブラウザのキャッシュを利用する」

「ブラウザのキャッシュを利用する」警告が表示される最も一般的な理由は、ウェブサーバーに適切なヘッダーがないことです。以下のGoogle PageSpeed Insightsのスクリーンショットに示すように、有効期限が指定されていないことが理由です。キャッシングには、Cache-ControlヘッダーとExpiresヘッダーという2種類のヘッダーがあります。Cache-Controlヘッダーがクライアント側のキャッシュをオンにしリソースの最大経過時間を設定している一方、Expiresヘッダーはリソースの有効期限を指定するものです。

pagespeed insightsの「ブラウザのキャッシュを利用する」警告

Google PageSpeed Insightsの「ブラウザのキャッシュを利用する」警告

それでは、ヘッダーをサーバーに追加しましょう。注:少し無駄ですので、両方のヘッダーを追加する必要はありません。Cache-Controlは2つうち新しい方で、通常はこれが推奨されますが、GTmetrixなどの一部のウェブパフォーマンスツールがまだまだExpiresヘッダーを確認します。ただし、これらはすべて例に過ぎません。ファイルの種類、有効期限などを変更することもできます。以下にいくつかのオプションを示します。本チュートリアルでは単純に、共有ホスティングのApacheにExpiresヘッダーを追加することにしました。

注!Nginxの設定ファイルまたはApacheの.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";
}

上記のコードは何のためのものであるかというと、ファイルタイプが少なくとも1ヶ月間変わらないことをサーバーに伝えるためのものです。したがって、リソースが毎回ダウンロードされず、コンピューターにキャッシュされ、再訪問の読み込み時間が速くなります。

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

NginxではExpiresヘッダーを追加するには、サーバーブロックに次のコードを追加します。この例では、ファイルの種類に基づいて異なる有効期限を指定する方法を確認できます。

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

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

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

ApacheではCache-Controlヘッダーを追加するには、.htaccessファイルに次のコードを追加します。コードのスニペットは、ファイルの上部または下部(# BEGIN WordPressの前または# END WordPressの後)に追加できます。

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

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

ApacheではExpiresヘッダーを追加するには、.htaccessファイルに次のコードを追加します。

## 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 ##

Kinstaのお客様は、当社のすべてのNginxサーバーにすでに配置されている為、これらのヘッダーについて心配する必要はありません。そして、KeyCDNなどのCDNプロバイダーをご利用の場合も、設定されている可能性は高いため、心配不要でしょう。

警告が消えたかを確認するには、ChromeのDevToolsネットワークパネルでヘッダーを確認するか、Google PageSpeed Insightsで再びWordPressウェブサイトを確認します。

ダウンタイムまたはWordPressの異常に悩んでいますか。Kinstaは時間を節約するために設計されたホスティングソリューションです!当社のフィーチャーをご確認ください。
キャッシュヘッダーwordpress

HTTPキャッシュヘッダー

2. 「ブラウザのキャッシュを利用する」とGoogle Analyticsについて

「ブラウザのキャッシュを利用する」警告の2番目に一般的な理由は、Google Analyticsです。Google独自のスクリプトであるため、皮肉なことです。問題は、以下のスクリーンショットに示すように、アセットに非常に短い2時間のキャッシュ時間が設定されていることです。理由はおそらく、Google自身が何らかの理由で修正を行った場合にすべてのユーザーができるだけ早くその修正版を取得することでしょう。ただし、自身のサーバー上でGoogle Analyticsスクリプトをホストするという処理方法があります。これはGoogleではサポートされていませんので、ご注意ください。

「ブラウザのキャッシュを利用する」-pagespeed insights analytics

Google Analyticsキャッシング

WordPressウェブサイトでGoogle AnalyticsをローカルでホストすることができるDaan van den Berghに作成かつ開発された、Complete Analytics Optimization Suiteという素晴らしい無料のプラグインがあります。

google analyticsをローカルでホストするプラグイン

CAOSプラグイン

Complete Analytics Optimization Suiteは、WordPressレポジトリからダウンロードするか、WordPressダッシュボードのプラグインの「新規追加」で検索することによりダウンロードできます。このプラグインを使用すると、Google AnalyticsのJavaScriptファイル(analytics.js)をローカルにホストし、wp_cron()を使用してanalytics.jsを最新の状態に保つことができます。プラグインのその他の機能は、例えば訪問者のIPアドレスを簡単に匿名化すること、調整された直帰率を設定すること及び、スクリプトを配置すること(ヘッダーまたはフッター)があります。

Analyticsのスクリプトをローカルでホストすることのその他の利点は例えば、Googleへの外部HTTPリクエストを2点から1点に減らすことと、ファイルのキャッシュを完全に制御できることです。つまり、前項にあるようにキャッシュヘッダを利用するることができます。

プラグインをインストールし、Google AnalyticsのトラッキングIDを入力するだけで、Google Analyticsに必要なトラッキングコードがWordPress ウェブサイトに追加され、analytics.jsファイルがダウンロードかつサーバーに保存され、wp_cron()のスケジュールスクリプトで更新されます。フッターにも読み込まれるように設定することをお勧めします。注:このプラグインは他のGoogle Analytics関連のWordPressプラグインとは動作しません。

ローカルでホストするAnalytics設定

ローカルでホストするAnalytics設定

3. サードパーティ製のスクリプトは?

WordPressウェブサイトでビジネスを行っている方はおそらく、コンバージョンやA/Bテストなどを追跡するためのサードパーティス製クリプトを採用しているでしょう。例えば、Facebookコンバージョンピクセル、Twitter、CrazyEgg、Hotjarなどのスクリプトがあります。残念ながら、ローカルでホストすることができない為、サードパーティ製アセットのキャッシングを制御する方法は何もありません。一方、小規模なウェブサイト及びブログをお持ちの方は上記の2つの推奨事項に従うだけで「ブラウザのキャッシュを利用する」警告を完全に処理できるはずです。

サードパーティ製スクリプトによる「ブラウザのキャッシュを利用する」

サードパーティ製スクリプトによる「ブラウザのキャッシュを利用する」

まとめ

WordPressウェブサイトの「ブラウザのキャッシュを利用する」警告の処理方法はいくつかあり、完全に削除できる場合が多いです。なお、ウェブパフォーマンスツールはあくまでもガイドラインだけで、結果について心配しすぎる必要はありません。一方、警告を処理すると、結果的にWordPressウェブサイトのスピードが改善される場合があります。

「ブラウザのキャッシュを利用する」警告のいい処理方法をご存じですか。コメントでも書いて教えてください。

39
シェア