サービスの使い方

エックスサーバーの「ブラウザキャッシュ設定」機能を使ってレスポンスヘッダにExpiresヘッダとCache-Controlヘッダを設定する

エックスサーバ―では2018年9月6日から「ブラウザキャッシュ設定」機能が新しく利用できるようになりました。この機能を有効にするとWebサーバにある画像ファイルやCSSファイルなどに対してブラウザのキャッシュを利用するようになり表示速度の向上が期待できます。今回は「ブラウザキャッシュ設定」の使い方と、実際にどのような効果があったのかを確認する方法について解説します。

ブラウザキャッシュとは

最初にブラウザキャッシュについて簡単にご説明します。キャッシュにはサーバ側でキャッシュを行うものとブラウザ側でキャッシュを行うものなどがありますが、今回はブラウザ側で行うキャッシュについてです。

ブラウザからWebサーバへアクセスするとhtmlファイルや画像ファイル、CSSファイル、JavaScriptのファイルなどがダウンロードされます。この中でも画像ファイルやCSSファイルなどはそれほど更新頻度が高くありませんのでアクセスするたびに毎回ダウンロードするのは効率がよくありません。

そこで画像ファイルやCSSファイルなどに関しては、指定した有効期限内であればブラウザ側に保存されているキャッシュを利用するように設定することができます。毎回ダウンロードを行わなくなりますのでWebサーバにアクセスした時により早くブラウザでページを表示できることが期待できます。

有効期限は1週間から長くても1年が推奨されているようで、設定はWebサーバ側で行い、ExpiresヘッダまたはCache-Controlヘッダを使って設定を行います。今回エックスサーバーで提供された「ブラウザキャッシュ設定」機能は、Expiresヘッダ及びCache-Controlヘッダを簡単に設定できる機能です。

ページ読み込みを早くするためのブラウザキャッシュを利用する

ページの読み込み速度のレポートや改善点を提供するGoogle社のPageSpeed Insightsでも、ブラウザキャッシュの利用は推奨されています。

https://developers.google.com/speed/pagespeed/insights/

実際にブラウザキャッシュの設定を行う前にブログを調べてみます。ブログのURLを入力し「分析」をクリックして下さい。

レポートが表示されます。

現在の最適化状況は87点/100点と表示されました。

少し下へスクロールすると「最適化についての提案」と「適用済みの最適化」が表示されます。「最適化についての提案」の中に「ブラウザのキャッシュを活用する」という項目があります。

「修正方法を表示」をクリックしてみると、より詳細な方法が表示されます。今回調べたページの中ではヘッダーに表示されている画像ファイルについてブラウザキャッシュを有効にすることを推奨しています。

このようにブラウザキャッシュの利用はページ読み込み速度の改善方法としてPageSpeed Insightsでも推奨されています。

エックスサーバーの「ブラウザキャッシュ設定」機能の設定方法

それではブラウザキャッシュ設定を行ってみます。エックスサーバーのサーバーパネルにログインして下さい。

「高速化」の中の「ブラウザキャッシュ設定」をクリックして下さい。

ドメイン選択画面が表示されます。利用しているドメインの中で設定を行いたいドメインの右側に表示されている「選択する」をクリックする。

「ブラウザキャッシュ設定」画面が表示されます。

デフォルトの設定ではブラウザキャッシュ設定は「OFF」となっています。「ON」にする場合は2つの選択肢があり、CSSファイルとJavaScriptファイルを含むかどうかです。

1. ON[全ての静的ファイル] ※推奨設定

CSS/JavaScriptを含む全ての静的ファイルに対してブラウザキャッシュ設定が有効になります。

対象ファイル(拡張子)
.css .js .jpeg .jpg .gif .png .svg .svgz .wbmp .webp .ico .jng .bmp .3gpp .3gp
.ts .mp4 .mpeg .mpg .mov .webm .flv .m4v .mng .asx .asf .wmv .avi .mid .midi
.kar .mp3 .ogg .m4a .ra .woff .woff2 .ttf .otf .eot

2. ON[CSS/JavaScript以外]

CSS(.css)、JavaScript(.js)を除く静的ファイルに対してブラウザキャッシュ設定が有効になります。

