Nginxでgzip圧縮してページ表示速度を上げる！(10%以上速度UP!)

我がブログの表示速度が微妙に遅い。

すごく遅いわけでもないがなんとなく納得がいかない。

というわけで、対策としてWEBサーバーのNginx側でgzip圧縮をして表示速度（読み込み速度）の高速化を試みる。

WEBサーバーでのGzip圧縮とは？
対策前の調査
対策開始
■対策後の速度調査
まとめ

WEBサーバーでのGzip圧縮とは？

WEBサーバー側で、サイトのデータをあらかじめgzipという形式で圧縮して送り出すことにより、サイト閲覧者様の転送量が減少して表示速度が上がるという仕組みです。

対策前の調査

調査に利用するサイト

WEBサイト（ページ）の表示速度を計測してくれるサービスは色々あります。

以下が代表的な4つの計測サービスのまとめ。

まずこの4つのサイトで対策前の今の状態をチェックする。

■PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

これはGoogleが提供しているページの表示スピードを測定してくれるサービス。
改善策も提示してくれるので便利。

■Test My Site（テストマイサイト）
https://testmysite.withgoogle.com/intl/ja-jp

こちらもGoogle提供のスマホでのページ表示スピードを測定してくれるちょっと新しいオシャレな感じのサイト。
無料で分析結果をメールで送ってくれるという至れり尽くせりのイケてるサービス。

■Pingdom Website Speed Test
https://tools.pingdom.com/

海外の有名な計測サイト。なかなか高性能。

■GTmetrix
https://gtmetrix.com/

こちらも有名な海外の計測サイト。

PageSpeed Insightsでの結果(対策前)

モバイル：「Medium 73/100」
パソコン：「Mediun 65/100」
最適化についての提案に「圧縮を有効にする」という項目がある。

Test My Site(テストマイサイト)での結果(対策前)

3Gでの読み込み時間：5秒（良好）
訪問者の推定離脱率：19％
同じ業種内での比較：少し遅い
優先順位が上位の修正項目に「GZIPでリソースを圧縮する」がある。

Pingdom Website Speed Testでの結果(対策前)

Performance grade：73
Load time：4.02秒
Page size：5.3MB

GTmetrixでの結果(対策前)

PageSpeed Score：D（69%）
YSlow Score：E（58%）
Fully Loaded Time：2.2秒
Total Page Size：5.35MB

う～ん微妙ですね・・・
果たしてこれがどれだけスピードアップするだろうか？

対策開始

vi等でNginxの設定ファイル（nginx.conf）のhttpディレクティブ内に以下の2行を追加します。追加する場所は最後の方でOKです。

※当方の環境はCentOS 7.4です。

# vi /etc/nginx/nginx.conf

1	# vi /etc/nginx/nginx.conf

http {
…省略

#圧縮設定ここから
gzip on;
gzip_types text/css application/javascript;
#ここまで

…省略
}

http {

…省略

#圧縮設定ここから

gzip on;

gzip_types text/css application/javascript;

#ここまで

…省略

}

そしてNginx再起動

# systemctl restart nginx.service

1	# systemctl restart nginx.service

【※今回の対策の内容】
分析結果で指摘されていたjavascriptのファイル（.js）とスタイルシートのファイル（.css）を圧縮します。
画像ファイル関連はプラグインで最適化してるので外しました。

■対策後の速度調査

PageSpeed Insightsでの結果(対策後)

モバイル：「Medium 73/100」※変化無し
パソコン：「Mediun 65/100」→「Mediun 76/100」※11/100アップ！

Test My Site(テストマイサイト)での結果(対策後)

3Gでの読み込み時間：5秒（良好）→ 4秒（良好）※1秒短縮！
訪問者の推定離脱率：19％ → 10% ※離脱率9%ダウン！
同じ業種内での比較：少し遅い → 同程度 ※トップクラスのサイトと同程度！

Pingdom Website Speed Testでの結果(対策後)

Performance grade：73 ※変化無し
Load time：4.02秒 → 3.19秒 ※0.83秒短縮！
Page size：5.3MB → 5.1MB ※0.2MB縮小！

GTmetrixでの結果(対策後)

PageSpeed Score：D（69%）→ B（82%）※2ランク(13ポイント)アップ！
YSlow Score：E（58%）→ D（68%）※1ランク(10ポイント)アップ！
Fully Loaded Time：2.2秒 → 1.8秒 ※0.4秒短縮！
Total Page Size：5.35MB → 5.15MB ※0.2MB縮小