【WV.1】リソース配信最適化のためのサーバー設定 - チュートリアル - Capital P - WordPressメディア

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

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

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

これらの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;
}

CDNの利用

CloudFlareやAmazon CloudfrontなどのCDNを利用する場合、ブラウザキャッシュ機能やGzip圧縮は付いていることがほとんどである。CDNは多くの場合オリジンのレスポンスを尊重するので、キャッシュして欲しくない場合だけ除外するなどの設定を入れれば良いだろう。

CloudFlareは自動でGzip圧縮をする

まとめ

Gzip圧縮およびブラウザキャッシュの設定は「普通のWebサイトならまずやるだろ」という設定である。詳しくないなりに自分で設定したのならやっていなくてもしょうがないのだが、専門家に依頼したにもかかわらずやっていなかったら「ええっ?」と思った方がいいかもしれない。

ちなみに、これらの設定をやってくれるプラグイン(e.g. W3 Total Cache)もあるにはあるが、サーバーの設定でやっておいた方が余計な処理が含まれないため特別なケースを除いてお勧めしない。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください