Edited at

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

More than 1 year has passed since last update.

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使いこなしましょう。


リンク