読込速度1秒以内を目指して！　計測サイトGTmetrixの表示メッセージと解決のし方

ブログがどのくらいのスピードで読み込めるのか、代表的な計測サイトがGTmetrixです。このGTMetixの解説します。

Initializing...

ついに1秒以内を達成

ここ2週間ほど、ずーっとブログのチューニングをやってました。一番役にたったのがGTmetrixでの計測とアドバイスでした。代表的なスコアであるPageSpeed ScoreをAランクにするようにチューニングを進めると、ある日突然Page Load Timeが1秒以内を記録するようになってびっくり。先ほど当ブログのトップページを計測したのが下記の画像（2016年5月23日）。まだPageSpeed ScoreもYSlow Scoreも100％になっていませんが、現在の環境ではこれ以上のチューニングは修正コストが合わないのであきらめることとし、どのようにこの数字を達成するのしたのかを覚えている間に記事にしておきたいと思います。
blogspeed1

当記事の読み進め方

当記事は、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

 画像を使用する際に幅や高さが指定されていない場合に生じるメッセージ
 &lt;img&gt;タグには、必ず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を&lt;/body&gt;の直前に読み込むことを推奨するメッセージ
 表示（レンダリング）ブロックする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％は達成可能です。

最も早くチューニングを終える手順として下記の順番で実践することをおすすめいたします。

  1. W3-Total-Cacheプラグインの導入および設定
  2. CloudFlareの採用
  3. EWWW Image Optimizerプラグインの導入および設定
  4. Autoptimizeプラグインの導入および設定

をやってから、

  1. .htaccessの先頭に、AddDefaultCharset utf-8を挿入
  2. 画像の最適化（スケーリング表示をなくす、幅・高さの明示、リンク切れを修正）
  3. 使用するプラグインの数を絞る
  4. CSS,Javascriptの読込順番の最適化
  5. グーグルカスタマイズ検索の排除

の作業をするという順番がベストと思います。グーグルカスタマイズ検索の件は、筆者固有の問題かもしれませんが、これをつけるかどうかでPageSpeed Scoreが97％から99％で跳ね上がる経験をしております。実践してみてください。

なお、この記事に関するコメントなどあればぜひ参考意見として頂戴できれば幸いです。

コメント

タイトルとURLをコピーしました