WordPressのブラウザキャッシュを活用してページの読み込み時間を最適化する

公開: 2018-07-25

@Cloudwaysをフォローする

WordPressウェブサイトのユーザーは常に箱から出して何かを探しており、90以上のGoogle PageSpeedInsightsスコアベンチマークを達成することを目指しています。一般に、WordPress Webサイトを高速化するためのいくつかの手法がありますが、とりわけ、ブラウザのキャッシュはWebサイトの速度最適化分析中に最も一般的に見られる問題です。

ウェブサイトのパフォーマンスを監視およびテストするには、Google PageSpeed Insights、GTMetrix、Pingdomなどの多数のオンラインツールを使用できます。それらは正確な結果を提供し、あなたのウェブサイトがどこで改善を必要としているかを理解するのを助けます。サイトのパフォーマンスをテストしているときに、「ブラウザのキャッシュを活用する」という警告通知を受け取った可能性があります。

今日は、この問題を解決する方法について説明します。だから、時間を無駄にしないで、掘り下げましょう。

ブラウザキャッシュとは何ですか？どのように機能しますか？
レバレッジブラウザキャッシングとは何ですか？
「ブラウザキャッシュを活用する」警告を修正
- キャッシュを使用するようにリクエストヘッダーを変更する
- キャッシングポリシーの最適化
キャッシュコントロール
GoogleAnalyticsのブラウザキャッシュを活用する
レバレッジブラウザのキャッシュ警告が引き続き表示されますか？
私はCloudwaysのお客様ですが、何が含まれていますか？
W3トータルキャッシュでブラウザキャッシングを活用
よくある質問

ブラウザキャッシュとは何ですか？どのように機能しますか？

ユーザーがWebサイトにアクセスするたびに、ブラウザーはサーバーからHTML、スクリプト、画像、CSSなどのアセットをロードする要求を送信します。次に、サーバーはブラウザーの要求に応答します。要求されたアセットのサイズとサーバーの処理時間によっては、応答に少し時間がかかる場合があります。最終的にはサーバーの負荷が増加し、ユーザー側のWebサイトの速度が低下します。

この状況では、ブラウザのキャッシュが最適に機能します。訪問者が初めてWebサイトにアクセスしたときに、静的コンテンツをユーザーのブラウザに保存します。 Webサイトがブラウザーキャッシュで適切に構成されておらず、上記のパフォーマンステストツールのいずれかを使用してWebサイトの速度をテストしている場合、ツールはブラウザーキャッシュを活用するための警告メッセージを確実に表示します。

Googleによると、サーバーの応答には、ヘッダーに次の2つのタグを含める必要があります。

Cache-Controlは、ブラウザやその他の中間キャッシュによって個々の応答をキャッシュする方法と期間を定義します。

ETagは、リソースが最後に要求されてから変更されたかどうかを確認するためにブラウザによって自動的に送信される再検証トークンを提供します。

より良いパフォーマンスとセキュリティをお探しですか？

WordPressWebサイトを無料でCloudwaysに移行します。

今すぐ移行してください！

レバレッジブラウザキャッシングとは何ですか？

簡単に言うと、ブラウザのキャッシュを活用することで、HTTPリクエストを減らしてページをより速く読み込むことができ、サーバーの応答時間も向上します。

実例を見てみましょう。 Think with Googleを使用して自分のWebサイトをテストしましたが、結果は次のとおりです。

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

Google PageSpeedInsightsツールからテストしてみましょう。

ブラウザのキャッシュエラーを活用する

さて、あなたは私のウェブサイトの全体的なパフォーマンスがかなり良いのを見ることができます。しかし、それを改善する余地があります。内部URLをキャッシュできることを示しています。

「ブラウザキャッシュを活用する」警告を修正

「ブラウザのキャッシュを活用する」という警告を修正するには、次の2つの手順を実行する必要があります。

キャッシュを使用するようにリクエストヘッダーを変更する
キャッシュポリシーを最適化する

1.キャッシュを使用するようにリクエストヘッダーを変更します

