2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

はじめに

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

事の発端

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

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

tracerouteしてみた

Netlify

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

$ 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で見てみた

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

すごい違いますね:eyes:

Netlify

3.png

Cloudflare Pages

2.png

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

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

Diffの値は、NetlifyCloudflareを比較した際に、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枚目から表示されるようになった:thumbsup:
  2. Performanceが上がった:thumbsup:
  3. 悪くなっている値もある:thinking:
  4. 元からSSGで高速なのに体感で速度が速くなったのがわかる:thumbsup:

結論

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

おわりに

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
2
Help us understand the problem. What are the problem?