サポート

ブロックするリソースを計測する

ブロックするリソースを計測する

目的:レンダリングブロックの主犯は、同期して読み込まれるJavaScriptとスタイルシート(CSS)です

Steve Souders 2017年2月2日木曜日

SpeedCurveは、ページ内のブロックリソース数を報告します。 これらはレンダリングをブロックするリソースです。 すばやくコンテンツを見ることがユーザーには大切なので、なにがレンダリングを遅くさせているかを調べるのは重要です。 我々は、ブロックリソースを計測する方法を強化し、こうした改善点を顧客だけでなくパフォーマンスコミュニティで共有したいと考えていました。

レンダリングをブロックする主犯人は、同期して読み込まれるJavaScriptとスタイルシート(CSS)です。 このブロッキングの問題を回避するには、スクリプトとスタイルシートを非同期にして読み込むことです。 async属性とdefer属性、および他のプログラム的な手法で、スクリプトに対して行うことができます。 スタイルシートを非同期でロードすることは一般的ではありませんが、 loadCSSなどのテクニックを使用しても可能です。

SpeedCurveでは、ブロックされるスタイルシートを計測する方法を改善しました。 最初の変更は、loadCSSを介して読み込まれたスタイルシートを無視することです。 これらは非同期であり、レンダリングをブロックしません。 同様に、最初に link-rel-preload 経由でロードされ、後にDOMに動的に追加されるスタイルシートは無視されます。 最後に、「print」メディアタイプのスタイルシートは無視します。 自社サイトでこれらのテクニックを使用する場合は、SpeedCurveメトリックが減らそうとする “Blocking CSS”です。

ブロッキングスクリプトの測定方法も改善しました。 しかし、この解説に入る前に、スクリプトとスタイルシートがレンダリングをブロックする方法の微妙な違いについて説明しましょう。 同期スタイルシートは、レンダリングからDOM全体をブロックします。 ただし、同期スクリプトは、DOMツリーのSCRIPTタグに続く要素のみをブロックします。 下の図は、レンダリングをブロックするスクリプトをで示しています。 非同期スクリプトと遅延スクリプトは、DOM内のどこにあっても、常に緑色(非ブロッキング)です。 ただし、同期スクリプトは、ビューポートにあるDOM要素の上のHEADの中やBODY内に存在している場合はレンダリングをブロックします。同期スクリプトは表示されているDOMの下で発生しても、レンダリングをブロックしません。

これは、ブロッキングJSの計測方法において重要な最適化につながります。 ページの下部に(すべての表示可能なDOM要素の下に)ページが同期スクリプトを持つ場合、レンダリングは、ブロックされません(表示可能なDOM要素がSCRIPTタグの前にあるため)。

ブロッキングスクリプトを正確に測定するために、SpeedCurveは、スクリプトが同期か非同期かを追跡するだけではなく、スクリプトがレンダリングをブロックするかどうかを判断します。 同期スクリプトがビューポート内のDOM要素の前に発生するかどうかを判断します。 スクリプトが同期してロードされ、ビューポート内のDOM要素の前に発生した場合は、「ブロックJS」としてカウントします。 すべてのビューポートのDOM要素の後に発生した場合は、(同期してロードされていても)ブロックされているとカウントしません。

この変更により、ページの本文に同期スクリプトがある場合、「Blocking JS」のSpeedCurveメトリックが減少します。 私たちのためにやりました! SpeedCurve.comのダッシュボードでは、すべてのチャートが同期スクリプトを介してロードされますが、これらの同期スクリプトはすべて表示されるDOMの下にあります。 そのため我々のBlocking JS指標は4から0に落ちました! これは、レンダリングを改善するために重要なリソースに焦点を当てるのに役立ちます。

ブロッキングリソースの計測は難しいですが、Start Renderの最適化するには、重要な指標の1つです。 我々は、これらの指標がをともに得ることができてうれしいです。 このコードが私たちを超えていることもうれしいです。

 

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。