サイトアイコン アラコキからの Raspberry Pi 電子工作

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

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

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

 

スポンサー リンク

 

 
 
以下、Webサイトのスピードアップの一つである「テキスト圧縮」を行うべく、「nginx」で gzipを有効化した記録。
 
 
 
 
 
1. Search Consoleでの「速度」推移
 
「詳細」を見てみると、「低速」のURLが 224 もある。
 
クリックすると、具体的なURLのパターンが表示される。
 
さらにクリックすると、同じパターンの全てのURLが表示され、『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」と極めて遅い。
 
ラボデータの値。すべての項目が「」の赤色になっている。
 
改善できる項目。この中に「テキスト圧縮の有効化」が 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**
 
 
レスポンスHearderに、「Content-Encoding: gzip」があればOK.
 
GZIP圧縮確認ツール」というサイトでも確認が出来る。
 
「GZIP圧縮確認ツール」での確認結果。約70%圧縮されている。
 
 
 
5. テキスト圧縮の効果
 
サイトのトップページでの評価スコア。「14」ポイントと少し上がった。
 
ラボデータの値。速度インデックス「」の赤色以外、すべての項目ががオレンジの「」になった。
 
改善できる項目。「テキスト圧縮の有効化」がオレンジの「」になった。
 
「評価スコア」の比較。「5」ポイント改善される。
 
「ラボデータの値」の比較。First Paint が「4.4秒」から「1.4秒」になった。
 
「改善できる項目」の比較。テキスト圧縮の有効化が、「2.2s」から「0.67s」になった。
 
 
比較的簡単に対策を施すことができ、且つ、効果も出た。
 
 
 
 PageSpeed Insights 【Webサイトの高速化】 対策
 
 
以上。
(2019.11.23)
 

 

スポンサー リンク

 

             

 

 

 
モバイルバージョンを終了