【THETHOR】ブラウザキャッシュとGzip圧縮

ブラウザキャッシュとGzip圧縮

ブラウザキャッシュ
・キャッシュとは、一度アクセスしたサイトのデータ(画像やHTMLなど)をブラウザで一時的に保管しておく仕組み

Gzip圧縮
・サーバーにあるWebサイトのデータを圧縮してクライアント(ブラウザ)に送信する仕組み

【ホームページを早く表示する】事が出来る

設定する事で【何が変わるのか】実際に見てみましょう

設定変更前

※【.htaccessファイル】最下部の情報だけ記述

# BEGIN WordPress
# `BEGIN WordPress` から `END WordPress` までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

設定変更

【外観】→【カスタマイズ】→【SEO設定】→【htaccess設定】
「ブラウザキャッシュを有効にする」チェックをON
「Gzip圧縮を有効にする」チェックをON

設定変更後

【.htaccessファイル】にコードが追加される

L17 – 89 までが「ブラウザキャッシュを有効にする」部分
各ファイルのキャッシュ有効期限を設定している

L97 – 126 までが「Gzip圧縮を有効にする」
各ファイルの圧縮設定

# BEGIN WordPress
# `BEGIN WordPress` から `END WordPress` までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# BEGIN ブラウザキャッシュ
<IfModule mod_headers.c>
  <ifModule mod_expires.c>
    ExpiresActive On

    # キャッシュ初期化
    ExpiresDefault "access plus 1 month"

    # CSS
    ExpiresByType text/css                              "access plus 1 year"

    # RSS
    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rdf+xml                   "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"

    # データはキャッシュさせない
    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/ld+json                   "access plus 0 seconds"
    ExpiresByType application/schema+json               "access plus 0 seconds"
    ExpiresByType application/vnd.geo+json              "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"

    # Favicon
    ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
    ExpiresByType image/x-icon                          "access plus 1 week"

    # HTML
    ExpiresByType text/html                             "access plus 0 seconds"

    # JavaScript
    ExpiresByType application/javascript                "access plus 1 month"
    ExpiresByType application/x-javascript              "access plus 1 month"
    ExpiresByType text/javascript                       "access plus 1 month"
    ExpiresByType text/js                               "access plus 1 month"

    # マニフェスト
    ExpiresByType application/manifest+json             "access plus 1 week"
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"

    # 画像や動画
    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/bmp                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpg                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"
    ExpiresByType image/webp                            "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"

    # Webフォント
    # Embedded OpenType (EOT)
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType font/eot                              "access plus 1 month"

    # OpenType
    ExpiresByType font/opentype                         "access plus 1 month"

    # TrueType
    ExpiresByType application/x-font-ttf                "access plus 1 month"

    # Web Open Font Format (WOFF) 1.0
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/x-font-woff               "access plus 1 month"
    ExpiresByType font/woff                             "access plus 1 month"

    # Web Open Font Format (WOFF) 2.0
    ExpiresByType application/font-woff2                "access plus 1 month"

    # Other
    ExpiresByType text/x-cross-domain-policy            "access plus 1 week"

  </IfModule>
</IfModule>
# END ブラウザキャッシュ

# BEGIN Gzip圧縮
<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE

  # Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

  # gifやjpg、pngなど圧縮済みのコンテンツは再圧縮しない
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
  #DeflateCompressionLevel 4

  # 有効な圧縮
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/atom_xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-httpd-php
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
</IfModule>
# END Gzip圧縮

# END WordPress

結果(ブラウザキャッシュを有効にする)

変更前

変更後

結果(Gzip圧縮を有効にする)

変更前

変更後

それぞれきちんと設定が反映されていました

結果(スピードテスト)

Googleツール【PageSpeed Insights】

変更前

変更後

早くなりましたね！