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

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

nginx_gzip_add_top

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

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

Advertisement

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 圧縮をかけると逆にファイルサイズが増えるため逆効果になり易いので注意が必要です。
Advertisement

さいごに

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

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

が解消しました。

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

 

この記事が気に入ったら
いいね ! をお願いします

Twitter で

インフラカテゴリの最新記事