ブログがどのくらいのスピードで読み込めるのか、代表的な計測サイトがGTmetrixです。このGTMetixの解説します。
ついに1秒以内を達成
ここ2週間ほど、ずーっとブログのチューニングをやってました。一番役にたったのがGTmetrixでの計測とアドバイスでした。代表的なスコアであるPageSpeed ScoreをAランクにするようにチューニングを進めると、ある日突然Page Load Timeが1秒以内を記録するようになってびっくり。先ほど当ブログのトップページを計測したのが下記の画像(2016年5月23日)。まだPageSpeed ScoreもYSlow Scoreも100%になっていませんが、現在の環境ではこれ以上のチューニングは修正コストが合わないのであきらめることとし、どのようにこの数字を達成するのしたのかを覚えている間に記事にしておきたいと思います。
当記事の読み進め方
当記事は、GTmetrixで計測した場合に表示されるメッセージ(警告?)とその解決法について記載しています。メッセージは内容をクリアすることで表示に残らないものがあり、これがすべてではないかもしれません。非常に項目が多いのでPC(パソコン)やタブレットで読むことをおすすめします。また右のサイドバーには途中インデックスが表示されますので、ツールとしてお使いください。
PageSpeed Score項目メッセージと解決法詳細(五十音順)
Avoid a character set in the meta tag
メタタグのみの文字セットは使わない。IE8の場合バグのために先行読み込みが無効となるため。ただし、http-equivは可能。
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Avoid bad requests
Avoid CSS @import
Avoid landing page redirects
Combine images using CSS sprites
Defer parsing of JavaScript
Enable gzip compression
Enable Keep-Alive
Inline small CSS
Inline small JavaScript
Leverage browser caching
Minify CSS
Minify HTML
Minify JavaScript
外部提供されているJavascriptには、xxxx.min.js等のあらかじめコンパクト化されているJavascriptファイルがありこちらを使用するようにしましょう。
また、サイトにClourFlareを導入し、Minifyを有効にすると解決されます(※3)
Minimize redirects
Minimize request size
Optimize images
Optimize the order of styles and scripts
Prefer asynchronous resources
Put CSS in the document head
Remove query strings from static resources
※プラグイン内でも一部クエリストリング付きでダイレクトにリンクされている場合もありますが、これを修正するにはプラグインコードを直に変更しなければなりません。
functions.phpに以下のコードを記入する
function vc_remove_wp_ver_css_js( $src ) { if ( strpos( $src, 'ver=' ) ) $src = remove_query_arg( 'ver', $src ); return $src; } add_filter( 'style_loader_src', 'vc_remove_wp_ver_css_js', 9999 ); add_filter( 'script_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
1.SyntaxHighlighterプラグインは、Javascriptでテーマのcssをクエリパラメータ付きで吐き出しています。syntaxhighlighter.phpからadd_query_argをキーワードにして検索し、この関数を削除してください。
2.Jetpackプラグイン導入している場合もgravatarホバーカード機能を使用すると同様にcssをクエリパラメータ付きで吐き出していますが、こちらは、gravatarホバーカード機能を無効にして対処します。
Serve scaled images
Serve resources from a consistent URL
Specify a cache validator
.htaccessに記入してあるCache-Control max-ageの要素にpublic指定されていることを確認する。※Leverage browser cachingと同様
<IfModule mod_headers.c> # Cache-Control max-age使用例 1 month <Files ~ ".(jpg|jpeg|png|gif|ico)$"> Header set Cache-Control "max-age=2592000, public"> </Files> # max-age 1 days <Files ~ ".(css|js|html|gz)$"> Header set Cache-Control "max-age=86400, public" </Files> </IfModule>
Specify a Vary: Accept-Encoding header
.htaccessのAccept-Encoding header記述を再確認する
# Vary: Accept-Encoding header <IfModule mod_deflate.c> Header append Vary Accept-Encoding env=!dont-vary </IfModule>
Specify a character set early
UTF8の場合、以下のコードを.htaccessの先頭に記述してください。
AddDefaultCharset utf-8
Specify image dimensions
YSlow Score項目メッセージと解決法詳細(五十音順)
Add Expires headers
Avoid AlphaImageLoader filter
Avoid CSS expressions
Avoid empty src or href
Avoid HTTP 404 (Not Found) error
Avoid URL redirects
Configure entity tags (ETags)
Compress components with gzip
Do not scale images in HTML
Make AJAX cacheable
Make favicon small and cacheable
Make fewer HTTP requests
HTTPリクエスト数は相対的なもので、htmlが最適化されているのであればあえて気にする必要のないメッセージで、自然にメッセージは表示されなくなります。
Make JavaScript and CSS external
外部ファイル化するとキャッシュすることができ、読み込み速度が上がります。小さなものはインライン化してHTTPリクエスト数を抑えることができますが、大きなサイズのものは外部ファイル化してキャッシュによるスピードアップするようにします。
これを両立するのがMififyプログラムの導入やAutopizationプラグイン(※4)でこちらの方法をお勧めします。
Minify JavaScript and CSS
サイトにClourFlareを導入し、Minifyを有効にすると解決されます(※3)
Put CSS at the top
Put JavaScript at bottom
Reduce cookie size
Reduce DNS lookups
参照する外部ドメインの数を減らすか、以下のようにプリフェッチするようにします。
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com"> <link rel="dns-prefetch" href="//googleads.g.doubleclick.net"> <link rel="dns-prefetch" href="//www.gstatic.com">
Reduce the number of DOM elements
Remove duplicate JavaScript and CSS
Use a Content Delivery Network (CDN)
Use cookie-free domains
Use GET for AJAX requests
まとめ
ここで紹介した解決法にしたがって1つ1つのメッセージ内容をクリアすると誰でも1秒以内の読込速度は達成できると思います。経験上、PageSpeed Scoreが90%で約3秒以内、95%以上で1秒前後が達成できるはずです。ただ、すべてのメッセージを手動でクリアしていくことは困難で、ここで紹介したW3-Total-CacheとEWWW Image Optimizer、Autoptimizeの各プラグインを導入し、CloudFlareを採用するだけでほとんどのメッセージ内容がクリアされ、スコアは92%~94%は達成可能です。
最も早くチューニングを終える手順として下記の順番で実践することをおすすめいたします。
- W3-Total-Cacheプラグインの導入および設定
- CloudFlareの採用
- EWWW Image Optimizerプラグインの導入および設定
- Autoptimizeプラグインの導入および設定
をやってから、
- .htaccessの先頭に、AddDefaultCharset utf-8を挿入
- 画像の最適化(スケーリング表示をなくす、幅・高さの明示、リンク切れを修正)
- 使用するプラグインの数を絞る
- CSS,Javascriptの読込順番の最適化
- グーグルカスタマイズ検索の排除
の作業をするという順番がベストと思います。グーグルカスタマイズ検索の件は、筆者固有の問題かもしれませんが、これをつけるかどうかでPageSpeed Scoreが97%から99%で跳ね上がる経験をしております。実践してみてください。
なお、この記事に関するコメントなどあればぜひ参考意見として頂戴できれば幸いです。
この記事へのコメントはありません。