設定はドメイン単位で特定のページや特定の拡張子だけという選択肢はありません。今回は「1. ON[全ての静的ファイル]」を設定してみます。「変更後の設定」の下のドロップダウンメニューで「ON[全ての静的ファイル] ※推奨設定」を選択し、その後で「設定変更」をクリックして下さい。

ブラウザキャッシュがONに設定されました。

画面に表示されている「戻る」をクリックするとブラウザキャッシュ設定画面に戻ります。「現在の設定」のところに「反映待ち」と表示されている間はまだ変更されていません。長くても15分程度で反映されるようです。

今回は1分程度で「反映待ち」が表示されなくなりました。

これで設定は完了です。なおあとで確認しますが、エックスサーバーの設定を利用した場合、次の設定がレスポンスヘッダーに設定されます。有効期限についても個別に変更することはできません。

・Expiresヘッダ
・Cache-Controlヘッダ(max-age)
各項目について最大7日間保持するように値が指定されます。

ブラウザキャッシュ設定後にPageSpeed Insightsで再度確認してみる

それではあらためてPageSpeed Insightsで先ほど同じページを確認してみます。

レポートが表示されました。最適化状況は87点/100点でここは変化がありませんでした。

下へスクロールすると「最適化についての提案」と「適用済みの最適化」が表示されます。前回は「最適化についての提案」のところに「ブラウザのキャッシュを活用する」が表示されていましたが、今回は表示されていません。

「適用済みの最適化」の「詳細を表示」をクリックしてみると「ブラウザのキャッシュを活用する」が表示され最適化済みなことが確認できます。

このようにエックスサーバーを利用されている場合には、ブラウザキャッシュ設定をONにすることでページの読み込みの速度改善が期待できます。

ブラウザキャッシュを使用する場合の注意点

ブラウザキャッシュを有効にした場合、対象となっている画像ファイルなどを更新しても有効期限が残っているユーザーの場合はキャッシュの方が使用されるため新しい内容が反映されません。キャッシュされたものではなく最新のファイルをあらたにダウンロードさせたい場合には、ファイル名そのものを変更するなどの処置(例えば header.jpg だったものを header01.jpg に変更するなど)を行う必要があります。

なおユーザーはいつでも自分のブラウザに保存されたキャッシュをクリアして最新の情報を新たに取得することができます。

curlおよびChromeデベロッパーツールを使用してレスポンスヘッダを確認する

先ほどエックスサーバでブラウザキャッシュ機能をONにするとExpiresヘッダ及びCache-Controlヘッダが設定されると記載しましたが、実際に設定されているかどうかをcurlおよびChromeデベロッパーツールを使ってレスポンスヘッダを取得し、それぞれ確認してみます。

最初にcurlを使った方法です。現在Windows10でもcurlを利用できるようになっています。コマンドプロンプトを起動し、次のように実行してみて下さい。

curl –head http://www.kuroobi.jp/travel/wp-content/themes/twentyseventeen/assets/images/header.jpg

curlを使いレスポンスヘッダを取得しています。ブラウザキャッシュ機能をOFFにしている場合は次のように帰ってきます。

ブラウザキャッシュ機能をONにしたあとであらためて実行してみると、今度はExpiresヘッダ及びCache-Controlヘッダが設定されていることが確認できます。

レスポンスヘッダはChromeのデベロッパーツールを使っても確認することができます。対象となるページをブラウザで開いたあと、右クリックをして表示されたメニューの中から「検証」をクリックして下さい。

デベロッパーツールが表示されましたら「Network」をクリックして下さい。

「F5」をクリックして再読み込みをして下さい。

「header.jpg」をクリックしてから「Headers」をクリックして下さい。

ブラウザキャッシュ機能をOFFにしている時のレスポンスヘッダが確認できます。

それではブラウザキャッシュ機能をONに変更してから同じ手順でレスポンスヘッダを確認して下さい。今度はExpiresヘッダ及びCache-Controlヘッダが設定されていることが確認できます。

このようにレスポンスヘッダにExpiresヘッダ及びCache-Controlヘッダが設定されていることが確認できました。

— —

エックスサーバーで新しく提供開始されたブラウザキャッシュ機能の使い方について簡単に解説しました。細かい設定は行えませんが、画像やCSSファイルなどでブラウザキャッシュを利用するように手軽に設定することができますので、ページ読み込み時間で対策を検討されている場合は一度試されてみてはいかがでしょうか。