css や javascript を圧縮転送してウェブページを高速化する
VPS で構築した Nginx 環境にて css や javascript などを gzip 圧縮してウェブページの表示速度を上げる gzip モジュールの導入を行ったので手順をまとめていきます。
gzip による圧縮転送を導入する理由
Google Search Console にあるモバイルユーザビリティにて、ある日エラーが発生しました。
エラー テキストが小さすぎて読めません 失敗しました
エラー クリック可能な要素同士が近すぎます 失敗しました
内容としては UI によるエラーですが、手動でモバイルフレンドリーのテストを行っても問題は確認されず。
問題の原因が分からずに悩んでいたところ、Google のウェブサイトの表示速度を測る「PageSpeed Insights」にて「テキスト圧縮の有効化」の警告を確認しました。そこからモバイルユーザビリティのエラーは CSS が時間内に読み込めていないだけでは?という懸念が出たので gzip モジュールの導入を決めました。
gzip モジュールの導入方法
gzip の導入方法は、nginx の設定ファイルに記述を追記して、Nginx をリロードするだけです。
〇設定ファイルに追記する内容
gzip_types text/css application/javascript application/json;
〇nginx の設定ファイルの読み込み
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
さいごに
・「Google Search Console」にて「テキストが小さすぎて読めません」のエラー
・「Google Search Console」にて「クリック可能な要素同士が近すぎます」のエラー
が解消しました。
各自の環境によって必ずしも問題が解決できるわけではありませんが、同じ問題で困っている方がいれば参考になれば幸いです。