インスタント修正WordPressはブラウザのキャッシュを活用します（段階的）
公開: 2021-07-08WordPress でブラウザのキャッシュを活用する (簡単でインスタントな修正)
目次
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 のレバレッジ ブラウザ キャッシングを修正する方法
多くの人は、この問題を解決するために WordPress プラグインを好まない.
Web サーバーの設定を変更することで、ブラウザーのキャッシュを使用できます。
次に、Web サーバーは、訪問者のブラウザーに、これらのリソースをブラウザーのキャッシュに保存するように指示します。
これらのファイルは、ブラウザによって一定期間ローカルに保存され、その後のページ訪問に使用されます。
訪問者のブラウザーのキャッシュを開始するよう Web サーバーに指示する手順は、サーバーによって異なります。
Apache と Nginx はどちらも最も人気のある Web サーバーです。
両方のサーバーで、WordPress のブラウザ キャッシュを活用して修正を開始しましょう。
1. WordPress は (Apache) を使用してブラウザのキャッシュを活用します
多くの共有ホスティング サービスは Apache を使用しているため、サイトに .htaccess ファイルがある場合は、Apache コードの指示に従う必要があります。
カスタム コードを使用して、Apache サーバーのブラウザー キャッシュを利用する方法を次に示します。
サーバーが Apache で実行されていることを確認したら、次のステップに進むことができます。
1. サーバーにアクセスするには、CPanel にログインするか、FTP クライアントを使用します。
2. .htaccessファイルを見つけます。
.htaccess ファイルはデフォルトで非表示になっている可能性があるため、隠しファイル (ドットファイル) を表示する必要がある場合があります。
.htaccess ファイルは次の画像のようになります。
サーバー上で直接編集するか、インポートしてテキストエディターで開くことができることを理解する必要があります。
さらに、次のようなブラウザーのキャッシュ ルールを決定するための多くの選択肢があります。
Expire ヘッダーまたはCache-Control ヘッダー。
両方を見てみましょう。
1. キャッシュ制御ヘッダー:
.htaccess ファイルを開いた後、その先頭に次のコード スニペットを追加する必要があります。
このコードをコピーしてください：
# BEGIN キャッシュ制御ヘッダー
<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)$”>
ヘッダー追加 Cache-Control 「プライベート」
</filesMatch>
<filesMatch “\.(x?html?|php)$”>
Header append Cache-Control "private, must-revalidate"
</filesMatch>
</IfModule>
</IfModule>
2. Expires ヘッダー:
これらの Expire ヘッダーは、Cache-Control ヘッダーと同様に、.htaccess ファイルの先頭に追加できます。
コード形式を見てください。
## キャッシュ期限切れ ##
<IfModule mod_expires.c>
有効期限有効
ExpiresByType image/jpg 「アクセス1年」
ExpiresByType image/jpeg「アクセス1年」
ExpiresByType image/gif 「アクセス 1 年」
ExpiresByType image/png 「アクセス 1 年」
ExpiresByType text/css 「アクセス 1 か月」
ExpiresByType text/html「アクセス1ヶ月」
ExpiresByType 申込書/pdf「アクセス1ヶ月」
ExpiresByType text/x-javascript「アクセス1ヶ月」
ExpiresByType アプリケーション/x-shockwave-flash「アクセス 1 か月」
ExpiresByType 画像/x アイコン「アクセス 1 年」
Expiresデフォルト「アクセス1ヶ月」
</IfModule>
## キャッシュ期限切れ ##
これらのヘッダーは、サーバーに設定すると、Chrome の DevTools から簡単に確認できます。
[ネットワーク] タブに移動し、アセットを選択して、追加したヘッダー フォーム (Cache-Control、Expires、またはその両方など) を探すだけです。
2. エンティティ タグを無効にします。
最後になりましたが、次のコードを使用してエンティティ タグを無効にする必要があります。
FileETag なし
ETag を無効にすると、ブラウザーは、ページが読み込まれるたびにファイルを再検証する代わりに、キャッシュ ポリシーを使用できます。
変更を有効にするには、.htaccess ファイルを保存して Apache を再起動します。
WordPress は (Nginx) を使用してブラウザのキャッシュを活用します
Nginx は、5 億を超える Web サイトで使用されている無料のオープンソース Web サーバーです。
Apache と同様に、Web サイトの静的および動的コンポーネントでキャッシュの有効期限を設定するためのオプションがいくつかあります。
1. 「Cache-Control」ヘッダー (Nginx)
通常は次の場所にあるサーバーブロック内
/etc/nginx/site-enabled/default,
この次のフラグメントを追加します。
場所 ~* \.(png|jpg|jpeg|gif)$ {
365 日で有効期限が切れます。
add_header Cache-Control "public, no-transform";
}
場所 ~* \.(js|css|pdf|html|swf)$ {
有効期限は 30 日です。
add_header Cache-Control "public, no-transform";
}
2.「Expires」ヘッダー (Nginx)
次のコードを、次の場所にあるサーバー ブロックに挿入します。
/etc/nginx/site-enabled/default/
場所 ~* \.(jpg|jpeg|gif|png)$ {
365 日で有効期限が切れます。
}
場所 ~* \.(pdf|css|html|js|swf)$ {
有効期限は 30 日です。
}
プラグインを使用して WordPress でレバレッジ ブラウザ キャッシングを修正する方法
より複雑なコーディング手順を省略したい場合は、いくつかの優れた WordPress プラグインを使用して、ブラウザーのキャッシュを利用できます。
1. WP最速キャッシュ:
WP最速キャッシュ
WP Fastest Cache は、簡単なカスタマイズ オプションを備えたもう 1 つの WordPress キャッシュ プラグインです。
無料版ではブラウザのキャッシュを許可できます。 上記のように、設定ページに移動し、ブラウザのキャッシュ チェックボックスをオンにします。
2. ライトスピード キャッシュ:
ライトスピードキャッシュ
LiteSpeed Cache は、ブラウザのキャッシュを有効にするだけで利用できるようにするキャッシュ プラグインです。
プラグインをインストールして有効にしたら、キャッシュ設定に移動します。 [ブラウザ] タブに移動し、ブラウザ キャッシュ機能をオンにします。
有効期限を指定することもできます。
ただし、この設定は、サイト上のすべてのキャッシュ ファイルに適用されます。
結論：
ブラウザー キャッシュを使用すると、Web パフォーマンス テストのスコアを向上させることができます。
Google PageSpeed Insights でこの警告が表示される場合は、次の方法で解決できます。
- Cache-Control または Expires ヘッダーの追加。
- Google アナリティクスのブラウザ キャッシュを活用します。
- サードパーティのスクリプトの使用を最小限に抑えます。
ブラウザのキャッシングの問題を解決するための他の提案はありますか? 以下のコメントセクションであなたの考えを共有してください！