WEBサイトの表示速度が遅い時の改善方法【ブラウザキャッシュを設定する】

WEBページの表示が遅い時に確認することの一つにブラウザキャッシュがあります。

ブラウザキャッシュを設定することで、ページの表示速度が改善します。

ページの表示速度が遅い時にブラウザキャッシュを適切に設定してみてはいかがでしょうか？

ブラウザキャッシュとは

WEBブラウザでWEBサイトを表示した時、ブラウザからサーバにページの情報を取りに行き、サーバから返ってきたWEBページの情報を表示しています。

ブラウザキャッシュとはWEBブラウザが一度表示したページのデータを一時的にローカルに保存する機能のことを言います。

一度開いたページのデータを保存しておくことで2回目以降にそのページを表示した時に、サーバまでデータを取りにかなくてもブラウザキャッシュからデータを参照するので表示速度が向上します。

ブラウザキャッシュを設定するには

ブラウザキャッシュを設定する方法の一つに.htaccessを利用した方法があります。

キャッシュを設定する

# ブラウザへのキャッシュの設定
<IfModule mod_expires.c>
  ExpiresActive On

  # キャッシュの初期化（1秒に設定）
  ExpiresDefault "access plus 1 seconds"

  # MIME Type ごとのキャッシュ設定
  ExpiresByType text/css "access plus 1 weeks"
  ExpiresByType text/js "access plus 1 weeks"
  ExpiresByType text/javascript "access plus 1 weeks"
  ExpiresByType image/gif "access plus 1 weeks"
  ExpiresByType image/jpeg "access plus 1 weeks"
  ExpiresByType image/png "access plus 1 weeks"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType application/pdf "access plus 1 weeks"
  ExpiresByType application/javascript "access plus 1 weeks"
  ExpiresByType application/x-javascript "access plus 1 weeks"
  ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
  ExpiresByType application/x-font-ttf "access plus 1 year"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType application/x-font-opentype "access plus 1 year"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>

IfModule mod_expires.c
モジュールの有無を確認し、モジュールがある場合は処理を続けます。

ExpiresActive On
mod_expiresモジュールの使用を宣言します。

ExpiresDefault “access plus 1 seconds”
デフォルトのキャッシュを1秒に設定します。

ExpiresByType 〜
それぞれのMIME Typeのキャッシュ時間を個別に設定していきます。

圧縮をする。

キャッシュの設定が済んだら、さらに表示速度を上げるためにhtml、cssなどの圧縮も設定してしまいます。

こちらも.htaccsessに記述すればOKです。

<IfModule deflate_module>
  SetOutputFilter DEFLATE
 
  # Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
  BrowserMatch ^Mozilla/4.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch MSI[E] !no-gzip !gzip-only-text/html
 
  # gifやjpgなど圧縮済みのコンテンツは再圧縮しない
  SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI _.utxt$ no-gzip
 
  # htmlやcssなどは圧縮
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/atom_xml
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

IfModule deflate_module
モジュールの有無を確認しある場合は処理を続けます。

SetEnvIfNoCase 〜
gif、jpgなどのすでに圧縮済みのコンテンツは再度圧縮しないように設定します。

AddOutputFilterByType 〜
MIME Typeごとに圧縮をかけるか指定していきます。

まとめ

ブラウザキャッシュをうまく使うことでページの表示速度が改善します。

注意点は頻繁に変更のあるページ、未完成のページなどでキャッシュを設定してしまうと、リフレッシュしてリロードしないと変更した箇所が反映されない点です。