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

今まで、「PageSpeed Insights」でサイトのスピードを測定し対策を施して来たが、新たに「GTmetrix」という、WEBサイトの表示速度チェックツールを使ってみた。

URLを入力すれば、サイトの表示速度と改善点が表示されるが、スコアが「Google」と「Yahoo」の2つで表示されるのが特徴である。

又、２つのサイトを比較することもできる。

「GTmetrix」での測定結果。
Googleの「Page Speed」スコアは、「PageSpeed Insights」の値とは異なり【 ％ 】表示される。

指摘事項を見ると、まず最初に「画像サイズの縮小」との指摘を受ける。

詳細を見ると、画像名と現行のサイズから改善すべきサイズまで、具体的な指示が表示される。

指示通りに、該当画像のサイズを変更する。

再度測定すると、これだけでスコアが「C（75%）」から「B（80%）」に、一気に5％も改善された。

次に、「ブラウザキャッシュの有効化」の指摘を受ける。

詳細を見ると、【expiration not specified】の行が多数ある。

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%だけ改善された。

詳細を見ると、【expiration not specified】が１行（favicon.ico）だけ残っている。

【Expires】が表示されないので、ブラウザキャッシュが有効になっているのか心配になる。

http {
    server_tokens off;
	～　省略　～
    gzip  on;
	～　省略　～
# ブラウザキャッシュの設定
expires 7d;
	～　省略　～
   server_names_hash_bucket_size 128;
	～　省略　～
    include /etc/nginx/conf.d/*.conf;
}

【Expires】だけでなく、【Cache-Control: max-age】も表示されるようになる。

さらに、Google Chromeのデベロッパーツールを起動し、「Network」で確認してみると、【Cache-Control: max-age】がヘッダーに埋め込まれている。

「GTmetrix」での測定結果は、スコアが「B（81%）」から「B（82%）」に、さらに1%改善された。

「Leverage browser caching」は、「C（71%）」になった。

詳細からは【expiration not specified】の行は消えるも、Google関連の行だけが残った。

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