nginx テキスト圧縮で サイトの高速化

Webサーバー サイトの管理
PageSpeed Insights : Webサイトの高速化
その-1 テキスト圧縮の有効化

nginx gzipの有効化で テキスト圧縮
 
Google Search Consoleに「速度(試験運用版)」が追加され、サマリーの中の「拡張」と「拡張」セクションの双方に「速度(試験運用版)」が表示されるようになった。
 
拡張 → 速度(試験運用版)をクリックすると、速度帯毎のURL数の推移が見れる。
拡張→速度(試験運用版)をクリックをクリックすると、 速度帯毎のURL数の推移が見れる。
 
さらに、「レポートを開く」をクリックすると、「速度帯毎のURL数」の推移が棒グラフで表示される。
 
『真っ赤っか』ではないか、なんとかせねばならぬ。
『真っ赤』ではないか、なんとかせねばならぬ
 
 

 

スポンサー リンク

 

 
 
以下、Webサイトのスピードアップの一つである「テキスト圧縮」を行うべく、「nginx」で gzipを有効化した記録。
 
 
 
 
 
1. Search Consoleでの「速度」推移
 
「詳細」を見てみると、「低速」のURLが 224 もある。
「詳細」を見てみると、「低速」のURLが 224 もある
 
クリックすると、具体的なURLのパターンが表示される。
クリックすると、具体的なURLのパターンが表示される
 
さらにクリックすると、同じパターンの全てのURLが表示され、『PAGESPEED INSIGHTS』に導かれる。
同じパターンの全てのURLが表示され、『PAGESPEED INSIGHTS』に導かれる
 
『PageSpeed Insights』で、該当ページの測定結果が表示される。
『PageSpeed Insights』で、該当ページの測定結果が表示される
 
このように、Google Search Consoleに「速度(試験運用版)」が表示され、『PageSpeed Insights』での分析と改善が求められるようになった。
 
 
 
2. PageSpeed Insightsでの測定と分析
 
Webサイトの環境。
・Raspberry Pi : 3 Model B
・Raspbian : Stretch
・Nginx : Stable version 1.16.0
・PHP : 7.3.6 2019.05.31
・MariaDB : 10.1.38
・WordPress : 5.3
 
サイトのトップページでの、『PageSpeed Insights』の評価スコア。【モバイル】での値が、低速の「0~49」の中でも「9」と極めて遅い。
『PageSpeed Insights』、トップページのスコア
 
ラボデータの値。すべての項目が「」の赤色になっている。
ラボデータの値
 
改善できる項目。この中に「テキスト圧縮の有効化」が 2番目にある。
改善できる項目
 
テキスト圧縮の詳細。
テキスト圧縮の詳細
 
テキスト圧縮の有効化の対策指示。
『テキストベースのリソースは圧縮(gzip、deflate、または brotli)して配信し、ネットワークの全体的な通信量を最小限に抑えてください。』
ウェブサーバーの設定でテキスト圧縮を有効にできます。
 
テキスト圧縮対象URLとファイルが、サイズ順に表示される。
テキスト圧縮対象ファイル
 
 
このように『PageSpeed Insights』は、ページの表示速度を表示するだけでなく、分析による改善策まで提示してくれる便利なツールである。
 
 
 
3. テキスト圧縮の有効化とは
 
 
gzip:インターネットを介したデータのやりとりにおける、データ圧縮の形式。

  圧縮を有効にする
このルールは、圧縮可能なリソースが gzip 圧縮されずに配信されていることを PageSpeed Insights が検出した場合にトリガーされます。

 概要
最新のブラウザはすべて gzip 圧縮に対応しており、すべての HTTP リクエストで自動的に圧縮のネゴシエーションを実施します。gzip 圧縮を有効にすると、転送されるレスポンスのサイズが最大で 90% 削減されるため、リソースのダウンロード時間の大幅な短縮、クライアントのデータ使用量の削減、最初のページ レンダリング時間の改善といった効果があります。 詳しくは、GZIP によるテキストの圧縮をご覧ください。

 
 
 
4. nginxでのテキスト圧縮
 
「/etc/nginx/nginx.conf」の内容を見てみると、次のようになっている。 
user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  600;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}
 
下からの2行目が「#gzip on;」になっている。このコメントアウトを外し、ここに【gzip圧縮】の対象にするコンテンツの「MIMEタイプ」を記述する。
 
 

 「MIMEタイプ」とは
MIME タイプはクライアントに対して、転送するドキュメントの種類を伝える機能です。ウェブにおいて、ファイル名の拡張子は意味を持ちません。従って、サーバーはそれぞれのドキュメントと共に正しい MIME タイプを転送するよう適切に設定することが重要です。ブラウザーはたいてい MIME タイプを、読み込んだリソースに対して行う既定のアクションを決めるために使用します。

 
 
「/etc/nginx/nginx.conf」記述例。
    gzip  on;
    gzip_vary on;
    gzip_proxied any;
    gzip_min_length 1024;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain
		 text/xml
		 text/css
		 text/javascript
		 image/gif
		 image/png
		 image/jpeg
		 application/javascript
		 application/x-javascript
		 application/json
		 application/font-woff
		 application/font-tff
		 application/octet-stream;
 
※:text/html は、デフォルトで設定されているので指定しない。
 
設定後、Nginx の gzip圧縮 が有効か curl で確認する。
curl -I -H ‘Accept-Encoding: gzip,deflate’ **URL**
 
Nginx の gzip圧縮 が有効か curl で確認する
 
レスポンスHearderに、「Content-Encoding: gzip」があればOK.
 
GZIP圧縮確認ツール」というサイトでも確認が出来る。
「GZIP圧縮確認」サイト
 
「GZIP圧縮確認ツール」での確認結果。約70%圧縮されている。
「GZIP圧縮確認ツール」での確認結果
 
 
 
5. テキスト圧縮の効果
 
サイトのトップページでの評価スコア。「14」ポイントと少し上がった。
サイトのトップページでの評価スコア
 
ラボデータの値。速度インデックス「」の赤色以外、すべての項目ががオレンジの「」になった。
ラボデータの値
 
改善できる項目。「テキスト圧縮の有効化」がオレンジの「」になった。
改善できる項目
 
「評価スコア」の比較。「5」ポイント改善される。
「評価スコア」の比較
 
「ラボデータの値」の比較。First Paint が「4.4秒」から「1.4秒」になった。
「ラボデータの値」の比較
 
「改善できる項目」の比較。テキスト圧縮の有効化が、「2.2s」から「0.67s」になった。
「改善できる項目」の比較
 
 
比較的簡単に対策を施すことができ、且つ、効果も出た。
 
 
 
 PageSpeed Insights 【Webサイトの高速化】 対策
 
 
以上。
(2019.11.23)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください