JSやCSSなどの重大なブロックリソースについて

目的：レンダリングのブロックは、スタイルシートや同期スクリプトが元凶となります。

Steve Souders　2015年11月23日月曜日

SpeedCurveでは、ユーザーエクスペリエンスをキャプチャーするメトリックス（指標）に重点を置いています。 ユーザーエクスペリエンスの主要な部分は、「コンテンツが実際にユーザーにどのように表示されるか？」です。 レンダリングのブロックは、スタイルシートや同期スクリプトが元凶であるため、これらの重大なブロックリソースに焦点を当ててるためにいくつかのメトリックをご紹介します。

最も役立つものは、ウォーターフォールチャートのブロッキングスタイルシートと同期スクリプトが強調して表示されることでした。

次のESPNのウォーターフォールチャートの例では、重大なスタイルシート（緑）と同期スクリプト（オレンジ）に赤い横斜めのハッシュパターンがどうなっているかに注目してください。 当然ですが、Start Render は、重大なブロッキングリソースの表示の完了まで遅くなります。この時点ですが、スクリーンショットに表示されているウォーターフォールの下部にある「スクラバー」（斜線）は、レンダリングがこの時点までブロックされていることを示しています。 ウォーターフォールチャートの例をご覧ください。

全スクリプトとスタイルシートが必ずしもパフォーマンスに影響を与えるわけではありません。ユーザーエクスペリエンスの向上を考えているなら、ブロック要因を明らかにすることが重要です。上記のウォーターフォール図では、マークされていないスクリプト（リクエスト＃6、 “lazysizes.js”）があることが分かります。 これは、このスクリプトは、非同期に読まれていて、ページのレンダリングをブロックしません。レンダリングをブロックするリソースだけを強調し、そうでない非同期スクリプトは強調表示されません。

同様に、メインページのレンダリングをブロックしないスタイルシートを使うこともできます。 これは通常、Twitterウィジェットのように、iframeにロードされるサードパーティのウィジェットで発生します。 iframeのスタイルシートはメインページをレンダリングからブロックしないため、重大なリソースとしてマークされていません。

加えて、ウォーターフォール内に重大なリソースを強調表示するだけでなく、ブロッキングスタイルシートと同期スクリプトの数も「他のメトリック」に表示されます。

重大なリクエストの履歴データが1カ月になると、このメトリックを追跡するためのチャートを追加します。 ブロッキングリクエストの数とそのリクエスト数のこの新しい可視性は、チームがユーザーのためにすばやく快適なエキスペリエンスを提供するのに役立ちます。

重大なレンダリングパス　

重大なレンダリングパスが何であるか、重要な理由、およびアセット配信を最適化してブロックしないようにする方法については、Iya GrigorikがVelocity Conf 2014のトピックの概要を説明しました。