Google PageSpeed Insightsの「ブラウザのキャッシュを活用する」対策を行います

2017年3月12日ブログ運営

どうやら当サイトにはモバイルユーザーが多いようです。

そのため以下記事でテーマを変更したのですが、ここではもう少ししっかり対策をしていこうと思います

Google PageSpeed Insightsで問題点を把握する

Google Pagespeed Insightを利用すると、サイトのパフォーマンスと問題点がわかるそうなので、試してみました。

PageSpeed Insightsのモバイル画面(対策前)

モバイル65点…

PageSpeed InsightsのPC画面(対策前)

パソコン78点…

Google PageSpeed Insightsでは、「修正が必要」なレベルの問題と、「修正を考慮」なレベルの問題に分かれています。上記ではひとまず「修正が必要」な箇所だけキャプチャしました。

「ブラウザのキャッシュを活用する」を対策する

モバイル, PC両者に共通する問題点は「ブラウザのキャッシュを活用する」みたいですから、まずこの対策を行うことにしました。Googleさんの推奨する修正方法を見てみます。

推奨される解決方法

サーバーでブラウザのキャッシュを有効にします。静的なリソースのキャッシュの有効期間は 1 週間以上にしてください。広告やウィジェットなどのサードパーティ リソースの場合は、キャッシュの有効期間を 1 日以上にします。キャッシュ可能なすべてのリソースで、次のような設定をおすすめします:

  • Expires を 1 週間以上、できれば最大で 1 年間先に設定します(より広くサポートされているため、Cache-Control: max-age よりも Expires をおすすめします)。RFC のガイドラインに違反するので、1 年以上先には設定しないでください。
  • リソースの変更時期が正確にわかっている場合は、短い有効期間を設定してもかまいません。ただし、すぐに変更される可能性があるものの、変更時期がわからない場合は、長い有効期間を設定して、URL フィンガープリント(後述)を使用してください。

https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

ふんふん…。サーバーにキャッシュの設定をするのを推奨しているみたいですね。

Luxeritasテーマ同梱されていた.htaccessを追加する

そこでサーバーの.htaccessを記載しようと思いググってみたのですが、どうやらLuxeritasに.htaceessが同梱されていたようです。

Luxeritasの.htaccess

内容をみてみると、まさに今から行おうと思っていたことが記載されていました。


#------------------------------------------------------------------------
#  * Luxeritas WordPress Theme - http://thk.kanzae.net/wpthk/
#
#    Add these lines to your .htaccess to speed boost
#
# Do not overwrite/replace with your .htaccess, but ADD these lines!
#------------------------------------------------------------------------

# To ignore ETags(Configure entity tags)

	Header unset ETag

FileETag None

# Enable Keep-Alive

	Header set Connection keep-alive


# Add MIME Type 

	AddType text/cache-manifest .appcache
	AddType image/x-icon .ico
	AddType image/svg+xml .svg
	AddType application/x-font-ttf .ttf
	AddType application/x-font-woff .woff
	AddType application/x-font-woff2 .woff2
	AddType application/x-font-opentype .otf
	AddType application/vnd.ms-fontobject .eot


# For proxy cache (will cache images and fonts)

	
		Header set Cache-Control "max-age=604800, public"
	
	# To avoid proxy servers to distibute incorrect contents
	Header append Vary Accept-Encoding env=!dont-vary


# Browser Cache Setting


	ExpiresActive On

	# Expire cache (Set as 1 sec)
	ExpiresDefault "access plus 1 seconds"

	# For each MIME Type
	ExpiresByType text/css "access plus 1 weeks"
	ExpiresByType text/js "access plus 1 weeks"
	ExpiresByType text/javascript "access plus 1 weeks"
	ExpiresByType image/gif "access plus 1 weeks"
	ExpiresByType image/jpeg "access plus 1 weeks"
	ExpiresByType image/png "access plus 1 weeks"
	ExpiresByType image/svg+xml "access plus 1 year"
	ExpiresByType application/pdf "access plus 1 weeks"
	ExpiresByType application/javascript "access plus 1 weeks"
	ExpiresByType application/x-javascript "access plus 1 weeks"
	ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
	ExpiresByType application/x-font-ttf "access plus 1 year"
	ExpiresByType application/x-font-woff "access plus 1 year"
	ExpiresByType application/x-font-woff2 "access plus 1 year"
	ExpiresByType application/x-font-opentype "access plus 1 year"
	ExpiresByType application/vnd.ms-fontobject "access plus 1 year"



# Gzip Compresssion

	SetOutputFilter DEFLATE

	# For Browser versions
	BrowserMatch ^Mozilla/4\.0[678] no-gzip
	BrowserMatch ^Mozilla/4 gzip-only-text/html
	BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

	# To avoid re-compression for post-compressed contents such as images
	SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary

	AddOutputFilterByType DEFLATE text/plain
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/xml
	AddOutputFilterByType DEFLATE text/css
	AddOutputFilterByType DEFLATE text/js
	AddOutputFilterByType DEFLATE image/svg+xml
	AddOutputFilterByType DEFLATE application/xml
	AddOutputFilterByType DEFLATE application/xhtml+xml
	AddOutputFilterByType DEFLATE application/rss+xml
	AddOutputFilterByType DEFLATE application/atom_xml
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/x-javascript
	AddOutputFilterByType DEFLATE application/x-httpd-php
	AddOutputFilterByType DEFLATE application/x-font-ttf
	#AddOutputFilterByType DEFLATE application/x-font-woff
	#AddOutputFilterByType DEFLATE application/x-font-woff2
	AddOutputFilterByType DEFLATE application/x-font-opentype
	#AddOutputFilterByType DEFLATE application/vnd.ms-fontobject


基本的なキャッシュ(CSSやjavascriptや画像等)は1週間保持し、Webフォントは1年間保持するという設定が書かれていますね!

せっかくなので丸パクリします笑

何故Keep-Aliveの設定が書かれているのかよくわからなかったのですが、全体的に汎用的な内容でしたので、全てそのままサーバーの.htaccessに追記しました(上書きではない。上書きしてはいけない)。

htaccess_enの方が英語で記載されておりASCIIで保存することができるので、htaccess_enの方をコピペしておけばいいと思います。

PageSpeed Insightsを再チェックしてみる

PageSpeed Insightsのモバイル画面(対策後)

65点が75点にあがりましたね、やっふー(∩´∀`)∩

PageSpeed InsightsのPC画面(対策後)

パソコンは78点から87点にアップ。

「ブラウザのキャッシュを活用する」という修正提案がちゃんと消えましたね!

 

あとはモバイルの方で要修正になっている「スクロールせずに見えるコンテンツのレンダリングをブロックしているJavascript/CSSを排除する」の修正をしなきゃいけなさそうですね~…。

Last-Modifiedは設定しなくていいのかな?

Googleさんのページにこんなことが記載されていました。

キャッシュできるすべてのリソースで、Expires と Cache-Control: max-age のいずれか、Last-Modified と ETag のいずれかを指定することが大切です。Expires と Cache-Control: max-age の両方、または Last-Modified と ETag の両方を指定すると冗長になります。

https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

Last-ModifiedかETagのいずれかを指定してねって言ってますね。

先の.htaccessでは、HTTPリクエストの回数を減らすためにETagを無効化しているみたいですが… Last-Modifiedの設定はしなくていいのかな・・・?

あまり詳しくないのでとりあえずLuxeritasの同梱通りにしておこうと思います!笑