GTmetrix 測定での「Leverage browser caching」への対応

Webサーバー サイトの運用
Webサイトの高速化
その-6 「Leverage browser caching」

Nginx ブラウザキャッシュの有効化
 
「GTmetrix」という、WEBサイトの表示速度チェックツールを使ってみると、6「PageSpeed Insights」とは異なった視点で、具体的な改善点が指摘される。
 
詳細を見ると、【expiration not specified】の行が多数ある
「Leverage browser caching」での【expiration not specified】。
 
以下、nginxで「Leverage browser caching」に対応した記録。
 
 

 

スポンサー リンク

 

 
 
 
 
 
1. GTmetrixでのスピード計測
 
今まで、「PageSpeed Insights」でサイトのスピードを測定し対策を施して来たが、新たに「GTmetrix」という、WEBサイトの表示速度チェックツールを使ってみた。
「GTmetrix」という、WEBサイトの表示速度チェックツール
 
URLを入力すれば、サイトの表示速度と改善点が表示されるが、スコアが「Google」と「Yahoo」の2つで表示されるのが特徴である。
URLを入力すれば、サイトの表示速度と改善点が表示されるが、スコアが「Google」と「Yahoo」の2つで表示されるのが特徴である
 
又、2つのサイトを比較することもできる。
2つのサイトを比較することもできる
 
 
 
2. Serve scaled images
 
「GTmetrix」での測定結果。
Googleの「Page Speed」スコアは、「PageSpeed Insights」の値とは異なり【 % 】表示される。
Googleの「Page Speed」スコアは、「PageSpeed Insights」の値とは異なり【 % 】表示される
 
指摘事項を見ると、まず最初に「画像サイズの縮小」との指摘を受ける。
まず最初に、「画像サイズの縮小」との指摘を受ける
 
詳細を見ると、画像名と現行のサイズから改善すべきサイズまで、具体的な指示が表示される。
詳細を見ると、画像名と現行のサイズから改善すべきサイズまで、具体的な指示が表示される
 
指示通りに、該当画像のサイズを変更する。
指示通りに、該当画像のサイズを変更する
 
再度測定すると、これだけでスコアが「C(75%)」から「B(80%)」に、一気に5%も改善された。
再度測定すると、スコアが「C(75%)」から「B(80%)」に改善された
 
「GTmetrix」は、「PageSpeed Insights」とは異なった視点で、具体的な改善点が指摘されるので、サイトの速度改善には有用なツールであると感じる。
 
 
 
3. Leverage browser caching
 
次に、「ブラウザキャッシュの有効化」の指摘を受ける。
次に、「ブラウザキャッシュの有効化」の指摘を受ける
 
 
「ブラウザキャッシュ」とは
一度アクセスしたサイトのデータ(画像やHTMLなど)を、ブラウザに一時的に保管(キャッシュ)しておき、次に同じページにアクセスした時、キャッシュに保存されたデータを参照することで、ページの表示を速くする仕組み。
 
 
詳細を見ると、【expiration not specified】の行が多数ある。
詳細を見ると、【expiration not specified】の行が多数ある
 
 
【expiration not specified】とは
ブラウザキャッシュは、コンピュータ内に保存されているとはいうものの、キャッシュファイルが新しいかどうかをWebサーバに問合せており、WEBサーバーのデータがキャッシュファイルよりも新しければ、WEBサーバーからデータを取得し、そうでなければキャッシュファイルを読み込むようになっている。
ページに「Expiresヘッダー」を付けることで、Webサーバーに新しいファイルが存在しているかどうかを確認せず、ブラウザにキャッシュ済みのファイルを強制的に適用することが出来る。
 
 
Nginxでの、ブラウザキャッシングの有効化。
キャッシュできるすべてのリソースに、
・Expires と Cache-Control: max-age のいずれか
・Last-Modified と ETag のいずれか
を指定する。
 
 
 
4. /conf.d/ドメイン名.conf の編集
 
