Googleのページ速度測定ツールとしてPageSpeed Insightsがあります。これを実行すると、特に速度対策してないサイトではたいてい「圧縮を有効にする」ようにと注意されます。他にも複数注意されますが、圧縮は簡単な割にスコアが大幅に上がりやすい項目です。また、WordPressなど使っていると、ソースコードをいじるのも一苦労ですが、この項目については簡単に実行することができます。
本記事では、nginxで圧縮を有効にするやり方についてメモします（Apacheにあらず）。
ページ速度の測定と改善
ページ速度の測定にはいくつかのスタンダードがありますが、そのうちの一つがGoogleのPageSpeed Insightsです。これを使ってみた所、当サイトのスコアはPC版が69点、モバイル版が57点でした。これはよくないスコアで、いわゆる赤点でしょうか。まぁ特に速度改善の対策らしい対策はしていないので、そのことを思えばこんなものなのかもしれませんが。
色々とGoogleから注意されましたが、その中の「圧縮を有効にする」を実行したところ、PC版が83点(+14点)、モバイル版が66点(+9点)となりました。及第点とはいきませんが、赤点は脱することができたようです。
追記：どうやらこの調整をしていたときはサーバーがたまたま重かったのか、応答速度が遅く、その後再測定すると86点/69点に。まぁ大して変わりませんが。
WordPressは大きなソフトウェアなので、自分でさっといじれるところが少なく、Googleからの有難い助言も、すぐ実行できるものばかりではありません。その中でこの圧縮は、nginxの設定だけで済み、かつ大幅なスコア改善が期待できる項目です。是非ともやっておきたいですね。
圧縮を有効にするとは
圧縮を有効にするとは、コンテンツを圧縮して転送するデータ量を減らそうというものです。基本的に、Webサーバーのソフトの設定で対応することになります。Apacheであったり、nginxであったりです。いずれも、設定ファイルにちょっと付け加えるだけで、gzipで圧縮する設定にすることができます。
使用するうえで、注意しなくてはいけないこともあります。圧縮処理を行うため、CPUの負荷は上がるという点です。また、処理する時間がかかります。したがって、なんでもかんでも圧縮すればよいというものではないといえます。たとえば小さすぎるファイルや、jpeg画像のように既に十分圧縮されているものは、圧縮の効果が薄いどころか逆効果になるかもしれません。また、もしアクセスが多すぎてCPUに余裕がない場合も、この設定は藪蛇かもしれません（そんな心配してみたいですね）。
とはいえ、それが定量的にどれくらいなのかは難しい問題です。その難しい問題を泥臭く頑張るのことをチューニングというわけですが、今回はあまり頑張らず、まぁこんなものだろうという設定にします。
nginxでのやり方
nginxでのやり方をメモします。nginxの設定ファイルをいじりますが、設定ファイルの基本は「nginxの設定ファイル nginx.conf の読み方 超入門」という記事に書きましたので、設定ファイルの場所や、コンテキストやディレクティブ、MIMEタイプといった用語がわからない場合はご参照ください。
gzip圧縮転送として、gzipディレクティブを使います。これはhttp,server,locationコンテキスト内で使えます。locationコンテキスト内での使用例を以下に示します。
location / {
try_files $uri $uri/ @wordpress;
# gzip圧縮
gzip on;
gzip_min_length 1k;
gzip_types text/css text/javascript application/x-javascript application/javascript application/json image/svg+xml;
gzip_disable "msie6";
}
# gzip圧縮以下が適用例です。一つずつ見ていきます。
gzip on;により、gzip圧縮転送を有効にします。
gzip_min_length 1k;で、圧縮対象の最小のファイルサイズを指定します。この場合1kB。なお、デフォルト値は20です。
gzip_typesは、圧縮を有効にするファイルの種類を指定します。text/htmlについては指定せずとも圧縮が有効化されます（入れるとダブってるよと警告されます）。なお、text/htmlやtext/cssはMIMEタイプと呼ばれます。MIMEタイプとは、簡単に言うとWeb上における拡張子みたいなものです。たとえば、.cssはMIMEタイプにおいてtext/cssと表現されます。この対応は、/etc/nginx/mime.typesで定義されています。
gzip_disableは、圧縮を無効にするユーザーエージェントを指定します。特定のブラウザについては圧縮しないとか、そういうことです。"msie6"は特別な符号で、ME IE 6 SV1未満について最適化されています（これらのブラウザは圧縮の実装に不具合があるそうです）。もっとも、MS IE6を使ってこのサイトを覗く人はほとんどいません。今月は全体の0.015%ほどあったようですが、果たしてちゃんとこのサイト表示はされているのでしょうか。
以上の設定を、適切なところに配置します。WordPressを使っている場合、locationコンテキストがphpとそれ以外で分散しているかもしれませんが、その場合両方に配置します。serverコンテキスト内に配置してしまうのが手っ取り早い？
設定が完了したら、設定ファイルを再読込です。CentOS 7の場合（つまりsystemdの場合）は以下。
$ sudo nginx -t
-> 設定ファイルの文法が正しいことを確認
$ sudo systemctl reload nginx.service
以上。
gzip圧縮したファイルを用意して転送するgzip_staticについて
さて、gzipをonにした場合、毎回圧縮処理が行われますが、これは前述したとおり負荷の増加と処理時間というデメリットがあります。それで、この処理を減らすために、圧縮したファイルを用意しておいて、それを使うという方法があり、nginxにおいてはgzip_staticというディレクティブでその機能を有効化できます。しかし、これは標準的な機能ではなく、使用するには、自前でnginxをビルドしなくてはなりません（コンパイルオプションは--with-http_gzip_static_module）。
したがって、ここではこの機能は利用しないものとします。興味がある人は各自調べてください。
効果
ところで、この効果ですが……確かにスコアは上昇したものの、体感としてはあまり変わらないですね。ただ、見やすいページとしてGoogleには多少なりとも好印象を与えられるようになった……のではないかな？多分。
他にも修正せよとされる項目がいくつもあるのですが、WordPressに依存するところも多く、おいそれとは手が出しづらい。WordPressは便利なのですけれど、個人のブログサイトにはちょっと複雑過ぎるかもしれません。
nginx実践入門 | Gihyo Digital Publishing
DRMフリー（厳密にはソーシャルDRM）なので、好きなデバイスとソフトで読めてオススメです。
コメント