ブラウザーキャッシュを利用していない場合、サイトの速度は低下します。WordPressのパフォーマンスを最適化するため、すべてのサイトでブラウザーキャッシュを有効化しています。
ブラウザキャッシングは、訪問者のウェブブラウザに特定のファイルを保存し、次回以降の訪問時に再度ダウンロードする必要がないようにすることで、ページの読み込み速度を向上させます。この機能を使用していない場合、スピードテストの実行時に「ブラウザーキャッシュを利用する」という警告が表示されることがあります。
この投稿では、WordPressの「ブラウザーキャッシュを活用する」警告を修正する簡単な手順をご紹介します。これらのヒントに従うことで、サイトのパフォーマンスを向上させ、ユーザーにスムーズな体験を提供することができます。
WordPressのブラウザーキャッシュとは？
ブラウザーキャッシュはWordPressサイトの読み込み速度を向上させる方法です。
通常、ウェブページが読み込まれると、すべてのファイルが区切りで読み込まれます。このため、ブラウザーとWordPressホスティングサービスサーバー間で複数のリクエストが発生し、ウェブページの読み込み時間が長くなります。
ブラウザーキャッシュが有効化されると、ウェブブラウザーはウェブページのコピーをローカルに保存します。これによりブラウザーは、ユーザーがサイトの2ページ目にアクセスしたときに、スタイルシート、ロゴ、画像などの一般的なファイルをより速く読み込むことができます。
これにより、実際のサーバーへのリクエストが少なくなるため、サーバー全体の負荷が軽減され、パフォーマンスの最適化とユーザー体験が向上する。
ブラウザーキャッシュを活用せよ」という警告はどこで見られるのか？
ブラウザーキャッシュを有効化する」という警告は、ブラウザーキャッシュが有効化されていないか、キャッシュの設定が間違っている可能性があることを意味します。
GTmetrixやGoogle PageSpeed Insightsのようなツールを使ってサイトのスピードテストを実行すると、WordPressを高速化するために修正できることを示すレポートが得られます。
あなたのサイトが現在ブラウザーキャッシュを使用していない場合、ブラウザーキャッシュを有効化するよう警告が表示されます。
ページスピードインサイトツールの結果を見ると、このように見えます。
効率的なキャッシュポリシー』が機能していないという警告が表示されることがあります。
これらの警告はいずれも、ブラウザーによるキャッシュ設定のエラーを示しています。
ブラウザーキャッシュを活用する」という警告が表示された場合は、サイトを高速化するためにキャッシュルールを有効化し、カスタマイズする必要があることを意味します。
それでは、2つの異なる方法を用いて、WordPressの「ブラウザーキャッシュを利用する」警告を簡単に修正する方法を見ていきましょう。以下のクイックリンクから、使いたい方法を選んでください：
方法1：WP Rocketで「ブラウザーキャッシュを活用」の警告を修正する
WP Rocketは、市場で最高のWordPressキャッシュプラグインです。初心者に優しく、複雑なキャッシュやスピードに関するキーワードを知らなくても、すべてサイトのスピードを最適化することができる。
箱から出してすぐに、推奨されるキャッシュ設定はすべてWordPressブログを本当にスピードアップします。
WP Rocketで「ブラウザーキャッシュを活用」の警告を修正するには、プラグインをインストールして有効化するだけです。
それだけだ。
詳しくは、WordPressにWP Rocketを正しくインストール・設定する方法をご覧ください。
WP Rocketは自動的にブラウザーキャッシュを有効化し、正しいルールで.htaccessファイルを修正します。
注： SiteGroundウェブホスティングサービスを使用している場合は、代わりに無料のSiteGround Optimizerプラグインを使用することができます。WP Rocketとほぼ同じ機能があり、自動的にブラウザーキャッシュを有効化してくれます。
方法2：コードを使用して「ブラウザーキャッシュを利用」の警告を修正する
2つ目の方法は、WordPressファイルにコードを追加する方法です。もしこれをやったことがないのであれば、WordPressにウェブからスニペットを貼り付けるための初心者向けガイドを参照してください。
この方法は初心者に優しくないので、自分が何をしているのかよく分かっている場合にのみ従ってください。ほとんどのビジネスオーナーには、方法1の使用をお勧めします。
ということで、WordPressにコードを追加して「ブラウザーキャッシュを利用する」という警告を修正する方法を見てみましょう。
注：WordPressコードをカスタマイズする前に、WordPressサイトをバックアップすることをお勧めします。詳しくは、WordPressサイトのバックアップと復元方法をご覧ください。
サイトがApacheとNginxのどちらを実行しているかを判断する
まず、あなたのサイトがApacheサーバーを使用しているのか、Nginxサーバーを使用しているのかを確認する必要があります。
これを行うには、新しいタブまたはウィンドウでサイトを開きます。次に、右クリックして「Inspect」オプションを選択します。
次に、ページ上部の「ネットワーク」タブをクリックする。
結果を読み込むためにページを更新する必要があるかもしれません。
その後、「名前」カラムでドメイン名をクリックします。
ページの一番上にあるはずだ。
次に、「レスポンシブ・ヘッダー」のセクションに「サーバー」という項目があり、サーバーのタイプが表示されます。
この場合、サイトはアパッチ・サーバーで運営されている。
ApacheにCache-ControlとExpiresヘッダを追加する
アパッチサーバーで「ブラウザーキャッシュを利用する」警告を修正するには、.htaccessファイルにコードを追加します。
このファイルを編集するには、FTPクライアントまたはホスティングサービスのファイルマネージャーツールでWordPressホスティングアカウントに接続する必要があります。
接続が完了すると、サイトのルート・フォルダーに.htaccessファイルが表示されます。
もし見つからなくても心配しないでください。このファイルが非表示になっていることがあります。詳しくは、WordPressサイトの.htaccessファイルが見つからない理由をご覧ください。
次に、キャッシュコントロールおよび/またはexpiresヘッダーを追加して、ブラウザーキャッシュをオンにする必要があります。これはウェブブラウザーに、あなたのサイトリソースが削除されるまでの保存期間を知らせるものです。
- cache-controlヘッダーは、ウェブブラウザーに対して、どのようにキャッシュを行うべきか、具体的な詳細を示します。
- expiresヘッダーはキャッシュを有効化し、ウェブブラウザーに特定のファイルが削除されるまでの保存期間を知らせます。
.htaccessファイルに以下のコードを追加して、expiresヘッダーを追加することができます：
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
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 3 days"
</IfModule>
## EXPIRES HEADER CACHING ##
このコードタイプは、ファイルのタイプによって異なるキャッシュの有効期限を設定する。
その後、以下のコードを追加してキャッシュ・コントロールを有効化する：
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=96000, public"
</filesMatch>
このコードでは、キャッシュのリフレッシュが必要になる有効期限を設定します。上の例では、キャッシュの有効期限は90,000秒です。
ファイルを編集したら保存することを忘れないでください。その後、ウェブブラウザは新しいバージョンのファイルを要求します。
NginxにCache-ControlとExpiresヘッダを追加する
WordPressサイトのホスティングサービスにNginxウェブサーバーを使用している場合は、サーバー設定ファイルを編集してブラウザーキャッシュエラーを修正することができます。
このファイルをどのように編集し、アクセスするかはホスティングサービスによって異なりますので、ファイルへのアクセスにヘルプが必要な場合は、ホスティングサービスにお問い合わせください。
次に、期限切れヘッダーを追加するために以下のコードを追加する必要がある：
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 3d;
}
このコードタイプは、ファイルタイプごとに有効期限を設定します。画像はHTML、CSS、JS、その他のファイルタイプよりも長くキャッシュされることに注意してください。
その後、以下のコードを追加して、キャッシュコントロール・ヘッダーを追加することができる：
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 14d;
add_header Cache-Control "public, no-transform";
}
このコードはキャッシュの有効期限を設定します。上記のファイルタイプが14日間変更されないことをサーバーに伝えます。
WordPressをさらに高速化したい場合は、WordPressの速度とパフォーマンスを向上させる方法についてのガイドをご覧ください。
この投稿が、WordPressの「ブラウザーキャッシュを活用する」警告を簡単に修正する方法のお役に立てば幸いです。また、WordPress の一般的なエラーとその修正方法の究極のリストや、高速なサイトのための最速の WordPress ホスティングサービスもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
ご質問やご提案がおありですか？ディスカッションを始めるためにコメントを残してください。