記事の内容やaishipシリーズに関するお問い合わせはこちらから

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

TOP

CATEGORY

SERVICE

Expiresヘッダーを活用してサイトの読込速度を上げてみる

Expiresヘッダーを活用してサイトの読込速度を上げてみる

ブラウザキャッシュとは、

ブラウザーなどが、表示したウェブページのデータを一時的にコンピューターに保存しておく機能です。次に同じページにアクセスしたときに、インターネット上のデータではなく、保存されたデータを参照するため、すばやく表示できます。
Yahoo! JAPANヘルプセンター

このブラウザキャッシュ、実はコンピュータ内に保存しているとはいうものの、キャッシュファイルが新しいかどうかをWebサーバへ問合せを行っています。そしてWEBサーバーのデータがキャッシュファイルよりも新しければ、WEBサーバーからデータを取得し、そうじゃなければキャッシュファイルを読み込むようになっています。

保存はしていても、データが最新のものなのか、都度サーバーに問い合わせるためサーバー性能や通信している環境によっては読込に時間が掛かる場合もあります。

Expiresヘッダーを使おう

Expiresヘッダーとは、Webサーバーに新しいファイルが存在しているかどうかを確認せず、ブラウザでキャッシュ済みのファイルを強制的に適用する「強いキャッシュ」のことです。

キャッシュ済みのファイルを強制的に読み込む期間を指定することで、この期間は強制的にコンピュータ内に保存されたキャッシュファイルを読み込むことになります。

.htaccessを編集出来るサーバをお使いの場合は、下記を参考に記述します。

# BEGIN Browser Cache
<ifModule mod_expires.c>
 ExpiresActive On
 ExpiresByType image/png "access plus 1 months"
 ExpiresByType image/jpeg "access plus 1 months"
 ExpiresByType image/gif "access plus 1 months"
 ExpiresByType text/css "access plus 1 months"
</ifModule>
# END Browser Cache

「access plus 1 months」で1ヶ月キャッシュを保持する指定。また画像やCSSファイルだけでなく、HTMLやJS、MP4やMOVなどの動画ファイルにもキャッシュを設定することが可能です。

今回は例として画像とCSSに1ヶ月のキャッシュを保持するよう設定してみます。

実際にサイトへ設置してみた

実際に.htaccessを編集して、計測してみました。

Expiresキャッシュを使った読込速度比較

上記は一例ですが、読込速度は向上しています。
※あくまで一例ですのでサイトによって読込速度に違いは出ると思います。また.htaccessの編集・設置は自己責任でお願いします。

実際にキャッシュがどのように設定をされているか確認してみましょう。Chromeであれば、ブラウザ内で右クリック「要素を表示」>「Network」タブを選択し、ページを再読み込み>画像ファイルを選択>「Headers」タブを選択し、「cache-control」の欄を確認してみてください。

キャッシュの確認

2,592,000秒=1ヶ月のキャッシュが保持される設定になっていることが分かります。

使用する際の注意点

最後に、Expiresヘッダーを使用する際に注意したい点についてまとめておきます。

  • Expiresを1週間以上、できれば最大で1年間先に設定
  • より広くサポートされているExpiresを推奨
  • RFCのガイドラインに違反するので、1年以上先には設定しない。
  • 強制的なキャッシュなので更新の多いページにはなるべく使わない。

参照:ブラウザのキャッシュを活用する

特に最後の「更新が多いページ」、例えばTOPページや特集ページなどについては過去のデータを読み込むためユーザーに取っては古い情報を与えてしまう可能性もあります。特定商取引法のページや会社概要、送料に関するページなどあまり更新頻度の高くないページに設定するのがいいかもしれません。

上林

                   
クラウドECのサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
         

スマートフォンカテゴリの最新記事