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

9407 ワード
Lighthouse CloudflarePages cloudflare Netlify gatsby cloudflare テキストリンク

はじめに

こんにちは。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結果からの所感

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

結論

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

おわりに

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

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