arakan60.confの場合。
sudo nano /etc/nginx/conf.d/arakan60.conf
 
「server」ブロックに、ブラウザキャッシュを設定した例。
server {
	listen 443 ssl;
	server_name arakan60.com;
	root /home/yaopi/www/wordpress;
	index index.htm index.php;
	~ 省略 ~
	#ブラウザキャッシュの設定
	location ~ .*\.(css|js|ico|gif|jpeg|jpg|webp|png|svg|eot|otf|woff|woff2|ttf|ogg) {
		access_log off; #アクセスログをOFF
		expires 7d; #有効期限
	}
 
ドメイン名.conf にブラウザキャッシュを設定した結果、スコアが「B(80%)」から「B(81%)」に、1%だけ改善された。
ドメイン名.conf にブラウザキャッシュを設定した結果、スコアが「B(80%)」から「B(81%)」に、1%改善された
 
詳細を見ると、【expiration not specified】が1行(favicon.ico)だけ残っている。
【expiration not specified】の行が1行(favicon.ico)だけ残っている
 
コマンドで、ブラウザキャッシュが有効になっているかを確認してみる。(URLを指定する。)
curl -I -H 'Accept-Encoding: gzip,deflate' https://arakan60.com
 
【Expires】が表示されないので、ブラウザキャッシュが有効になっているのか心配になる。
ブラウザキャッシュが有効になっているか
 
 
 
5. nginx.conf の編集
 
そこで、nginx.conf にも【expires】を設定してみた。
 
nginx.conf の編集。
sudo nano /etc/nginx/nginx.conf
 
「http」ブロックに、【expires】を設定した例。
http {
    server_tokens off;
	~ 省略 ~
    gzip  on;
	~ 省略 ~
# ブラウザキャッシュの設定
expires 7d;
	~ 省略 ~
   server_names_hash_bucket_size 128;
	~ 省略 ~
    include /etc/nginx/conf.d/*.conf;
}
 
再び、コマンドで確認。
curl -I -H 'Accept-Encoding: gzip,deflate' https://arakan60.com
 
【Expires】だけでなく、【Cache-Control: max-age】も表示されるようになる。
【Expires】だけでなく、【Cache-Control: max-age】も表示される
 
さらに、Google Chromeのデベロッパーツールを起動し、「Network」で確認してみると、【Cache-Control: max-age】がヘッダーに埋め込まれている。
Google Chromeのデベロッパーツールを起動し、「Network」でも確認してみると、【Cache-Control: max-age】がヘッダーに埋め込まれている
 
「GTmetrix」での測定結果は、スコアが「B(81%)」から「B(82%)」に、さらに1%改善された。
「GTmetrix」での測定結果は、スコアが「B(81%)」から「B(82%)」に、さらに1%改善された
 
「Leverage browser caching」は、「C(71%)」になった。
「Leverage browser caching」は、「C(71%)」になった
 
詳細からは【expiration not specified】の行は消えるも、Google関連の行だけが残った。
詳細からは【expiration not specified】の行は消えたが、Google関連の行だけが残った。
 
 
ブラウザキャッシュとGoogle Analytics。

「ブラウザのキャッシュを利用する」とGoogle Analyticsについて
「ブラウザのキャッシュを利用する」警告の2番目に一般的な理由は、Google Analyticsです。
Google独自のスクリプトであるため、皮肉なことです。
問題は、以下のスクリーンショットに示すように、 アセットに非常に短い2時間のキャッシュ時間が設定されていることです。
理由はおそらく、Google自身が何らかの理由で修正を行った場合にすべてのユーザーができるだけ早くその修正版を取得することでしょう。
ただし、自身のサーバー上でGoogle Analyticsスクリプトをホストするという処理方法があります。これはGoogleではサポートされていませんので、ご注意ください。

 
 
 
 PageSpeed Insights 【Webサイトの高速化】 対策
 
 
以上。
(2019.12.17)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

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

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