【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

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サイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+