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

Nginxでgzip圧縮してページ表示速度を上げる! サーバー

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

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

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

スポンサーリンク

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

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

スポンサーリンク

対策前の調査

調査に利用するサイト

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

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

サイトの表示速度を計測して問題と改善策を教えてくれるサービス4選
WEBサイトの表示速度(読み込み速度)は非常に重要だ。 表示速度が遅いとそれだけでサイト閲覧者のストレスになってサイトを閉じてしまう。 というわけで、とても重要な「サイトの表示速度」を計測・分析して問題点と改善策を提示してくれる...

まずこの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での結果(対策前)

PageSpeed Insightsでの結果(対策前)①

PageSpeed Insightsでの結果(対策前)②

PageSpeed Insightsでの結果(対策前)③

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

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

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

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

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

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

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

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

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

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

GTmetrixでの結果(対策前)

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です。

そしてNginx再起動

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

スポンサーリンク

■対策後の速度調査

PageSpeed Insightsでの結果(対策後)

PageSpeed Insightsでの結果(対策後)①

PageSpeed Insightsでの結果(対策後)②

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

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

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

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

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

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

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

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

GTmetrixでの結果(対策後)

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縮小

スポンサーリンク

まとめ

読み込み速度測定サイトによって多少バラツキがありますが、Nginxの設定ファイル(nginx.conf)にたった2行挿入するだけで、なにげに一気に全体的に10%以上速度が向上!

これはやらなきゃ損ですね。

今日のところはこれまで。

今後は更なる高速化のために他の部分も対策していきます。

 

サーバー
スポンサーリンク
スポンサーリンク
Ketsunosukeをフォローする
己で解決!泣かぬなら己で鳴こうホトトギス