注目キーワード
  1. Wordpress
  2. テーマ
  3. プラグイン
  4. SEO
  5. 集客

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

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

  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 bMSIEs(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)もあるにはあるが、サーバーの設定でやっておいた方が余計な処理が含まれないため特別なケースを除いてお勧めしない。

Webフロントエンド ハイパフォーマンス チューニング Kindleストア

価格¥2,801

順位41,087位

久保田 光則

発行技術評論社

発売日2017年5月26日

Amazonを開く

Supported by amazon Product Advertising API

投稿 【WV.1】リソース配信最適化のためのサーバー設定Capital P に最初に表示されました。

#wordpress #ワードプレス #SEO #集客

「Capital P」を閲覧する

最新情報をチェックしよう!
>WordPressに関連する情報まとめ

WordPressに関連する情報まとめ

ブログ / ホームページの価値の最大化をさせるCMS、WordPress(ワードプレス)。フリーのブログとは違い、いくらか敷居の高い印象がありますが、一つ一つクリアにしてみるときっとあなたもWordPressのパワーの恩恵に預かれると思います。当サイトを見て、まずはトライしてみましょう!

CTR IMG