Webサイトの速度と応答を向上させる1つの方法は、キャッシュを使用するように要求ヘッダーを変更することです。 WordPressの.htaccessファイルに数行のコードを追加します。

注： .htaccessは、Webサイトの制御室です。 適切に構成されていない場合、サイトにいる間にサイト全体が破損する可能性があります。 .htaccessファイルでWordPressを保護する方法を学びましょう。

WordPressでブラウザのキャッシュを利用するには、WordPressインストールのメインディレクトリにアクセスし、.htaccessファイルを検索して、任意のコードエディタで開きます。 WordPressの.htaccessファイルの先頭に以下の行を貼り付けるだけです。

 ##キャッシュの有効期限が切れます##

<IfModule mod_expires.c>

ExpiresActive On
ExpiresByType image / jpg「アクセス1年」
ExpiresByType image / jpeg「アクセス1年」
ExpiresByType image / gif "access 1 year"
ExpiresByType image / png「アクセス1年」
ExpiresByType text / css "アクセス1か月"
ExpiresByType text / html "アクセス1か月"
ExpiresByType application / pdf「アクセス1か月」
ExpiresByType text / x-javascript "アクセス1か月"
ExpiresByType application / x-shockwave-flash "access 1 month"
ExpiresByType image / x-icon「アクセス1年」
ExpiresDefault「アクセス1か月」

</ IfModule>

##キャッシュの有効期限が切れます##

2.キャッシングポリシーを最適化する

Webサイトでの応答時間を短縮するための2番目のステップは、キャッシュポリシーを最適化することです。上記のコードは、ファイルタイプとその有効期限について説明しています。特定の静的コンテンツをユーザーのブラウザキャッシュに保存する時間は、完全にあなた次第です。画像などの静的コンテンツが長期にわたる場合。 1年間設定することをお勧めします。ただし、近い将来変更される可能性があると思われるコンテンツについては、有効期限を少なくとも1か月に設定することをお勧めします。

キャッシュコントロール

上記の方法がサーバーで機能しない場合は、キャッシュコントロールを使用してキャッシュの有効期限を設定するのに役立つ別の方法があります。次の行をコピーして、.htaccessファイルの先頭に貼り付けるだけです。

 ＃ほとんどの静的資産で1か月

<filesMatch "。（css | jpg | jpeg | png | gif | js | ico）$">
ヘッダーセットCache-Control "max-age = 2592000、public"

</ filesMatch>

前の手順と同じように、上記のコードはさまざまなファイルタイプの有効期限とキャッシュポリシーを記述しています。

注： これは、警告を排除できる最小値です。 有効期限がこれより短い場合でも、レバレッジブラウザの警告が表示され、有効期限を長くすることをお勧めします。

.htaccessファイルを正しく設定したら、テストします。だから、テストしてみましょう！
また、「ブラウザのキャッシュを活用する」という警告が修正されました。
WordPressはGoogleAnalyticsのブラウザキャッシングを活用します
Google Analytics用のWordPressプラグインを使用している場合でも、すべてを正しく設定しても、レバレッジブラウザのキャッシュ警告が表示される場合があります。
これは、Google Analyticsがデフォルトの有効期限を2時間に設定して、更新をできるだけ早く取得できるようにするためです。

GoogleAnalyticsのレバレッジブラウザキャッシュ警告を修正する方法は2つあります。
ローカル： analytics.jsやga.js （ブラウザのキャッシュを活用して処理しているファイル）のローカルコピーを作成できます。 Googleはこの方法を推奨していないことに注意してください。
プラグイン： GoogleAnalyticsファイルをローカルでホストするCompleteAnalytics Optimization Suite（CAOS）WordPressプラグインを使用し、 wp_cron（）を使用して最新の状態に保ちます。
レバレッジブラウザのキャッシュ警告が引き続き表示されますか？
すべてを正しく設定した後でも、下の画像のように、Googleがブラウザのキャッシュを活用することを提案しているのを目にするかもしれません。

