インスタント修正WordPressはブラウザのキャッシュを活用します（段階的）

公開: 2021-07-07

WordPress でレバレッジ ブラウザー キャッシュを修正する方法を完全に理解したい場合は、共有することがたくさんあるので、最後までお付き合いください。

非常に速い読み込み速度が好きではない人はいますか?

しかし、どういうわけか、「ブラウザのキャッシュを活用する」ことで、Web サイトの読み込みが速くならないことに気付きました。

それでも、私たちは解決策を持ってそのためにここにいます。

これは、ほとんどの人が Google PageSpeed Insights で遭遇する最も一般的なエラーです。

また、Google PageSpeed Insights で 90 を超えるスコアを達成することが目標である場合は、これを修正する必要があります。

ページの速度は、Google SERP で上位にランキングされるだけでなく、優れたユーザー エクスペリエンスを提供するためにも重要であることを知っておく必要があります。

この投稿では、WordPress がブラウザー キャッシュを利用するものと、WordPress でブラウザー キャッシュを活用する問題を修正する方法について説明します。

WordPress でレバレッジ ブラウザー キャッシュを修正する方法を完全に理解したい場合は、共有することがたくさんあるので、最後までお付き合いください。

非常に速い読み込み速度が好きではない人はいますか?

しかし、どういうわけか、「ブラウザのキャッシュを活用する」ことで、Web サイトの読み込みが速くならないことに気付きました。

それでも、私たちは解決策を持ってそのためにここにいます。

これは、ほとんどの人が Google PageSpeed Insights で遭遇する最も一般的なエラーです。

また、Google PageSpeed Insights で 90 を超えるスコアを達成することが目標である場合は、これを修正する必要があります。

ページの速度は、Google SERP で上位にランキングされるだけでなく、優れたユーザー エクスペリエンスを提供するためにも重要であることを知っておく必要があります。

この投稿では、WordPress がブラウザー キャッシュを利用するものと、WordPress でブラウザー キャッシュを活用する問題を修正する方法について説明します。

それでは、掘り下げてみましょう。

目次

WordPress のブラウザ キャッシュの活用に関する情報はほとんどありません

簡単に言えば、ブラウザのキャッシュを利用すると、HTTP リクエストが減り、サーバーの応答時間が短縮されるため、ページの読み込みが高速化されます。

さて、キャッシングとは何を意味するのでしょうか?

Web サイトで使用できるキャッシュ可能なリソースをブラウザーがローカルに保存する時間は、キャッシュと呼ばれます。

その中には何が含まれていますか？

これには、画像、CSS、JavaScript などが含まれます。

誰かが Web サイトにアクセスすると、デバイスに保存されているキャッシュ可能なリソースが再アップロードされます。

したがって、ウェブサイトの読み込み速度が目に見えて改善されます。 これが、人々が WordPress でブラウザのキャッシングを利用したい理由です。

実際のデータとソリューションを示す本物のプラットフォームとは?

Think with Google を試して、サイトの読み込みが速いか、完全に読み込むのに数秒かかるかを確認してください。

このツールは、完全なレポートを使用して、Web サイトを最適化して高速に読み込む方法に関するすべてのソリューションを提供します。

使用できるもう 1 つの正当なツールは、Web サイトのページ速度をテストするために Google が提供する PageSpeed Insights です。

ページ速度を向上させる強力なキャッシュ ポリシーを作成することをお勧めします。

ブラウザのキャッシュを活用する方法

Web サイトを所有または運営している場合は、サーバー キャッシングとは、Web サイトがキャッシュされた Web ページを生成するメカニズムを指すことを知っておく必要があります。

これはサーバー側です。 ブラウザー キャッシュは、ユーザーがブラウザー経由で Web サイトにアクセスするときに発生します。

これは、前のステートメントの正反対です。

さらに、ブラウザー キャッシュを使用すると、訪問者のブラウザーにリソースを保存する期間をサーバーに伝えることになります。

ブラウザのキャッシュを利用するには、通常、HTTP ヘッダーを識別して、Web サイトのさまざまなファイル タイプの正しい有効期限を指定する必要があります。

コードを手動で入力するか、WordPress プラグインを使用するかは、Web サーバーが Nginx か Apache かによって異なります。

それでは、プラグインの有無にかかわらず、WordPress でブラウザーのキャッシュを活用する方法に移りましょう。

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

多くの人は、この問題を修正するプラグインを好みません。

Web サーバーの設定を変更することで、ブラウザーのキャッシュを使用できます。

次に、Web サーバーは、訪問者のブラウザーに、これらのリソースをブラウザーのキャッシュに保存するように指示します。

