エックスサーバーのサイト表示速度を高速化するキャッシュ設定

エックスサーバーのサイト表示速度を高速化するキャッシュ設定

エックスサーバーのサーバーパネルに用があって行った時の事です。Xアクセラレータの他にも高速化設定ができるのを見つけました。

エックスサーバーのサーバーパネルから高速化の設定をして表示速度を改善できるのは「Xアクセラレータ」を含めて4つあります⇐(正しくは「ありました」後述)

 

 

  • Xアクセラレータ
  • mod_pagespeed設定(条件あり)
  • サーバーキャッシュ設定
  • ブラウザキャッシュ設定

 

設定は4つですがmod_pagespeed設定については2019年3月28日で機能が終了したようで、それ以前に設定している人は引き続き設定が有効のまま使用ができるというだけに変更になってます。

 

 

上記の画像はエックスサーバーの高速化の設定項目が変更された設定項目です。

エックスサーバーを使ってる人で、まだ高速化を知らなかったという人は「無料」で無期限の標準機能です。

エックスサーバーでの設定時間は5~10分くらいで完了するので高速化の設定をしてサイトの表示速度を改善してみてください。

エックスサーバーの高速化設定は「高速化」の項目にまとまっているのでエックスサーバーにログイン⇒サーバーパネル高速化から設定ができる簡単な方法です。

 

 

mod_pagespeedとは?

 

エックスサーバーで設定を有効にしていた人は引き続きmod_pagespeedを利用できるので、mod_pagespeedとは何かを調べました。

Googleが開発した「mod_pagespeed」という名前の拡張モジュールで、Webサイトの表示速度を向上させる機能。

これを使うと同種のファイルを一まとめにして無駄な通信が減らせてページのロード時間を短縮できるので、サイトの表示速度を高速化することができるというものです。

 

 

 

上記の画像を簡単に言ってしまうと、ファイルを圧縮して分かりやすく整理整頓してから情報を転送してくれるので処理が高速化されるという感じです。

 

 

Advertisement

 

 

mod_pagespeedで実施される事

 

  • CSSファイル・JavaScriptファイルなどを圧縮
  • 最適な画像タイプへ変換・軽量化
  • 同種ファイル(画像、CSS、JavaScriptファイル)をひとまとめサーバーとクライアント間の無駄な通信(リクエストを減らす)
  • CSSファイル・JavaScriptファイル・画像ファイルのキャッシュ有効期限の延長
  • 小さなファイルサイズのCSSやJavaScriptをHTML内に埋め込む

 

実施されるのが上記です。

設定も時間がかからないで出来るので、Xアクセラレータ設定と一緒に設定するのもいいかもしれません。

 

mod_pagespeedで高速化

 

 

 

こんな感じの簡単な設定だったんだなぁ..的な参考程度にして欲しいのですが、エックスサーバーで2019年3月28日で機能が終了する前の設定方法はサーバーパネル内のmod_pagespeedを選択してONにするだけで設定ができました

このようにエックスサーバーの高速化の他の設定も全体的に簡単な設定をするだけで高速化されるのがXサーバーの使いやすいことだと思います。

 



 

サーバーキャッシュ設定とキャッシュされるファイル

 

エックスサーバーの高速化設定でサーバーキャッシュは名前のとおりサーバー側でファイルのキャッシュが作成されます。

今回エックスサーバーの高速化設定で出てくるキャッシュ2種類のうちの1つ「サーバーキャッシュ」です。

キャッシュと聞くとブラウザキャッシュを聞く事や使う事が多いと思いますが、サーバーキャッシュはサーバー上でファイルのキャッシュが作成されます。

サーバー上でキャッシュしてるから同時アクセスの場合で考えると、レスポンスを返すときにキャッシュが効いて表示速度の高速化の向上になります。

 

サーバーキャッシュ設定方法

  1. Xサーバーの高速化からサーバーキャッシュ設定を選ぶ
  2. サーバーキャッシュするドメインを選択
  3. サーバーキャッシュ設定をONにして確認画面に進みます
  4. 変更するをクリックすると設定が反映します。

 

エックスサーバーのサーバーキャッシュ設定で下記のファイル拡張子が2分間キャッシュされます。

 

.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

 

上記ファイル以外はどうなるのか気になりましたが1分間のキャッシュがされるということでした。

そしてサーバーキャッシュ設定をしてもれレスポンスヘッダに含まれる以下の内容があればキャッシュはされない事に注意です。

 

Cache-Controlに「no-cache」「no-store」「private」「must-validate」がある場合

またはレスポンスコードが200、404以外はキャッシュしません。

 

 

 

それからサーバーキャッシュ設定をエックスサーバーで設定した場合は自動的にXアクセラレータがONになり有効になります。実際に設定してみたらXアクセラレータVer.1が設定されてます。

逆にXアクセラレータだけ設定してキャッシュサーバー設定はしないで確認したら、キャッシュサーバー設定はOFFのままです。

そのためサーバーキャッシュを先に設定するとXアクセラレータとセットで設定されます。

 

 

ブラウザキャッシュ設定

 

ブラウザキャッシュ設定はブラウザ側のキャッシュファイルが使用されるので表示速度や転送量で高速化ができます。

「ブラウザキャッシュとは何か?」をブラウザとキャッシュに分けて触れてみます。

キャッシュとはプログラムの処理結果をディスクやメモリ上に保存して次回に同じ処理をするときに処理結果を保存してくれて応答スピードが速くなるものです。

そして、ブラウザはよく耳にすると思いますがユーザー端末(PC・スマホなど)側で使用されてるWebサイトを閲覧するソフトがブラウザ。Google chromesafariなんかが代表的ですね。

なので、ここではブラウザ側に保存される設定をエックスサーバーで設定するということになります。

 

 

 

 

エックスサーバーの「高速化」にあるブラウザキャッシュ設定で、どのキャッシュを削除範囲にするかは次の2つ

 

  • 全ての静的ファイル※推奨設定
  • CSS/JavaScript以外

 

上記2つがありますが私は推奨設定のすべての静的ファイルを選んで設定しています。

設定変更をクリックして設定変更(確認)をクリックしたらブラウザキャッシュ設定は完了です。

 

ブラウザキャッシュ設定をするとレスポンスヘッダーにExpiresヘッダとCache-Controlヘッダが追加されてますが、もしブラウザキャッシュ設定の前に「.htaccess」で下記設定を自分でしている場合は.htaccess側が優先になります。

 

  • Cache-Control
  • Expires
  • Pragma
  • Set-Cookie

 

上記設定をしている場合で今回のブラウザキャッシュ設定をしても支障はないとのことですが.htaccess」が優先されるので更に表示速度が速くなるということはないです。

Xエクセラレータ設定ではなくて.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

 

まとめ

 

Xサーバーの高速化というとXアクセラレータが有名な気がします。

 

 

しかしXサーバーの高速化にはブラウザ側とサーバー側でキャッシュする設定もあるので、有効なキャッシュの使い方をするだけでもサイトで表示されるファイルの表示を高速化できる可能性が増えます。

Xサーバーの高速化の設定項目の中から自分のサイトに合った設定を組み合わせて高速化を実現してみてください。

エックスサーバーカテゴリの最新記事