日本国内だとNetlifyよりCloudflare Pagesの方が速い！

# はじめに
こんにちは。Qiitaの記事の下書きって、上限があることを知りました。上限値のときに新たに記事を書こうとすると、怒られます:bow: 筆者です :innocent: 

# 事の発端
なんかLighthouseのスコアが上がらない.
SSGで作っているので、スピードが遅いはずが...:thinking:

と思って、こちらの記事を見つけました。

https://blog.anatoo.jp/2020-08-03

# tracerouteしてみた

## Netlify

お、ほんまや、シンガポールに行きますな :innocent:

```sh
$ sudo traceroute -T *****.netlify.app
traceroute to *****.netlify.app (xxx.xxx.xxx.xxx), 30 hops max, 60 byte packets
 1  xxxxxxxxxx (xxx.xxx.xxx.xxx)  0.497 ms  0.471 ms  0.467 ms
 2  . (xxx.xxx.xxx.xxx)  1.693 ms  3.278 ms  3.275 ms
 3  * * *
 4  softbank221110239041.bbtec.net (221.110.239.41)  47.903 ms  47.638 ms  47.895 ms
 5  * * *
 6  * * *
 7  * * *
 8  if-ae-15-2.tcore1.tv2-tokyo.as6453.net (180.87.155.6)  147.140 ms  142.776 ms  147.133 ms
 9  if-ae-36-3.tcore1.svw-singapore.as6453.net (120.29.217.118)  142.760 ms  147.237 ms  141.357 ms
10  * * *
11  * * *
12  * * *
13  * * *
14  * * *
15  * * *
16  xxx.xxx.xxx.xxx (xxx.xxx.xxx.xxx)  204.253 ms  204.133 ms  198.654 ms
```

## Cloudflare Pages

```sh
$ sudo traceroute -T onsen.pages.dev

traceroute to *****.dev (xxx.xxx.xxx.xxx), 30 hops max, 60 byte packets
 1  xxxxxxxxxx (xxx.xxx.xxx.xxx)  0.554 ms  0.519 ms  0.517 ms
 2  . (xxx.xxx.xxx.xxx)  2.327 ms  4.217 ms  4.215 ms
 3  * * *
 4  softbank221110239041.bbtec.net (221.110.239.41)  42.338 ms  42.643 ms  42.642 ms
 5  * * *
 6  * * *
 7  * * *
 8  * * *
 9  xxx.xxx.xxx.xxx (xxx.xxx.xxx.xxx)  50.502 ms  50.502 ms  50.497 ms
```

# Lighthouseで見てみた
以下スクリーンショットを見ていただきたいです:pray:

すごい違いますね:eyes:

## Netlify
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/2d9e97ed-d113-0fc4-1a67-28b1ff0b561d.png)


## Cloudflare Pages
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/3ff57fd8-9008-34b2-f994-e2b400c54e07.png)

# Lighthouseの値の変化を表にしてみた

ざっと表にするとこんな感じです。
**Netlify**と**Cloudflare Pages**の値の色は、Lighthouseの値の色にしました。
また、それぞれの値で太字の方が評価として**良いほう**です。

**Diff**の値は、**Netlify**と**Cloudflare**を比較した際に、**Cloudflare**の方が<font color="green">良いとき</font>が緑で、<font color="red">悪いとき</font>が赤になっています。

| 項目 | Netlify | Cloudflare Pages | Diff |
|:--|:--|:--|:--|
| Performance | <font color="red">49</font> | **<font color="orange">59</font>** | <font color="green">+10</font> |
| First Contentful Paint | **<font color="green">1.4s</font>** | <font color="green">1.6s</font> | <font color="red">+0.2s</font> |
| Speed Index | <font color="orange">3.7s</font> | **<font color="green">1.6s</font>** | <font color="green">-2.1s</font> |
| Largest Contentful Paint | **<font color="red">5.4s</font>** | <font color="red">7.1s</font> | <font color="red">+1.7s</font> |
| Time to Interactive | <font color="red">9.1s</font> | **<font color="orange">5.8s</font>** | <font color="green">-3.3s</font> |
| Total Blocking Time | <font color="red">870ms</font> | **<font color="orange">460ms</font>** | <font color="green">-410ms</font> |
| Cumulative Layout Shift | <font color="orange">0.134</font> | <font color="orange">0.134</font> | ±0 |
| Filmstrip | 5枚目から表示 | 1枚目から表示 | <font color="green">-4枚</font> |

# Lighthouse結果からの所感

1. Flimstripが1枚目から表示されるようになった:+1:
2. Performanceが上がった:+1:
3. 悪くなっている値もある:thinking:
4. 元からSSGで高速なのに体感で速度が速くなったのがわかる:+1:

# 結論

1. **日本国内だとNetlifyよりCloudflare Pagesの方が速い！**
2. **Lighthouseの評価も上がる！**

# おわりに
**Cloudflare Pages**おすすめです！
導入方法は以下の記事に書いてあるのでぜひ！

https://qiita.com/akitkat/items/dd224d074edfc587b8bd

物理的な距離って大事なんだと再認識しました。
それでは！