まめージェント

Android, GAE, AngularJSの技術ネタ中心。Twitter: @mame01112

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は広告の費用対効果をみて、もしかしたら外すかも。

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