Non onload blocking async JS evolved

従来ページ

ソーシャル・ボタンと Disqus のスクリプトは推奨の DOM 挿入法で、またサイド・ウィジェット用のスクリプトは async 属性付き <script> タグで、それぞれを非同期に読み込んでいます。また jsfiddle はコンテンツ中の <iframe> に埋め込んでいます。

ナビゲーション・タイミング

Navigation Timing による DOM ready (≒domContentLoadedEventEnd) と onload (≒loadEventEnd) の観測結果は以下の通りです(対応ブラウザは、ブラウザの互換性 を参照)。

より詳しく分析する...

このページの特徴

主コンテンツは、ワン・ポイントの「手」画像、jsFiddle と Disqus のコメント・システム以外、ほとんどテキストだけで構成されています。

3rd パーティー製スクリプトによるソーシャル・ボタンやサイド・ウィジェットは、副コンテンツの位置づけです。

このページの問題点

ユーザーが最初に目にする範囲("above the fold")は、ごく短時間で表示されるにも関わらず window.onload の発火がブロックされ、速いページとは見なされません。

改善策は?

"Frame in Frame 法" を使えば、3rd パーティー製スクリプトを主コンテンツから切り離し、window.onload をごく短時間のうちに発火させることがでるようになります。

進化したページ」を試してみて下さい。