ご覧のとおり、上記のファイルはサードパーティの統合です。これらはサーバーに存在しません。それらを削除する以外に私たちができることは何もありません。すべてのサードパーティ統合により、速度テストツールでこの警告が発生する可能性があります。
私はCloudwaysのお客様ですが、何が含まれていますか？
Cloudwaysに最適化されたWordPressホスティングの顧客である場合は、オンライン速度テストツールでポップアップするWordPressレバレッジブラウザーキャッシュ警告についての心配を脇に置く必要があります。 Cloudwaysがこの問題を単独で処理するためです。 [サーバー]→[設定とパッケージ]→[詳細]に移動し、少し下にスクロールしてNGINX –静的キャッシュの有効期限を探すだけで有効期限を変更できます。デフォルト値は43200分で、これは30日に相当します。

W3トータルキャッシュでブラウザキャッシングを活用
上記の方法は、レバレッジブラウザのキャッシュ警告を手動で削除する方法です。 W3 Total Cacheなどのキャッシュプラグインを使用している場合は、 [パフォーマンス]→[一般設定]に移動して、ブラウザキャッシュを有効にする必要があります。
次に、ブラウザキャッシュに移動し、5つのチェックボックスの下にマークを付けます。
少し下にスクロールして、CSSファイルとJSSファイルの有効期限を設定します。デフォルト値は31536000で、これは365日に相当します。これを必要な時間枠に変更できます。
もう少し下にスクロールして、HTMLとXMLの有効期限を設定します。
メディアおよびその他のファイルのデフォルト値を変更するには、少し下にスクロールして有効期限を設定します。デフォルト値は31536000で、これは365日に相当します。
最終的な考え
ブラウザキャッシングを活用すると、Webパフォーマンステストのスコアを向上させることができます。これらの設定は、基本的なガイドラインを作成し、WordPressユーザーの間で理解するためだけのものであることを忘れないでください。これとは別に、個人が短時間でより速いウェブサイトを達成するのを助けることができる多くのテクニックがあります、そこで最も重要なのは最速のワードプレスホスティングを選ぶことです。
ご不明な点がございましたら、下のコメント欄でお気軽にお問い合わせください。答えたいです。
よくある質問
キャッシュファイルとは何ですか？
キャッシュファイルは、特定の期間Webサイトにアクセスしているのと同じように、一時的に使用するためにダウンロードされるファイルです。次回同じWebサイトにアクセスすると、キャッシュされたファイルが既にダウンロードされているため、読み込みが速くなります。
キャッシュデータは重要ですか？
はい、キャッシュデータは速度にとって重要です。ほとんどすべてのウェブサイトがそれを使用しています。ただし、Webサイトの開発段階にある場合は、既に保存されているバージョンが表示されるため、キャッシュに問題が発生する可能性があります。
ブラウザのキャッシュには何がありますか？
ブラウザキャッシュは、ブラウザがウェブサイトを表示するためにダウンロードしたファイルの一時的なストレージです。これには、HTML、カスケードスタイルシート（CSS）、JavaScript、画像、およびキャッシュ可能なその他のマルチメディアコンテンツが含まれます。
ブラウザのキャッシュをクリアする必要があるのはなぜですか？
アクセスしたWebサイトが更新されると、古いコンテンツが表示される場合があります。これは、ブラウザのキャッシュをクリアしなかったことが原因です。
ブラウザのキャッシュをクリアするにはどうすればよいですか？
ブラウザのキャッシュをクリアできるWordPressキャッシュプラグインがいくつかあります。そうでない場合は、それぞれのブラウザのガイドに従って、手動でキャッシュをクリアできます。
キャッシュされたデータを削除しても問題ありませんか？
場合によります！キャッシュが混乱することがあり、キャッシュをクリアする必要があります。部分的に読み込まれた要素や不適切な形式のページ、間違った場所にある画像などを目にしたときはいつでも、誰もが最初に思い浮かぶのはキャッシュをクリアすることです。キャッシュをクリアすると、保存されているデータが失われ、ブラウザが新しいコンテンツを取得します。