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

More than 3 years have passed since last update.

posted at

updated at

dev.toと阿部寛のホームページについてちゃんと計測させてくれ

Twitter見てたら、以下のツイートを見た。

Kobito.PWcWWH.png

数時間後、dev.toと阿部寛のホームページどっちが速いですか?というブログがTLに現れた。

GoogleのPageSpeed Insightsで測って阿部寛のホームページの方が早かったという結論付けてよいのかという疑問が浮かび、webpagetest.orgで計測することにした。

設定

Kobito.Lvk0xl.png

Kobito.ORtVPG.png

阿部寛のホームページに関しては、Tokyoリージョンにあるものとする。
そして、dev.toはNY発らしいので、サーバーの設定をNYにして測定する。

The platform was created in 2016. The twitter account, @ThePraticalWeb
Kobito.BpoUJD.png

評価結果

Webpagetest - 阿部寛のホームページ
Webpagetest - dev.to

阿部寛のホームページ

Kobito.8564GP.png

サーバーからのレスポンスの圧縮がされておらず、イメージも圧縮されていない。さらには、キャッシュの利用も圧倒的にダメである。

dev.to

Kobito.AijZLm.png

これはすごい。キャッシュの利用こそFであるが、画像の圧縮もCまでに伸びているし、CDNの利用も効果的な模様。

見ての通り、パフォーマンスに対しての工夫はdev.toの方がすばらしい評価を受けている。

速度指標比較

指標 阿部寛のホームページ dev.to
読み込み速度 0.313秒 2.717秒
ファーストバイト 0.109秒 0.291秒
レンダー開始 0.133秒 0.907秒
スピードインデックス 257 908

フィルムストライプビューでディテールを見よう

Kobito.uOFFf1.png

見よ、0.3秒の速さで頭部が映し出されたと思った刹那、0.4秒ですべて表示完了していることがわかるだろう。

Kobito.vlDyhr.png

対して、dev.toは0.4秒経過どころか、の0.8秒経過しても、一切なにも表示されていない状況だ。

結論

阿部寛のホームページは改善の余地が多くあるにも関わらず、dev.toよりも圧倒的に読み込みが早い。
Web制作の現場の皆さま、Webpagetest使いこなしましょう。

リンク

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
263
Help us understand the problem. What are the problem?