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

Author:しき 投稿一覧
奈良県在住のエンジニア。アルバイトでゲーム開発に携わりIT業界入り。組み込みや業務系のソフト開発を経験して、その後レンタルサーバー会社にてインターネットの根幹の知識を得る。今ではスマホアプリの開発やWeb開発、インフラの構築に従事中。
関連する記事
インフラカテゴリの最新記事
-
- 2023.02.09
- docker,
[docker]対処法:コンテナにログインした時にvi(vim)コマンドが使えない
-
- 2023.01.27
- docker,
[docker]対処法:OCI runtime create failed exec: “bash”: executable file not found
-
- 2023.01.06
- ubuntu,
Debian/Ubuntu系統のサーバOSではcrontabのMAILFROMは使えない件について
-
- 2022.07.19
- ubuntu,
[AWS]Ubuntu22.04 LTS にSSH接続(ログイン)できない問題の解決方法
-
- 2022.06.07
[python]torch がインストールできない場合の対応策
-
- 2022.06.02
- cloudwatch,
[AWS]CloudWatchで監視を行う項目