【必須!】エックスサーバー新機能「Expiresヘッダ」でサイト速度UP！

2018

09/07

Published

2018.09.07

/ 松原 潤一

　　

\ この記事を共有 /

B!

リンクをコピーする

【必須!】エックスサーバー新機能「Expiresヘッダ」でサイト速度UP...

松原 潤一

B!

リンクをコピーする

ども！ ブログマーケッターのジュンイチです。（Junichi_Santa）

もうほんまXserver（エックスサーバー）さんって最高です。
何が最高かって言うと、サイト所有者のためにどんどん便利な新機能を、簡単に実装できるようにしてくれるんですよね。

今回実装された新機能はこれ！

「Expiresヘッダ」という設定でブラウザのキャッシュ利用を指示することができるようになります。

…。

ははぁぁぁ～～～ん…。

エクス…ブラウ…キャッシュ…なんかスゴそうだな！！！！

くらいの認識で全然OKです！

今回は、エックスサーバーの新機能「Expiresヘッダ」を設定してサイトの読み込み速度を高速化する設定方法をお伝えします。

Googleも推奨するページスピード改善対策の1つなのでぜひやっておきましょう！

設定はめっちゃ簡単！ 早速エックスサーバーで設定しよう！

まずは、エックスサーバーのインフォパネルへ行きましょう。

↓インフォパネルにきたら、ログインしましょう。

↓　次にサーバーパネルにログインします。

↓続いて、右の方にある「高速化」のメニューの中の「ブラウザキャッシュ設定」をクリック

↓　設定したいドメインをクリックします。

↓　次の画面で、現在の設定がOFFになっていると思うので、変更後の設定を「ON(全ての静的ファイル）※推奨設定」にして、変更欄の「設定変更」ボタンをクリック

↓　作業としてはこれで終わりです。

↓　ただし、先程の1つ前のページに戻ると「反映待ち」というマークが出ています。エックスサーバー側で処理をしてくれるんですが、これが15分ほどかかるみたいです。

↓　15分くらいしたら無事「反映待ち」が消えます。　これで完璧に設定が完了です！！ お疲れ様でした！

設定自体は、めちゃくちゃ簡単でしたね！

※この機能を使う際の注意点

エックスサーバーさんの公式サイトにも書いてありますが、以下の点は注意です。

• キャッシュしたデータを読み込むため、CSSファイル、JavaScriptファイル、画像ファイルなど対象データの更新がすぐに反映されない可能性があります。
  その場合は、ブラウザ上のキャッシュデータを削除してご確認ください。
• ブラウザ上のキャッシュデータを利用する性質上、サーバーへのアクセス回数が減るため、アクセス解析などにおいてヒット数が減少する可能性があります。
• ブラウザやサーバーコンテンツの内容によっては、Webサイトの表示が崩れるなど、 異なる動作となる場合が稀にあります。
• 設定の変更からサーバーに設定が反映されるまで最大15分程度かかります。

Xserver「ブラウザキャッシュ設定」より引用　2018.9.7アクセス

平たく言うと、

1. サイトの変更点・更新点がすぐに反映されない可能性がある
2. アクセス解析のヒット数が減る可能性がある
3. サイトによっては表示が崩れる可能性がある
4. 設定完了まで最大15分ほどかかる

この4点です。

だから、ジュンイチが言ったとおりやってみたら、サイトが崩れたぞ！！！　ってなったらこの設定をOFFに戻してください。

何をしたのか興味があれば…！今回の設定「Expiresヘッダの設定をして、ブラウザのキャッシュを利用する」ってどういうこと？

ブラウザのキャッシュを利用する、という事を簡単にイメージしやすいように、画像を使って簡単にお話します。

1.初めてウェブサイトを訪問するときに、キャッシュデータがPCに記憶される

一度あなたが、あるWEBサイトを訪問してAというWEBページ（記事など）を見たとしますね。
この際、通常はWEBサイトっていうのは、WEBサイトのデータが保存されているサーバーからダウンロードしてきて表示させます。

そんでもって、一旦表示されたWEBページのデータ（画像など）は、あなたのパソコンに記憶されます。

このようにあなたのパソコンに記憶されたウェブサイトのデータをキャッシュといいます。

2.再訪問したときに、パソコンに記憶されたデータを使って、素早くWEBページを開いてくれる

そして、再訪問したときに、記憶させたデータ（キャッシュ）がパソコンに残っていると、それを使ってパパパッと素早くWEBページを表示させます。

PC：『あっ、このページのデータは覚えていマス。ワタシがご用意しますね。』

といった感じです。パソコンに記憶されているデータを表示させるので、通常サーバーからダウンロードしてきて表示させるより、ちょっと速くサイトが表示されます。

ブラウザのキャッシュを利用するっていう意味が伝わりましたでしょうか・・・！

「Expiresヘッダを設定」というのは、このブラウザのキャッシュを利用させるための設定

Expiresヘッダを追加してブラウザのキャッシュを利用する、という点まで興味があれば見ていって下さい。

難しい話なので、読み飛ばしてもらっても大丈夫です。興味がある方だけで！

という意味です。

Expiresヘッダというのは、画像、テキスト、CSS、javascriptなどWEBページを作るファイルごとにキャッシュの有効期限を指定する命令みたいな感じです。

その期間中は、訪問してくるユーザーのパソコンの中に保存されたキャッシュデータを利用してWEBページを表示させます。

本当なら、以下のように.htaccessというめちゃくちゃ繊細なファイルに、以下のような記述をしないといけません↓↓↓

# BEGIN Browser Cache
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/x-icon "access plus 1 weeks"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
</ifModule>
# END Browser Cache

.htaccessファイルは記述を間違えたりすると、すぐにサイトが動かなくなったり真っ白になったりするんですよ…。
だからほんまはこのファイルに何かを書き込むっていうのはやりたくない…。

でも、今回の記事で紹介した方法は、エックスサーバーさんに丸投げで、ワンボタンでポチッと設定をしてもらえるんです！！ この素晴らしさが伝わりましたか！
分かりませんか！！ ではまた来週！！！

ということで豆知識でした。

まとめ

エックスサーバーさんが素晴らしい機能を出しました。

Expiresヘッダの設定をワンボタンでポチッとするだけで、サイトの高速化に繋つながるブラウザのキャッシュを利用できるようにする機能です。

めちゃくちゃ簡単な設定なので、ぜひこの記事を見たらすぐにやってみてください！

ただし、注意書きにも書いたとおり、サイトに寄っては表示が崩れたりする可能性もあるので、その時はこの機能を諦めてOFFに戻しましょう。

以上、おしまい！