ついに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
実際に存在しない画像等のURLやリンク切れをおこしているページ参照等を使用すると表示されます。
問題となっているＵＲＬの修正をおこなってください。
Avoid CSS @import
@importはcss内で使わない
CSSファイル内で他のCSSファイルを取り込む@importステートメントを使用すると表示されます。wordpressのテンプレート自体に含まれる場合もあるので、この場合はテンプレートの変更も含めて検討してください。
Avoid landing page redirects
ランディングページのリダイレクトを避ける
指定したランディングページでリダイレクトされている場合は、これを省くようにする。
Combine images using CSS sprites
小さな画像やアイコンを多用する場合は、複数の小さな画像やアイコンを一つの画像にまとめられるCSSスプライト画像を利用してください。CSSスプライトをGoogleで検索してみる。
Defer parsing of JavaScript
ヘッダーにおかれているJavascriptの解析のため、表示（レンダリング）がブロックされている場合に生じるメッセージ
問題となっているJavascriptをフッターに移動するか、
Enable gzip compression
htmlを圧縮（gzip)対応していない場合に生じるメッセージ
サイトにClourFlareを導入し、Minifyを有効にすると解決されます(※3）
Enable Keep-Alive
Keep-Aliveが無効となっている場合に生じるメッセージ
Keep-Aliveはネットワーク接続を有効に継続させるために定期的に行われる通信で、通常のレンタルサーバーではEnableとなっており気にする必要はありません。
Inline small CSS
ちいさなCSSがファイルとして取り込まれている場合に生じるメッセージ
ファイルとして独立させるのではなく、ヘッダー部に直接記述することが推奨される。あるいはこれらの小さなCSS,Javascriptをまとめて1本化するプラグインに利用で避けることができます(※4）
Inline small JavaScript
これも前項と同じでJavascriptを対象とするメッセージ
対応はCSSと同じで、ヘッダー部に直接記述する。あるいはこれらの小さなCSS,Javascriptをまとめて1本化するプラグインに利用で避けることができます(※4）
Leverage browser caching
ブラウザのキャッシュ指定がないまたは不十分な場合に生じるメッセージ
ブラウザのキャッシュ設定の状態を再評価をします。キャッシュ設定が機能していないリソース（画像やファイルのURL等）が表示されます。W3-Total-Cacheのブラウザキャッシュ設定をすると解決します(※１）
Minify CSS
使われているCSSからコメントや改行を取り除きコンパクト化するように推奨するメッセージ
サイトにClourFlareを導入し、Minifyを有効にすると解決されます(※3）
Minify HTML
使われているHTMLからコメントや改行を取り除きコンパクト化するように推奨するメッセージ
コンパクト化したHTMLは視認性に劣り、メンテナンス性を損なう恐れがあります。あえて無視することも視野にいれておくべきです。
Minify JavaScript
使われているJavascriptからコメントや改行を取り除きコンパクト化するように推奨するメッセージ
外部提供されているJavascriptには、xxxx.min.js等のあらかじめコンパクト化されているJavascriptファイルがありこちらを使用するようにしましょう。
また、サイトにClourFlareを導入し、Minifyを有効にすると解決されます(※3）
Minimize redirects
リダイレクトは使用されている場合に生じるメッセージ
リダイレクトは余分な通信を挟むため、なるべく使用すべきではありません。
Minimize request size
不要なクッキーなどあるために対象物を要求するリクエストヘッダーが大きすぎる場合に生じるメッセージ
画像等はクッキーが不要なため、クッキーレスのドメインを使用するサーバーに移転する。Use cookie-free domainsメッセージと対応は同様。
Optimize images
画像ファイルが最適化（圧縮）されていません。
Jpg画像はロスレス圧縮(Lossless Compresion)で品質を落とさずにサイズの圧縮を図ります。PNG画像はサイズ優先（lossy Compresion)で圧縮をします。後からこれらのファイルを圧縮するのは非常に手間がかかります。EWWW Image Optimizerプラグインを導入し、wordpressにアップロード時に自動で圧縮するのが有効です(※2)
Optimize the order of styles and scripts
CSSファイルは連続読み込みが可能なため、途中にあるJavascriptで中断されている場合に生じるメッセージ
CSSとJavascritpの読み込み順番を最適化し、CSSはヘッダーの頭でまとめて読み込むようにする。
Prefer asynchronous resources
javascriptはなるべく非同期（async)に対応させる
javascriptは表示（レンダリング）をブロックし表示速度の低下を招きます。javascriptは非同期（async)に対応させるかフッターに移動し遅延読み込みを行います。
Put CSS in the document head
前項のOptimize the order of styles and scriptsと同様。
CSSとJavascritpの読み込み順番を最適化し、CSSはヘッダーの頭でまとめて読み込むようにする。
Remove query strings from static resources
CSSやJSファイル等ファイルのバージョンを示すクエリストリング付き（？～）でファイルがリンクされている場合に生じるメッセージ。
※プラグイン内でも一部クエリストリング付きでダイレクトにリンクされている場合もありますが、これを修正するにはプラグインコードを直に変更しなければなりません。
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 );
（例外）
１．SyntaxHighlighterプラグインは、Javascriptでテーマのcssをクエリパラメータ付きで吐き出しています。syntaxhighlighter.phpからadd_query_argをキーワードにして検索し、この関数を削除してください。
２．Jetpackプラグイン導入している場合もgravatarホバーカード機能を使用すると同様にcssをクエリパラメータ付きで吐き出していますが、こちらは、gravatarホバーカード機能を無効にして対処します。
Serve scaled images
大きな画像が縮小されてスケーリング表示されている場合に生じるメッセージ
事前に最適なサイズの画像を準備し、等倍で表示するようにします。
Serve resources from a consistent URL
同じリソースが別のURLで参照されている場合に生じるメッセージ
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
gzip圧縮未対応のブラウザで表示不具合が発生する可能性がある場合のメッセージ（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
.htaccessファイルの使用するコードを指定しなければなりません。
UTF8の場合、以下のコードを.htaccessの先頭に記述してください。
AddDefaultCharset utf-8
Specify image dimensions
画像を使用する際に幅や高さが指定されていない場合に生じるメッセージ
<img>タグには、必ずwidthとheightを指定するようにします。
YSlow Score項目メッセージと解決法詳細（五十音順）
Add Expires headers
ブラウザのキャッシュ指定にリソースの有効期限がないまたは不十分な場合に生じるメッセージ
(対処は、PageSpeed ScoreのLeverage browser caching項と同じです)
Avoid AlphaImageLoader filter
IE8の独自フィルターのAlphaImageLoader Filterの使用を避ける
AlphaImageLoader Filterは、オブジェクトと背景の間に画像を配置するフィルターで、この間は表示がブロックされますので、AlphaImageLoader Filterは使わないように推奨するメッセージ
Avoid CSS expressions
CSS expressionsの使用を避ける
CSS expressionsはIE独自の仕様で、CSS内容でJavascriptを動作させようというものです。エラーや動作不良の原因になりやすく使わないようにしましょう。
Avoid empty src or href
srcやhrefの指定がないタグが使われている場合に生じるメッセージ
たとえsrcやhrefがなくても、前項のhttpリクエストが発生するのでこれを避けるためにも無駄なこれらのタグを排除してください。
Avoid HTTP 404 (Not Found) error
HTTP 404 エラーを避ける
404エラーとなっているurlを突き止めこれを排除します。
Avoid URL redirects
URLリダイレクトは避けてください。
原因となっているURLリダイレクトを排除する。
Configure entity tags (ETags)
ETagsはファイルが変更されていないか同一性を識別するためのフラグで、このETagsを使用するように推奨するメッセージ
W3-Total-Cache導入し、ETagsを設定すると解決します。(※１）
Compress components with gzip
ソーシャルボタンや広告等外部も含めてgzipに対応していないリソース（コンポーネント）が使われている場合に生じるメッセージ
表示されているリソースを確認し別のリソースに変更する等の対応をおこないます。
Do not scale images in HTML
画像のスケール表示がされている場合に生じるメッセージ
Serve scaled imagesと同じで、最適化されたサイズの画像を用いることで解消されます。
Make AJAX cacheable
AJAXをキャッシュ可能にする
通常は表示されません。jqueryにAJAXフレームワークが使われていますがキャッシュには対応しています。
Make favicon small and cacheable
ウェブサイトにつかわれるファビコンのサイズの最適化およびキャッシュ可能にするメッセージ
ファビコンはなるべく小さなものを使用し、.htaccessにてファビコン(icoファイル）もキャッシュ可能に設定する。
Make fewer HTTP requests
HTTPリクエスト数を少なくしてください。
ページ表示は複数のhttpリクエストにより構成されます。httpリクエストは読み込むファイルの数で、外部url参照、cssファイル、javascriptファイル、画像リソース等々はすべて1ファイル＝1リクエストとカウントされます。
HTTPリクエスト数は相対的なもので、htmlが最適化されているのであればあえて気にする必要のないメッセージで、自然にメッセージは表示されなくなります。
Make JavaScript and CSS external
JavascriptとCSSファイルを外部ファイル化するように推奨するメッセージ
外部ファイル化するとキャッシュすることができ、読み込み速度が上がります。小さなものはインライン化してHTTPリクエスト数を抑えることができますが、大きなサイズのものは外部ファイル化してキャッシュによるスピードアップするようにします。
これを両立するのがMififyプログラムの導入やAutopizationプラグイン（※４）でこちらの方法をお勧めします。
Minify JavaScript and CSS
サイトにClourFlareを導入し、Minifyを有効にすると解決されます(※3）Put CSS at the top
HTML内にcssファイルが散在して取り込まれている場合に生じるメッセージ
メッセージにしたがって、CSSファイルはヘッダー内のトップに配置します。
Put JavaScript at bottom
Javascriptを</body>の直前に読み込むことを推奨するメッセージ
表示（レンダリング）ブロックするJavaScriptはなるべくhtmlの最後で読むようにする。または非同期（Async)や遅延(defer)に対応させます。
Reduce cookie size
クッキーのサイズを減らす
Minimize Request 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
DOM elementは、１つ１つのhtmlタグ（img,li,div,p等など）のここの要素のことでこれが複雑すぎる場合に生じるメッセージ
DOM elementを少なくし、htmlをシンプルにします。
Remove duplicate JavaScript and CSS
おなじJavascriptファイルやCSSファイルが複数回取り込まれている場合に生じるメッセージ
ダブっているファイルを突き止め、どちらかを排除します。
Use a Content Delivery Network (CDN)
CDNを使っていない場合に表示するメッセージ。
サイトにClourFlareを導入すると解決されます(※3）
Use cookie-free domains
cookie-freeドメインを使うように推奨するメッセージ
画像ファイル等はクッキーを使用する必要がないので、専用のサブドメインを用意しそちらから読み込むようにします。
Use GET for AJAX requests
ヘッダおよびデータを照合する場合、GETを使うよう推奨するメッセージ
なるべくPOSTリクエストよりもGETリクエストを使うようにしましょう。
※１：W3-Total-Cacheプラグイン導入はこちらの記事を参照
※２：EWWW Image Optimizerプラグイﾝの導入はこちらの記事を参照
※３：CloudFlareの導入はこちらの記事を参照
※４：Mififyプログラムの導入やAutopizationプラグインを導入するはこちらの記事を参照(作成中）
まとめ
ここで紹介した解決法にしたがって１つ１つのメッセージ内容をクリアすると誰でも１秒以内の読込速度は達成できると思います。経験上、PageSpeed Scoreが90%で約３秒以内、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の読込順番の最適化
- グーグルカスタマイズ検索の排除
