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


## 追記

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

[GTmetrixのスコアを限界まで上げたいならCloudFlareを使おう - Qiita](http://qiita.com/sounisi5011/items/841079053eb5a52ebf44)

## 注意

* 本投稿は、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%)

[![Page Speedの結果のキャプチャ](https://qiita-image-store.s3.amazonaws.com/0/35948/7ead2a07-9f7f-b3ef-65e2-a18ac66d9fa0.png)](https://qiita-image-store.s3.amazonaws.com/0/35948/ee850848-498c-ea0e-f3df-6d178d1c962a.png)

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

#### YSlow: A(96%)

[![YSlowの結果のキャプチャ](https://qiita-image-store.s3.amazonaws.com/0/35948/49f49f4d-af75-5ec8-41dd-6bfeb58db57a.png)](https://qiita-image-store.s3.amazonaws.com/0/35948/9db171da-e633-cd4c-8abb-85b3e2cf1cac.png)

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

### CloudFlare導入後

#### Page Speed: A(92%)

[![Page Speedの結果のキャプチャ](https://qiita-image-store.s3.amazonaws.com/0/35948/db2988eb-dd2d-d9b7-a6a8-0ef98a6ca13b.png)](https://qiita-image-store.s3.amazonaws.com/0/35948/c81e6222-4856-6a00-653c-e57619a8a4c4.png)

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

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

[詳細](#cloudflare%E3%81%AE%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E6%9C%9F%E9%99%90%E3%81%AF%E8%A8%AD%E5%AE%9A%E3%81%AB%E3%82%88%E3%82%8A%E5%A4%89%E6%9B%B4%E3%81%8C%E5%8F%AF%E8%83%BD%E3%81%A7%E3%81%97%E3%81%9F)

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

```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%)

[![YSlowの結果のキャプチャ](https://qiita-image-store.s3.amazonaws.com/0/35948/4441f4cb-d402-7c20-2eeb-32638f6276ce.png)](https://qiita-image-store.s3.amazonaws.com/0/35948/1ba23663-66d5-8856-c193-6200b621a557.png)

**ガッデム!!**

[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](#page-speed-a92)でも問題となっていました。

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

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

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

### CloudFlare導入前

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

#### JavaScript

[![][h-b-js]][h-b-js]

#### 画像

[![][h-b-img]][h-b-img]

### CloudFlare導入後

#### JavaScript

[![][h-a-js]][h-a-js]

#### 画像

[![][h-a-img]][h-a-img]

## 結論

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週間以上の期限であればカラフルにはなりません。



[GTmetrix]:http://gtmetrix.com/
[CloudFlare]:https://www.cloudflare.com/
[Content Security Policy]:https://developer.mozilla.org/ja/docs/Security/CSP
[X-Content-Type-Options: nosniff つかわないやつは死ねばいい]:http://d.hatena.ne.jp/hasegawayosuke/20110106

[Use cookie-free domains]:http://gtmetrix.com/use-cookie-free-domains.html
[Use a Content Delivery Network (CDN)]:http://gtmetrix.com/use-a-content-delivery-network-cdn.html
[Add Expires headers]:http://gtmetrix.com/add-expires-headers.html
[Configure entity tags (ETags)]:http://gtmetrix.com/configure-entity-tags-etags.html
[Optimize images]:http://gtmetrix.com/optimize-images.html
[Leverage browser caching]:http://gtmetrix.com/leverage-browser-caching.html
[Minify HTML]:http://gtmetrix.com/minify-html.html

[h-b-js]:https://qiita-image-store.s3.amazonaws.com/0/35948/6acd4de5-67b9-6cb7-f6bd-6a6ec73646f1.png
[h-b-img]:https://qiita-image-store.s3.amazonaws.com/0/35948/88268dac-784f-7ad7-4c55-fc4adb206092.png
[h-a-js]:https://qiita-image-store.s3.amazonaws.com/0/35948/9c12c894-f928-fb09-3b65-9f4d7af31724.png
[h-a-img]:https://qiita-image-store.s3.amazonaws.com/0/35948/0f6cdcc1-8950-5339-1a0d-72c8c58816ac.png