GTmetrixのスコアを限界まで上げたいならCloudFlareは使うな #Web

追記

CloudFlareの更新により、この情報は古くなりました。
最新の検証結果はこちらになります。

GTmetrixのスコアを限界まで上げたいならCloudFlareを使おう - Qiita

注意

本投稿は、CloudFlareの導入により発生する問題について言及しています。
本投稿には、GTmetrixの評価を上げる方法については何も書かれていません。
本投稿の対象読者は、「出来る限りの最適化を全て行い、あとはCDNを導入すれば完璧」なサイトを作ろうとして、CloudFlareの導入を考えている方です。
私は英語が読めないので、Google翻訳に頼っています。このため、誤った解釈をしている点があるかもしれません。その場合、コメントや編集リクエストにて指摘していただければありがたいです。

概要

現在作成しているサイトでページパフォーマンス上昇のため、GTmetrixで高評価を得られるよう最適化してきました。

昨日、サプドメインに外部JavaScriptや画像を入れ、サブドメインのファイルへのリンクにすることでUse cookie-free domainsも改善したため、
最後の未改善項目であるUse a Content Delivery Network (CDN)を改善しようとCloudFlareを導入しました。

しかしその結果、かえってスコアが下がってしまったのです。
AAという評価は変わりませんが…とにかく記事に添付したキャプチャ画像を見てください。

実際のスコア

※画像にリンクを貼っています。リンク先はページ全体のキャプチャ画像です。
※作成中のサイトであるため、GTmetrix内のプレビュー画像とURIは伏せています

CloudFlare導入前

Page Speed: A(99%)

ページ内の画像には携帯端末用のダウンロード禁止コメントを埋め込んでいるため、Optimize imagesがA(99)となっていますが、それ以外はA(100)です。

YSlow: A(96%)

Use a Content Delivery Network (CDN)を解決していないためF(40)ですが、それ以外はA(100)です。

CloudFlare導入後

Page Speed: A(92%)

CloudFlareのキャッシュ期限は一日のため、GTmetrixのLeverage browser cachingが未解決となっています。

[追記 2014/09/07] CloudFlareのキャッシュ期限は設定により変更が可能でした。

詳細

また、以下のHTMLが自動挿入されてしまい、Minify HTMLも未解決となってしまいます。

<script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:1408262002,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dokv=88e434a982/"},atok:"cf8ac48816281de9788de4d7dc41ca1b",petok:"bd2abcca570fe7b9485abbbe880cd59821f72643-1408266174-1800",zone:"sounisi5011.net",rocket:"0",apps:0}];CloudFlare.push({"apps":{"ape":"3e5bf16694b10946580e92d3cac1a769"}});!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dokv=97fb4d042e/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
//]]>
</script>

このHTMLによりcloudflare.min.jsが読み込まれるせいで、HTTPリクエストの数も増えてしまいます。
ajax.cloudflare.comドメインに接続する負荷も出るので、点数に出なくともパフォーマンスは悪化してしまうでしょう。

※このHTMLはID文字列のようなものを含んでいるため、利用者によっては内容が異なる可能性があります。

YSlow: A(92%)

ガッデム!!

Use a Content Delivery Network (CDN)はCloudFlare導入によりA(100)となり、改善しました。
しかし、逆に以下の項目のスコアが下がってしまいました。

Add Expires headers F(34)
There are 6 static components without a far-future expiration date.
(JavaScriptと画像への6つのリンク)
Configure entity tags (ETags) F(45)
There are 5 components with misconfigured ETags
(画像への5つのリンク)
Use cookie-free domains C(70)
There are 6 components that are not cookie-free
(JavaScriptと画像への6つのリンク)

Add Expires headersのエラーは、メッセージを読む限り長い時間指定のExpiresヘッダーが指定されていないのが原因でしょう。
これはPage Speedでも問題となっていました。

Configure entity tags (ETags)は、「ETagが正しく構成されていない」そうなので"1704421-2e71-500bfb90ddbc0"のような形式の短いEtagを指定しているせいでしょう。
元のサイトでは、対象ファイルのSHA-512ハッシュをBase64エンコードしたEtagを指定していました。

しかし、別ドメインをちゃんと経由しているのに、何故Use cookie-free domainsが未解決となるのかは不明です。

CloudFlare導入によるHTTPヘッダの変化

CloudFlare導入前

※CSSはHTMLに埋め込んでいるため、HTTPヘッダはありません。

JavaScript

画像

CloudFlare導入後

JavaScript

画像

結論

HTMLを自前でMinifyしており、
コンテンツも自前でgzip圧縮し、
HTTPヘッダも適切に指定し、
コンテンツをわざわざ別ドメインで配信し、
それによってAA評価を得ている場合は、
CloudFlareの導入は控えてください。

AA評価は変わりませんが、ヘッダの書き換えの影響で、数値が下がってしまいます。

備考

CloudFlare導入による他の問題

上に挙げた問題の他に、CloudFlareを導入すると以下の問題が発生します。

自前で設定したX-Content-Type-Options: nosniffヘッダが送信されていない。これが未指定の場合、画像と偽って送信されたHTMLファイルやJavaScriptファイルによるXSS攻撃がIE8以降で可能になってしまう。
X-Content-Type-Options: nosniff つかわないやつは死ねばいいという意見もあるため、使ってないCloudFlareも死すべき?
Content Security Policyを利用している場合、ajax.cloudflare.comからのJavaScript読み込みを許可しなくてはならない。

尚、この問題は、GTmetrixのスコアとは無関係です。

追記

CloudFlareのキャッシュ期限は設定により変更が可能でした

CloudFlare settingsのPerformance settingsで、Minimum expire TTLを8 days(8日)以上に設定すれば解決します。

Expiry at a minimum of one month (recommended: access plus 1 year)

とあるとおり、推奨は1 year(1年)ですが、1週間以上の期限であればカラフルにはなりません。