2021年にWordPressでレバレッジブラウザキャッシングを修正する方法

WordPressでレバレッジブラウザキャッシングを修正する方法

序章

ウェブサイトの読み込みが遅いですか？ WordPress でブラウザのキャッシュを活用するという警告を解決するための効果的なソリューションをお探しですか? ページ速度は、ユーザー エクスペリエンスの重要な側面です。 この投稿では、WordPress でブラウザのキャッシングを活用する方法について、基本的なポイントから高度なポイントまでを共有します。 したがって、この問題にも直面している場合は、理解を深めるために投稿全体を読む必要があります。

要求されたページをユーザーのブラウザにロードするのにかかる時間は、たとえば販売を完了するためにユーザー自身がサイトにとどまるという事実に大きく影響します。 ページの読み込み時間は、いくつかの要因によって異なります。ブラウザのキャッシュはその 1 つです。

まず、Leverage Browser Caching とは何か、それが Web サイトの高速化にどのように役立つかについて説明します。 そのため、WordPress サイトにブラウザーのキャッシュが必要かどうかを評価する方法を見ていきます。 最後に、プラグインを使用する場合と使用しない場合で、WordPress のブラウザ キャッシュの活用に関する警告を解決するいくつかの方法を見ていきます。

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

キャッシュは一時的なストレージ スペースです。 訪問者が Web サイトのページを要求すると、サーバーは必要な情報をデータベースから収集し、HTML ドキュメントに編成して、ブラウザーに提供します。 ブラウザーはこのドキュメントを分析し、関連するすべてのリソースをダウンロードしてページを表示します。

キャッシュとは、ページのペイロードの一部をキャッシュに格納して、将来のページの読み込みを高速化するプロセスです。 キャッシュは、訪問者のサーバーまたはデバイスに存在する可能性があります。

サーバー キャッシュには、データベース クエリと、要求されたページの静的 HTML 応答を格納できます。

レバレッジ ブラウザ キャッシングは、指定された期間、スタイル シート、スクリプト、画像などのリソースを保存するために、訪問者のデバイスで一時的なストレージを利用するプロセスです。

その後、ページにアクセスすると、ユーザーがページをリクエストするたびに、ブラウザーは同じリソースを繰り返しダウンロードします。 これらの静的リソースは WordPress サイトのかなりの量のペイロードを構成するため、ブラウザーのキャッシュによってページの読み込み時間が短縮されます。

ブラウザのキャッシュは必要ですか?

ペイロードのリソースのサイズの分布を Web サイトでチェックすると、通常、リソースの大きさと、ページを表示する前にリソースをダウンロードするためにブラウザーが送信する必要があるリクエストの数がわかります。 Web ページの大部分が静的ファイルで構成されていることに気付いた場合は、ブラウザーをキャッシュしてページの速度を改善することを検討する必要があります。

ブラウザのキャッシュが必要かどうかを判断するより自然な方法は、GTmetrix などのページ速度テスト ツールを使用することです。 ウェブサイトの URL を入力するだけで、詳細なテストを開始できます。 テスト結果は、ウェブサイトを高速化する方法を示します。 ご覧のとおり、結果セクションの一般的な警告は、ブラウザー キャッシュの活用です。

または、ページ速度テスト ツールである Think with Google を使用して、モバイル デバイスで Web サイトを評価することもできます。 このツールの主な推奨事項は、Web サイトのブラウザー キャッシュを利用することです。

Web サイト ページの速度をテストするための別の Google ツールである PageSpeed Insights は、ページ速度を向上させる効果的なキャッシュ ポリシーを作成することを提案する場合があります。 ブラウザーのキャッシュは、効果的なキャッシュ ポリシーの重要な部分です。

プラグインを使用しない WordPress でブラウザ キャッシュを活用するという警告を解決する

プラグインを使用したくない場合は、Web サーバーの設定を変更して、ブラウザーのキャッシュを活用するように修正できます。 この場合、Web サーバーは訪問者のブラウザーに特定のリソースをブラウザーのキャッシュに保存するように指示します。 ブラウザは、これらのファイルを一定期間ローカルに保存し、その後ページにアクセスするときに使用します。

訪問者のブラウザーにキャッシュを開始するように指示する Web サーバーの設定は、サーバーによって異なります。 この投稿では、最も人気のある 2 つの Web サーバーである Apache と Nginx でブラウザーのキャッシュを有効にする方法を紹介します。

次の手順に従って、ブラウザのキャッシングの活用を修正できます。

