【WV.1】リソース配信最適化のためのサーバー設定 – Capital P

WordPressのためのCore Web Vital向上の第一回目は、サーバーの設定を変更するだけで適用できる項目を紹介しよう。主に以下の2つである。

リソースのGZip圧縮
ブラウザキャッシュポリシー

これらの2つはWeb Vitalどうこうが言われる前から設定すべきと言われているので、ホスティングを外部にアウトソーシングしている場合は普通設定されているはずだが、一部のレンタルサーバーや自分で用意するVPSでは設定されていないこともあるので、設定方法およびその必要性を説明する。

リソースのGzip圧縮とは？

Gzipとはデータ圧縮技術で、いわゆるZipファイルの一種だと思ってもらっても良い。いまどきのWebサーバーではテキストファイルを配信するときにそれをGzip圧縮して配信してくれる機能が付いている。クライアント（ブラウザ）の方でも「HTMLを要求したらGzipが返ってきた、ダウンロードします」というポンコツな仕様にはなっておらず、Gzipを展開して読み込むことができる。つまり、データの配信部分でだけGzipを利用して転送するファイルサイズを2/3〜1/3程度に抑えることができるのだ。

多くの場合設定は不要だが、Page Speed Insightsなどのツールで警告が出ていたら設定しよう。

ブラウザキャッシュとは？

ブラウザは同じリソース（例・style.css ）を何度もダウンロードするのは無駄なので、もしサーバーが「そのファイルキャッシュしていいよ」と宣言していたらブラウザに保存して再利用する仕組みがある。2ページ目以降のアクセスではCSSをダウンロードする必要がなくなる。

なお、「ブラウザキャッシュが残ってるとCSSの変更が反映されない！」という勘違いをしている開発者がたまにいるのだが、WordPressにはそれを避ける仕組みがあり、wp_enqueue_style のような関数を使って読み込めば、URLの最後にバージョン番号が付くようになっている。

https://example.com/wp-content/themes/my-theme/style.css?ver=1.0.1

バージョンはファイルのmd5値でも構わないので、とにかく「中身が変わればURLも変わる」ようにして、ブラウザキャッシュの期限はいっそ1年ぐらいにしておこう。

さくらインターネットでの設定例

さて、筆者の開発したプレミアムテーマ Side Business での設定例を紹介しよう。さくらインターネットはApacheなので、.htacces ファイルに次のような記載をする。一つのサーバーにいくつもWordPressをインストールしている人は上のディレクトリ ~/www に置いておけば全部のディレクトリに適用されるはずだ。

# End of WordPress
# もしWordPressのルートなら上のコメントの下に追記する。

# Etagをなくす
<ifModule mod_headers.c>
    Header unset ETag
</ifModule>

# 認識できる拡張子を追加。
# Webフォントもキャッシュさせたいので。
<IfModule mime_module>
    AddType text/cache-manifest .appcache
    AddType image/x-icon .ico
    AddType image/svg+xml .svg
    AddType application/x-font-ttf .ttf
    AddType application/x-font-woff .woff
    AddType application/x-font-woff2 .woff2
    AddType application/x-font-opentype .otf
    AddType application/vnd.ms-fontobject .eot
</IfModule>

# Gzip圧縮設定
<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
  
  Header append Vary Accept-Encoding env=!dont-vary
 
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/js
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+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
</IfModule>

# ブラウザキャッシュ設定
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault                              "access plus 1 seconds"
    ExpiresByType text/css                      "access plus 365 days"
    ExpiresByType text/js                       "access plus 365 days"
    ExpiresByType text/javascript               "access plus 365 days"
    ExpiresByType image/jpeg                    "access plus 365 days"
    ExpiresByType image/webp                    "access plus 365 days"
    ExpiresByType image/png                     "access plus 365 days"
    ExpiresByType image/svg+xml                 "access plus 365 days"
    ExpiresByType application/javascript        "access plus 365 days"
    ExpiresByType application/x-javascript      "access plus 365 days"
    ExpiresByType application/x-font-ttf        "access plus 365 days"
    ExpiresByType application/x-font-woff       "access plus 365 days"
    ExpiresByType application/x-font-woff2      "access plus 365 days"
    ExpiresByType application/x-font-opentype   "access plus 365 days"
    ExpiresByType application/vnd.ms-fontobject "access plus 365 days"
</IfModule>

以上で多くのケースは問題なくなるはずだ。機能名を紹介しておくと、以下がApacheモジュールとその役割である。

mod_defalate Gzip圧縮モジュール。
mod_expires ブラウザキャッシュ設定モジュール
mime_module 拡張追加モジュール。アイコンフォントが設定されていないサーバーは結構多い。

Nginxを使っている場合は、自分でサーバーを管理しているケースがほとんどだと思うので、適宜ググって欲しい。Nginxは遥かに簡単である。

server {
    gzip on;
    gzip_disable "MSIE [1-6]\.(?!.*SV1)";
    gzip_vary on;
    gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;
}