ChromeのDev tool / ロードに時間のかかるコンテンツ

ウェブ開発をする人にとっては知ってて当然の内容かもだけど、
ChromeのDev toolが便利。

使い方は、Chromeを開いて(Macでは)[Command] + [Option] + [I]を押すだけ。

今回、ウェブサイトのロード時間と、ロードするコンテンツの重さを調べたくて、
簡単にできないかな・・・と思っていたところ、見つけたのがコレ。

上記、[Command] + [Option] + [I]を押してから、"Network"の
タブをクリックすると、それぞれのコンテンツにどのくらいの時間がかかっているかがわかる。

そこでわかったのが、

・Twitter / Facebookのウィジェットは重いと聞いてたけど、
　本当に重かった。 (Twitterのウィジェットのロード300msくらい)

・bootstrap.min.jsも重い。
　むしろ、Twitterは他のものとパラレルに動いてるからいけど、
　コイツは完全にボトルネック (200ms)くらい。

・そしてTwitterのウィジェットは、そこからさらにRetweetされた回数を
　取得しにいくらしい。これで140ms。そこそこボトルネック。

ということで、

・bootstrapを使わず
・Twitterのウィジェットを使わない
だけで、340msくらいロードが早くなる。

bootstrapは、直近では対応できないけど、Backlog行き。今後対応。
Twitterは広告の費用対効果をみて、もしかしたら外すかも。

そんな考察ができました。