1. Expires ヘッダーの追加: これらのヘッダーは、サーバーからリソースの新しいバージョンを要求するタイミングをブラウザーに伝えます。
2. キャッシュ チェック ヘッダーの変更: これらのヘッダーを使用して、キャッシュ基準を設定できます。
3. エンティティ タグ ヘッダー (ETag) の設定: サーバー上のリソースがローカル ファイルと比較して変更されたかどうかを識別することができます。

Apache でのブラウザー キャッシュの活用を修正する

1. .htaccess ファイルを作成または編集する

Apache サーバーでは、必要なすべてのパラメーターを .htaccess ファイルに設定できます。 このファイルを使用すると、Apache 設定を手動で構成できます。 これは単純なテキスト ファイルであり、Apache パラメーターを格納し、それが存在するディレクトリのアクセス許可と構成を設定します。

続きを読む:オンページ SEO チェックリスト: ランクを上げるための実用的な最適化の 10 のヒント

Web サイトの先頭ディレクトリに.htaccessファイルを配置すると、そのルールがサイトのすべてのページに適用されます。 サブディレクトリの 1 つに別の.htaccessファイルを配置して、その場所のみに特定のアクセス許可を設定することもできます。 下位レベルの .htaccess ファイルは、ルート ディレクトリの .htaccess ファイルの設定を上書きすることに注意してください。

サーバーへのターミナル アクセスがある場合は、リモートでログインして、適切な場所に.htaccessファイルを作成できます (サイト レベルのブラウザー キャッシュ ルールの場合、これはルート フォルダーである必要があります)。

または、cPanel ファイル マネージャーを使用している場合は、必要な場所に移動し、 .htaccessファイルを作成します。

.htaccessファイルが既にある場合は、新しいブラウザー キャッシュ ルールを追加するだけです。

2. Expires ヘッダーを追加する

.htaccessファイルの最初の設定は、 Expiresヘッダー機能を有効にすることです。 次の行をファイルに追加します。

有効期限有効

その後、以下に示す構文を使用して、さまざまなテキスト ファイルの期間を設定できます。

ExpiresByType テキスト / CSS「アクセス 1 か月」

ExpiresByType テキスト・HTML「アクセス1ヶ月」

画像の有効期限を設定するには、テキスト スラッシュの代わりに画像を使用し、代わりに画像拡張子を使用します。

ExpiresByType 画像/jpeg「アクセス1ヶ月」

ExpiresByType 画像・svg「アクセス1ヶ月」

申請期限を設定するには、application を使用してファイル拡張子を指定します。

ExpiresByType 申込書・pdf「アクセス1ヶ月」

特定の設定でカバーされていない他のすべてのファイルについては、ExpiresDefault の定義を使用します。

有効期限 デフォルトの「アクセス 1 か月」。

3. キャッシュ ポリシーを定義する

次に、キャッシュ チェック設定を使用してキャッシュ基準を定義する必要があります。

キャッシュ ポリシーには、次の 3 つの主要部分があります。

• リソースのキャッシュ方法
• キャッシュの場所
• リソースが期限切れになるまでの時間

パブリック キャッシュは、リソースをどこにでもキャッシュできることをブラウザに示します。 対照的に、プライベート キャッシュでは、クライアント デバイスにのみ保存できます。

たとえば、ログインしているユーザーのプロファイル ページは、クライアント デバイスにのみキャッシュする必要があります。

逆に、ブログのホームページも CDN にキャッシュできます。 次のルールを追加して、パブリック キャッシュ ポリシーを設定できます。

<IfModule mod_headers.c>

Public Cache-Control ヘッダー セット

</ IfModule>

次のフィルターをヘッダー モジュールに追加することで、さまざまな種類のファイルにさまざまな基準を指定することもできます。

<ifModule mod_headers.c>

<filesMatch “\. (ico | jpeg | jpg | png) $”>

Public Cache-Control ヘッダー セット

</ファイルマッチ>

<filesMatch “\. (php) $">

プライベート キャッシュ制御ヘッダー セット

</ファイルマッチ>

</ IfModule>

上記のコードは、ブラウザが画像ファイルをどこにでも保存できることを指定していますが、PHP ファイルはクライアント デバイスに保存する必要があります。

各ファイル一致ルールに Expires 構成を追加することもできます。 有効期限は秒単位で定義する必要があります。 ゼロに設定すると、ブラウザーはページが読み込まれるたびにファイルを要求する必要があります。

ヘッダー セットの有効期限 0

4. Apache でエンティティ タグを無効にする

最後に、次のコードを使用してエンティティ タグを無効にする必要があります。

FileETag なし

