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

1. css や javascript を圧縮転送してウェブページを高速化する
- 1.1. gzip による圧縮転送を導入する理由
- 1.2. gzip モジュールの導入方法
2. さいごに

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

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

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

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

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

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

問題の原因が分からずに悩んでいたところ、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 圧縮をかけると逆にファイルサイズが増えるため逆効果になり易いので注意が必要です。