WordPressで有効期限ヘッダーを追加する方法（2つの方法）

WordPressサイトの所有者がよく犯す間違いの1つは、ブラウザキャッシュを見落としていることです。ページの読み込み時間が遅いために、ウェブサイトは訪問者を失っている可能性があります。画像を最適化し、ホスティングをアップグレードした後でも、Expiresヘッダーを追加するまでサイトは遅く感じられることがあります。

有効期限ヘッダーは、訪問者のブラウザに画像、CSS、JavaScriptなどのサイトファイルを特定の期間保存するように指示します。これにより、誰かがサイトの複数のページにアクセスした場合、ブラウザはすべてを再度ダウンロードする必要がなくなります。

その結果、再訪問者の読み込み時間が大幅に短縮され、ユーザーエクスペリエンスが向上し、検索ランキングを向上させることができます。

私たちは多くのWordPressサイトでexpiresヘッダーを実装し、どのホスティング設定でも機能する2つの信頼性の高い方法にプロセスを絞り込みました。コードの編集に慣れている場合でも、プラグインソリューションを好む場合でも、WordPressサイトにexpiresヘッダーを追加する方法を説明します。

WordPressでExpiresヘッダーはどのように使用されますか？

誰かがあなたのWordPress ウェブサイトのウェブページに初めてアクセスすると、すべてのファイルが一つずつ読み込まれます。ブラウザと WordPress ホスティングサーバー間のこれらのすべての HTTP リクエストは、ウェブページの読み込み時間を増加させます。

ブラウザキャッシュは、それらのファイルの一部またはすべてを訪問者のコンピューターに保存します。これは、次回ページを訪問したときに、ファイルを自分のコンピューターから読み込むことができることを意味し、WordPress ウェブサイトのパフォーマンスを向上させ、ユーザーエクスペリエンスを改善します。

ブラウザはどのファイルを保存し、どれくらいの期間保持するかをどのように知るのか、疑問に思っているかもしれません。そこで登場するのが「Expiresヘッダー」です。

どのファイルを保存するか、またどのくらいの期間保存するかに関するルールは、expiresヘッダーまたはcache-controlヘッダーを使用して設定されます。この記事では、ほとんどのユーザーにとって設定が簡単なため、expiresヘッダーに焦点を当てます。

Expiresヘッダーは、ブラウザキャッシュに保存されている各ファイルタイプに有効期限を設定します。その日付以降、ファイルはサーバーから再読み込みされ、訪問者にページの最新バージョンを提供します。

2つの異なる方法でexpiresヘッダーを追加する方法を説明します。最初の方法はより簡単で、ほとんどのユーザーにおすすめです。以下のリンクをクリックすると、希望するセクションにジャンプできます。

1. WP Rocket WordPressプラグインでExpiresヘッダーを追加する
2. コードを使用してWordPressにExpiresヘッダーを追加する
3. WordPressにおけるExpiresヘッダーに関するよくある質問
4. 動画チュートリアル

方法1：WP Rocket WordPressプラグインでExpiresヘッダーを追加する

WP Rocketは、市場で最も初心者向けのWordPressパフォーマンスプラグインです。有効にすると、他の多くのキャッシュプラグインのように複雑な設定をいじる必要がなく、すぐにウェブサイトの速度が向上します。

WP Rocket はプレミアムプラグインですが、最も良い点は、すべての機能が最も低価格のプランに含まれていることです。

まず、WP Rocket プラグインをインストールして有効化します。詳細は、WordPress プラグインのインストール方法のステップバイステップガイドをご覧ください。

WP Rocketをインストールして有効化すると、自動的にブラウザキャッシュがオンになります。デフォルトでは、WordPressサイトを高速化するために最適な設定でexpiresヘッダーとcache-controlヘッダーが追加されます。

これで完了です。プラグインについてさらに詳しく知りたい場合は、WordPress で WP Rocket を適切にインストールおよび設定する方法に関するガイドをご覧ください。

ウェブサイトにexpiresヘッダーを追加するために無料のキャッシュプラグインを使用したい場合は、W3 Total Cacheを確認することをお勧めします。

W3 Total Cache は WP Rocket と同様の機能を提供しますが、初心者にはそれほど使いやすくありません。また、WP Rocket のようなオールインワン パフォーマンス プラグインに含まれるすべての機能を提供しているわけではありません。Expires ヘッダーは自動的に有効にならないため、手動で有効にする必要があります。

方法2：コードを使用してWordPressでExpiresヘッダーを追加する

WordPress で expires ヘッダーを追加する 2 番目の方法は、WordPress ファイルにコードスニペットを追加することです。コードの間違いは深刻なエラーを引き起こし、サイトを破損させる可能性があるため、初心者にはお勧めしません。

これらの変更を加える前に、まずWordPressサイトのバックアップを取ることをお勧めします。詳細については、WordPressサイトのバックアップと復元方法に関するガイドを参照してください。

それでは、WordPressにコードを追加してexpiresヘッダーを追加する方法を見てみましょう。

ウェブサイトがApacheまたはNginxのどちらで実行されているかを確認する

まず、ウェブサイトがApacheサーバーを使用しているかNginxサーバーを使用しているかを特定する必要があります。ウェブサイトを参照し、ページを右クリックして「検証」オプションを選択します。

次に、ページの上部にある「ネットワーク」タブをクリックする必要があります。

結果を読み込むには、ページを更新する必要がある場合があります。

その後、「Name」列の上部にあるドメイン名をクリックできます。

次に、「レスポンスヘッダー」セクションまでスクロールし、「server」という項目を探します。

これにより、どのウェブサーバーが使用されているかがわかります。この場合、サイトはNginxサーバーで実行されています。

