初めてウェブサイトにアクセスすると、ブラウザはページを表示するために多くのファイルをダウンロードします。これには、HTMLコード、画像、スタイルシート、JavaScriptファイルなどが含まれます。これにより大量のデータが生成され、特にモバイルデバイスではブラウザのキャッシュ機能によって、表示が少し遅くなることがあります。
しかし、これらのファイルのほとんどはウェブサイト全体で使用されています。同じロゴ、同じスタイルシート、同じJavaScriptファイルがすべてのページで使用されています。これらのファイルをすべて一度だけダウンロードすれば済むとしたら、とても便利だと思いませんか？まさにそれが実現できるのです。 ブラウザのキャッシュ ブラウザはこれらのファイルのコピーを訪問者のブラウザに保存し、次回そのファイルが必要になったときに、サーバーではなくブラウザ自身のキャッシュから取得します。その結果、ユーザーエクスペリエンスははるかに高速で効率的になります。
ブラウザキャッシュの仕組み
ブラウザキャッシュはシンプルなアイデアです。 有効期限 ファイルの場合、ブラウザに新しいコピーをダウンロードするまでの保存期間を指定します。例えば、ブラウザにスタイルシートを30か月間キャッシュするように指示できます。最初のアクセス後、スタイルシートはローカルに保存され、ブラウザはXNUMX日間サーバーから新しいコピーをダウンロードしません。
これはページスピードを向上させる素晴らしい方法ですが、落とし穴があります。キャッシュファイルを変更すると、既にサイトを訪れた訪問者は有効期限が切れるまで古いバージョンが表示され続けます。この問題の修正方法については後ほど説明します。
サイトでブラウザキャッシュが有効になっているか確認してください
ここまで読んで、自分のウェブサイトでキャッシュが有効になっているかどうか気になっているかもしれません。 ClickRankサイト監査ツール ウェブサイト全体を一度にチェックできます。ウェブサイト上のすべてのファイルをスキャンし、それぞれの有効期限を表示します。これは、ウェブサイトのパフォーマンスとページ速度を理解する上で重要なステップです。
ブラウザキャッシュの設定方法
ブラウザキャッシュの設定はシンプルですが重要な作業です。有効期限を明示的に指定しないと、訪問者のブラウザは常にサーバーから最新のコピーを取得しようとするため、ユーザーエクスペリエンスが大幅に低下する可能性があります。
Apache: Expires ヘッダー
Apacheサーバーを使用している場合は、 .htaccess ファイルの種類ごとに有効期限を個別に設定できます。例えば、フォントの有効期限を1年、画像の有効期限を3か月、スタイルシートとJavaScriptの有効期限を1か月に設定できます。これは、ブラウザキャッシュを有効にするシンプルで効果的な方法です。
Apache キャッシュ制御
キャッシュ命令を設定する別の方法は、 キャッシュ制御 ヘッダーです。動作はほぼ同様ですが、いくつか追加オプションがあります。ほとんどのウェブサイトでは、Expiresヘッダーを使用すれば十分でしょう。
WordPressのブラウザキャッシュ
WordPressのようなCMSをご利用の場合は、プラグインを使ってブラウザキャッシュを有効にすることができます。数クリックでキャッシュを有効にできる優れたプラグインが数多くあります。サーバーのキャッシュにアクセスできない場合は、このプラグインが最適な選択肢です。 .htaccess ファイル自体を自分で管理したい場合や、プラグインを使って処理したい場合など、包括的なプラットフォームです。 クリックランク は、この問題を解決します。例えば、プラットフォームはウェブサイトをスキャンしてキャッシュの問題を検出し、それらを修正するためのタスクの優先順位リストを提供します。
キャッシュを無効化しています
キャッシュされたファイルを変更する必要がある場合はどうすればよいでしょうか？例えば、ロゴを変更したのに、最近サイトにアクセスしたユーザー全員がまだ古いロゴを表示している場合などです。全員にキャッシュをクリアするよう依頼するのは現実的ではありません。
これを修正する方法の一つは、ファイル名を変更することです。例えば、 style.cssの 〜へ スタイル-new.cssブラウザはこれを新しいファイルと認識し、サーバーから最新バージョンをダウンロードします。これは、有効期限がまだ切れていない場合でも、ブラウザに新しいファイルを強制的にダウンロードさせるシンプルで効果的な方法です。
