はじめに
こんにちは。Qiitaの記事の下書きって、上限があることを知りました。上限値のときに新たに記事を書こうとすると、怒られます
筆者です 
事の発端
なんかLighthouseのスコアが上がらない.
SSGで作っているので、スピードが遅いはずが...
と思って、こちらの記事を見つけました。
tracerouteしてみた
Netlify
お、ほんまや、シンガポールに行きますな
$ 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
$ 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で見てみた
以下スクリーンショットを見ていただきたいです
すごい違いますね
Netlify
Cloudflare Pages
Lighthouseの値の変化を表にしてみた
ざっと表にするとこんな感じです。
NetlifyとCloudflare Pagesの値の色は、Lighthouseの値の色にしました。
また、それぞれの値で太字の方が評価として良いほうです。
Diffの値は、NetlifyとCloudflareを比較した際に、Cloudflareの方が良いときが緑で、悪いときが赤になっています。
| 項目 | Netlify | Cloudflare Pages | Diff |
|---|---|---|---|
| Performance | 49 | 59 | +10 |
| First Contentful Paint | 1.4s | 1.6s | +0.2s |
| Speed Index | 3.7s | 1.6s | -2.1s |
| Largest Contentful Paint | 5.4s | 7.1s | +1.7s |
| Time to Interactive | 9.1s | 5.8s | -3.3s |
| Total Blocking Time | 870ms | 460ms | -410ms |
| Cumulative Layout Shift | 0.134 | 0.134 | ±0 |
| Filmstrip | 5枚目から表示 | 1枚目から表示 | -4枚 |
Lighthouse結果からの所感
- Flimstripが1枚目から表示されるようになった
- Performanceが上がった
- 悪くなっている値もある
- 元からSSGで高速なのに体感で速度が速くなったのがわかる
結論
- 日本国内だとNetlifyよりCloudflare Pagesの方が速い！
- Lighthouseの評価も上がる！
おわりに
Cloudflare Pagesおすすめです！
導入方法は以下の記事に書いてあるのでぜひ！
物理的な距離って大事なんだと再認識しました。
それでは！