Googleから検索する数においてモバイルがPCを上回る時代になっている昨今、よりスマートフォンを意識したWebサイト制作が重要になってきています。実際、モバイルファーストインデックスの導入も発表されています。(参考:モバイル ファースト インデックスに向けて

まずは最低限、モバイルフレンドリーと言われるモバイル端末に適したWebサイトを構築する必要があります。また、モバイル環境ではPC環境に比べて高速で表示させることが難しいこともあり、より表示速度も意識して制作することも重要になってきます。この表示速度の改善としてキャッシュを制御するという方法があります。

キャッシュ制御の方法

まずは、PageSpeed Insightsというテストツールを使って表示速度を確認してみましょう。

PageSpeed Insightsによる表示速度計測

このように、100点満点で点数が判定され、問題点なども指摘されて改善方法を示してくれます。その中で「ブラウザのキャッシュを活用する」という修正項目があった場合には、キャッシュを制御することで改善することができたりします。

.htaccessに記述する

実際にキャッシュを制御するためには、「.htaccess」内にキャッシュさせたいファイルを指定します。

<Files ~ "¥.(gif|jpe?g|png|css|js)$">
  Header set Cache-Control "max-age=2592000,public"
</Files>

キャッシュの有効期限は場合によりますが、とりあえず30日間の設定をしておけばよいかと思います。上記の場合だとgifなどの画像ファイルとcssファイル、jsファイルを30日間キャッシュさせるという設定になります。

このように、キャッシュを利用して速度改善を行うことでモバイル環境でのユーザビリティなどの向上にも繋がってくるのではないでしょうか。

おすすめの記事