ETag を無効にすると、ブラウザーはキャッシュ条件に依存し、ページが読み込まれるたびにファイルを再検証する必要がなくなります。

.htaccessファイルを保存し、 Apache を再起動して変更を有効にします。

Nginx でブラウザのキャッシングを活用する問題を解決する

Nginx では、nginx.conf 構成ファイルは /etc/nginx/site-enabled/default の場所にあります。

次のコードを使用して、特定のファイル タイプに Expires ヘッダーを追加できます。

場所 ~ * \. (ico | jpeg | jpg | png) $ {

有効期限は 30 日です。

}

同じコード ブロックに Cache-Control ヘッダーを追加することもできます。

場所 ~ * \. (ico | jpeg | jpg | png) $ {

有効期限は 30 日です。

add_header キャッシュ制御「パブリック」;

}

構成ファイルを保存し、Nginx を再起動して変更を有効にします。

プラグインを使用してブラウザのキャッシュを活用する

WordPress のキャッシング プラグインを使用している場合は、既にブラウザー キャッシングがサポートされている可能性があります。

次に、いくつかの最も有名なキャッシュ プラグインを使用して、ブラウザーのキャッシングを活用する方法を見てみましょう。

1.WPロケット

WP Rocket は、数回クリックするだけですべての速度の最適化を管理できる、WordPress 用の最速かつ最も推奨されるプラグインの 1 つです。 WP Rocket を使用すると、ブラウザのキャッシュを活用して解決できるだけでなく、次のようなさまざまな手法を使用してサイトを最適化できます。

• 静的ファイル圧縮 (GZip) – 合計データ サイズを削減します (WordPress で GZip 圧縮を有効にする方法に関する完全な投稿をお読みください)。
• ファイル キャッシュを有効にする (キャッシュのプリロードを含む) – サーバーへの負荷を軽減します (そして、各ページの事前にスキャンされたコピーを回復します)
• Google フォントの最適化– 大量のフォントがすばやく読み込まれるようにするため、
• 遅延読み込み– 画像が必要なページのセクションまでユーザーが下にスクロールした場合にのみ、画像が課金されるようにします
• 縮小と結合– テキスト リソースのサイズと結合を縮小して、より迅速にエンド ユーザーに提供します。
• すべてのリソースがダウンロードされるのを待つのではなく、ページがすばやく表示されるように、 JS の読み込みを延期します。
• CDN ネットワークを統合して有効にする– より重いイメージがより速く配信されるようにする
• DNS プリフェッチ– サードパーティ コンテンツの発信元を解決するのにかかる時間を短縮する

これらすべては、Web サイトの最適化に直接関与していない人には理解できないように思えるかもしれません。 ただし、実際には、これらはすべて、WordPress を高速化するために必要な対策です。

WP Rocket のレビューを読むことを強くお勧めします。

2.ライトスピードキャッシュ

LiteSpeed Cache は、機能を有効にするだけでブラウザのキャッシングを活用できるキャッシング プラグインです。 プラグインをインストールして有効化し、キャッシュ設定に移動します。 [ブラウザ] タブに切り替えて、ブラウザの [キャッシュ] オプションを許可します。

有効期限の設定も可能です。 ただし、この設定は Web サイト上のキャッシュされたすべてのファイルに適用されることに注意してください。

3. WP最速キャッシュ

WP Fastest Cache は、シンプルなカスタマイズ オプションを備えたもう 1 つの WordPress キャッシュ プラグインです。 無料版では、ブラウザのキャッシュを有効にすることができます。 設定ページに移動し、ブラウザのキャッシュのチェックボックスを選択します。

4. W3 合計キャッシュ

W3 Total Cache は、広く使用されているもう 1 つのブラウザー キャッシュ プラグインです。 幅広いキャッシング オプションをカスタマイズできます。 インストールしたら、設定ページのキャッシュ ブラウザセクションに移動します。

このプラグインを使用すると、画像、スクリプト、スタイル シートなど、さまざまなカテゴリのファイルにアクセス許可を設定できます。 グループごとに、Expires ヘッダー、Expires ライフタイム、および ETag を設定できます。

よくある質問

結論

この記事では、ページ速度の重要性と、WordPress でブラウザーのキャッシングを活用する必要がある理由について説明しました。 WordPress サイトにブラウザー キャッシュが必要かどうかを示す速度テスト ツールを確認しました。 次に、プラグインを使用せずにブラウザーのキャッシュを有効にするために、さまざまな Web サーバーを構成する方法について説明しました。 最後に、WordPress のレバレッジ ブラウザー キャッシュを修正できる 3 つの人気のあるプラグインを調べました。