これらのファイルは、ブラウザによって一定期間ローカルに保存され、その後のページ訪問に使用されます。

訪問者のブラウザーのキャッシュを開始するよう Web サーバーに指示する手順は、サーバーによって異なります。

Apache と Nginx はどちらも最も人気のある Web サーバーです。

両方のサーバーで、WordPress のブラウザ キャッシュを活用して修正を開始しましょう。

  1. WordPress を使用してブラウザのキャッシュを活用する (Apache)

多くの共有ホスティング サービスは Apache を使用しているため、サイトに .htaccess ファイルがある場合は、Apache コードの指示に従う必要があります。

カスタム コードを使用して、Apache サーバーのブラウザー キャッシュを利用する方法を次に示します。

サーバーが Apache で実行されていることを確認したら、次のステップに進むことができます。

  • サーバーにアクセスするには、CPanel にログインするか、FTP クライアントを使用します。
  • 今すぐ.htaccessファイルを見つけてください。


.htaccess ファイルはデフォルトで非表示になっている可能性があるため、隠しファイル (ドットファイル) を表示する必要がある場合があります。

.htaccess ファイルは下の画像のようになります。

サーバー上で直接編集するか、インポートしてテキストエディターで開くことができることを理解する必要があります。

さらに、次のようなブラウザーのキャッシュ ルールを決定するための多くの選択肢があります。

Expire ヘッダーまたはCache-Control ヘッダー。

両方を見てみましょう。

  • キャッシュ制御ヘッダー:

.htaccess ファイルを開いた後、その先頭に次のコード スニペットを追加する必要があります。

このコードをコピーしてください：

 # BEGIN Cache-Control Headers <IfModule mod_expires.c> <IfModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header append Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header append Cache-Control "private, must-revalidate" </filesMatch> </IfModule> </IfModule>
  • Expires ヘッダー:

これらの Expire ヘッダーは、Cache-Control ヘッダーと同様に、.htaccess ファイルの先頭に追加できます。

コード形式を見てください。

 ## EXPIRES 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 text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </IfModule> ## EXPIRES CACHING ##

これらのヘッダーは、サーバーに設定すると、Chrome の DevTools から簡単に確認できます。

ネットワーク タブに移動し、アセットを選択して、追加したヘッダー フォーム (Cache-Control、Expires、またはその両方など) を探すだけです。

  • エンティティ タグを無効にします。

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

FileETag なし

ETag を無効にすると、ブラウザーは、ページが読み込まれるたびにファイルを再検証する代わりに、キャッシュ ポリシーを使用できます。

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

  1. WordPress は (Nginx) を使用してブラウザのキャッシュを活用します

Nginx は、5 億を超える Web サイトで使用されている無料のオープンソース Web サーバーです。

Apache と同様に、Web サイトの静的および動的コンポーネントでキャッシュの有効期限を設定するためのオプションがいくつかあります。

  • 「キャッシュ制御」ヘッダー (Nginx)

通常は次の場所にあるサーバーブロック内

/etc/nginx/site-enabled/default,

この次のフラグメントを追加します。

 location ~* \.(png|jpg|jpeg|gif)$ { expires 365d; add_header Cache-Control "public, no-transform"; } location ~* \.(js|css|pdf|html|swf)$ { expires 30d; add_header Cache-Control "public, no-transform"; }
  • 「Expires」ヘッダー (Nginx)

次のコードを、次の場所にあるサーバー ブロックに挿入します。

/etc/nginx/site-enabled/default/

 location ~* \.(jpg|jpeg|gif|png)$ { expires 365d; } location ~* \.(pdf|css|html|js|swf)$ { expires 30d; }

プラグインを使用して WordPress でレバレッジ ブラウザ キャッシングを修正する方法

より複雑なコーディング手順を省略したい場合は、いくつかの優れた WordPress プラグインを使用して、ブラウザーのキャッシュを利用できます。

  1. WP最速キャッシュ:

WP Fastest Cache は、簡単なカスタマイズ オプションを備えたもう 1 つの WordPress キャッシュ プラグインです。

無料版ではブラウザのキャッシュを許可できます。 上記のように、設定ページに移動し、ブラウザのキャッシュ チェックボックスをオンにします。

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

LiteSpeed Cache は、ブラウザのキャッシュを有効にするだけで利用できるようにするキャッシュ プラグインです。

プラグインをインストールして有効にしたら、キャッシュ設定に移動します。 [ブラウザ] タブに移動し、ブラウザ キャッシュ機能をオンにします。

有効期限を指定することもできます。

ただし、この設定は、サイト上のすべてのキャッシュ ファイルに適用されます。