Nginxにてgzip圧縮を導入して「テキスト圧縮の有効化」に対処する

nginx_gzip_add_top

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

css や javascript を圧縮転送してウェブページを高速化する

VPS で構築した Nginx 環境にて css や javascript などを gzip 圧縮してウェブページの表示速度を上げる gzip モジュールの導入を行ったので手順をまとめていきます。

 

gzip による圧縮転送を導入する理由

Google Search Console にあるモバイルユーザビリティにて、ある日エラーが発生しました。
nginx_gzip_add2

エラー テキストが小さすぎて読めません 失敗しました
エラー クリック可能な要素同士が近すぎます 失敗しました

内容としては UI によるエラーですが、手動でモバイルフレンドリーのテストを行っても問題は確認されず。

nginx_gzip_add3
問題の原因が分からずに悩んでいたところ、Google のウェブサイトの表示速度を測る「PageSpeed Insights」にて「テキスト圧縮の有効化」の警告を確認しました。そこからモバイルユーザビリティのエラーは CSS が時間内に読み込めていないだけでは?という懸念が出たので gzip モジュールの導入を決めました。

 

gzip モジュールの導入方法

gzip の導入方法は、nginx の設定ファイルに記述を追記して、Nginx をリロードするだけです。

設定ファイルに追記する内容

gzip on;
gzip_types text/css application/javascript application/json;

nginx の設定ファイルの読み込み

root@example:/# nginx -t -c /etc/nginx/nginx.conf
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
root@example:/# systemctl reload nginx
画像である「image/png」や「image/jpeg」は圧縮の対象外にしています。ウェブで利用する画像は、フォーマット自体の圧縮効率が良いため、gzip 圧縮をかけると逆にファイルサイズが増えるため逆効果になり易いので注意が必要です。

 

さいごに

nginx_gzip_add4
今回は gzip の導入によって

・「PageSpeed Insights」にて「テキスト圧縮の有効化」の警告
・「Google Search Console」にて「テキストが小さすぎて読めません」のエラー
・「Google Search Console」にて「クリック可能な要素同士が近すぎます」のエラー

が解消しました。

各自の環境によって必ずしも問題が解決できるわけではありませんが、同じ問題で困っている方がいれば参考になれば幸いです。

 

 

Linuxの知識については下記の本も参考になるので、スキルアップにお役立てください。

created by Rinker
三宅 英明 (著)、大角 祐介 (著)
ページ数: 440ページ
出版社:SBクリエイティブ
発売日:2015/06/06

出典:amazon