サイトが使用しているWebサーバーがわかったら、以下のリンクを使用して先に進んでください。

• ApacheでExpiresヘッダーを追加する方法
• NginxでExpiresヘッダーを追加する方法

ApacheでExpiresヘッダーを追加する方法

ApacheサーバーにExpiresヘッダーを追加するには、.htaccessファイルにコードを追加する必要があります。

このファイルを編集するには、FTP クライアントまたはホストのファイルマネージャーツールを使用して WordPress ホスティングアカウントに接続する必要があります。.htaccess ファイルは、ウェブサイトのルートフォルダーにあります。

次に、ブラウザキャッシュをオンにするためにExpiresヘッダーを追加する必要があります。これにより、ウェブブラウザはウェブサイトのリソースを削除する前にどれくらいの期間保存するかを知ることができます。

.htaccessファイルの先頭近くに次のコードを追加できます。

## 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 ##

これらの値はほとんどのサイトで問題なく機能するはずですが、必要に応じて期間を調整できます。

コードはファイルの種類に基づいて異なるキャッシュ有効期限を設定していることに注意してください。画像は、通常変わらないため、HTML、CSS、JavaScript、その他のファイルタイプよりも長くキャッシュされます。

NginxでExpiresヘッダーを追加する方法

WordPressブログのホスティングにNginxサーバーを使用している場合は、サーバー設定ファイルを編集してExpiresヘッダーを追加する必要があります。

このファイルを編集およびアクセスする方法はホストによって異なるため、ファイルへのアクセスにヘルプが必要な場合は、ホスティングプロバイダーに問い合わせることができます。

次に、次のコードを追加する必要があります。

location ~* \.(jpg|jpeg|gif|png|svg)$ {
  expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
  expires 3d;
}

このコードは、さまざまなファイルタイプの有効期限を設定します。画像は通常変わらないため、HTML、CSS、JS、その他のファイルタイプよりも長くキャッシュされることに再び注意してください。

WordPressにおけるExpiresヘッダーに関するよくある質問

以下は、WordPressサイトにexpiresヘッダーを実装することについて、よく受ける質問の一部です。これらは、プロセスに関する懸念を明確にするのに役立つはずです。

1. Expiresヘッダーとは何ですか？なぜ必要なのでしょうか？

Expiresヘッダーは、ウェブサイトのファイルを訪問者のコンピューターにローカルに保存（キャッシュ）する期間をウェブブラウザに指示するものです。誰かがあなたのサイトにアクセスすると、画像、CSS、JavaScriptなどのファイルがダウンロードされ、一時的に保存されます。Expiresヘッダーを使用すると、再訪問者は有効期限が切れるまでこれらのファイルを再度ダウンロードする必要がなくなり、サイトの読み込み時間が短縮されます。

2. expiresヘッダーを追加するとWordPressサイトが壊れますか？

正しく実装されていれば、有効期限ヘッダーはサイトを壊しません。ただし、手動コードメソッドを使用しており、.htaccessファイルに間違いがあった場合、問題が発生する可能性があります。そのため、変更を加える前に必ずサイトのバックアップを取り、初心者の方はWP Rocketのようなプラグインを使用することを常にお勧めします。これはリスクなしで自動的にすべてを処理します。

3. ファイルの種類ごとに expires headers をどのくらいの期間設定すればよいですか？

あまり変更されない画像などのファイルには長い有効期限（1年）、CSSやJavaScriptなど頻繁に更新されるファイルには短い有効期限（1ヶ月）を設定することをお勧めします。HTMLファイルはコンテンツが定期的に変更されるため、最も短いキャッシュ時間（数日）を設定してください。この記事のコード例では、ほとんどのWordPressサイトでうまく機能するこれらの実績のある期間を使用しています。

4. 有効期限ヘッダーは、どのWordPressホスティングプロバイダーでも使用できますか？

はい、有効期限ヘッダーはほとんどのホスティングプロバイダーで機能しますが、実装方法はサーバーの種類によって異なります。ほとんどの共有ホスティングはApacheサーバーを使用しているため、.htaccessファイルにコードを追加することになります。一部のホストはNginxサーバーを使用しており、サーバー設定ファイルを編集する必要があります。サーバーの種類が不明な場合は、この記事で確認方法を示しています。または、ホスティングプロバイダーに問い合わせて支援を受けることができます。

5. CDNをすでに使用している場合、Expiresヘッダーは必要ですか？

CDN (Content Delivery Network) は、訪問者の近くの場所からファイルを配信することでサイトの速度を向上させますが、Expires ヘッダーは依然として追加のメリットを提供します。これらは CDN と連携してサーバーリクエストをさらに削減し、読み込み時間を改善します。

多くの CDN サービスには独自のキャッシュルールがありますが、オリジンサーバーで expires ヘッダーを設定することで、すべてのシナリオで一貫したキャッシュ動作を保証できます。

6. expires ヘッダーが正しく機能しているかどうかのテスト方法は？

expires ヘッダーは、GTmetrix、Google PageSpeed Insights、Pingdom などのオンラインツールを使用してテストできます。これらのツールはサイトを分析し、ブラウザキャッシュが正しく設定されているかどうかを示します。ブラウザの開発者ツールを使用してレスポンスヘッダーを確認し、expires または cache-control ヘッダーがファイルと共に送信されているかどうかを確認することもできます。

動画チュートリアル

このチュートリアルでWordPressにExpiresヘッダーを追加する方法を学べたことを願っています。また、WordPressで「ブラウザキャッシュの活用」警告を簡単に修正する方法に関するガイドや、おすすめのWordPress CDNサービスもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。