607
263

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-11-16

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

リンク

607
263
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
607
263