レンダリングをブロックするJSとCSSについて　【中級】

Written by Steve Souders

 

SpeedCurve（スピードカーブ）は、ページ内のブロックリソースの数を報告します。これらはレンダリングをブロックするリソースです。ユーザーにはできるだけ速くコンテンツを見られるようにすることが重要なため、レンダリングが遅くなる原因を知ることは重要です。

レンダリングをブロックする主な要因は、同期して読み込まれるスクリプトとスタイルシートです。このブロッキング問題を回避するには、スクリプトとスタイルシートを非同期に読み込むことが重要です。

そのため、 asyncやとdefer、その他のプログラム手法を使って、スクリプトに対して実行できます。スタイルシートを非同期で読み込むことは一般的ではありませんが、loadCSSなどのテクニックを使っても可能です。

スクリプトとスタイルシートがレンダリングをブロックする方法には微妙な違いがあります。これには「JSブロック」のメトリックを完全に理解している必要があります。同期スタイルシートの場合、DOM全体をレンダリングからブロックします。また同期スクリプトの場合、DOMツリーのSCRIPTタグに続く要素のみをブロックします。

これは、ブロックJSの計測において興味深い疑問となります。同期スクリプトがページの下部、つまり表示されるすべてのDOM要素の下にある場合です。このスクリプトは、同期に読み込まれていてもレンダリングをブロックしません。（表示可能なすべてのDOM要素がSCRIPTタグの前にあるため）。

SpeedCurveでは、ブロッキングスクリプトを正確に計測するため、スクリプトが同期か非同期かだけを追跡するだけではなく、同時スクリプトがレンダリングをブロックするかどうかを判断します。同期スクリプトがビューポート内のDOM要素の前に発生するかどうかを判断してこれを行います。

スクリプトが同期してロードされ、ビューポート内のDOM要素の前に発生した場合は、「ブロックJS」としてカウントします。  すべてのビューポートのDOM要素の後で発生した場合は、（同期して読み込まれていても）ブロックとはカウントしません。

これらはかなり複雑です。

JSとCSSのブロックの計測は難しいのですが、  Start Renderの時間を最適化したい場合、JSとCSSのブロック計測は、追跡する上で最も重要な指標の1つになります。

 

How SpeedCurve detects blocking JavaScript and stylesheets