Total Blocking Time

Webクリップ, データベース コメントはまだありません

 
 
 
 
 

 
 
 
 
 
Total Blocking Time(TBT)は、Lighthouseレポートのパフォーマンスセクションで追跡されるメトリックの1つです。各メトリックは、ページの読み込み速度のいくつかの側面をキャプチャします。 TBTが測定するもの TBTは、マウスクリック、画面タップ、キーボード押下...

 
 
 
 
 

 
 
 
 
 
Total Blocking Time(TBT)は、Lighthouseレポートのパフォーマンスセクションで追跡されるメトリックの1つです。各メトリックは、ページの読み込み速度のいくつかの側面をキャプチャします。 TBTが測定するもの TBTは、マウスクリック、画面タップ、キーボード押下...

Total Blocking Time(TBT)は、Lighthouseレポートのパフォーマンスセクションで追跡されるメトリックの1つです。各メトリックは、ページの読み込み速度のいくつかの側面をキャプチャします。

TBTが測定するもの

TBTは、マウスクリック、画面タップ、キーボード押下などのユーザー入力への応答がブロックされている合計時間を測定します。合計は加算して算出された遮光部の全ての長いタスク間の第Contentfulペイントと対話する時間を。50ミリ秒を超えて実行されるタスクは、長いタスクです。50ms後の時間がブロッキング部分です。たとえば、Lighthouseが70ミリ秒の長さのタスクを検出した場合、ブロック部分は20ミリ秒になります。

LighthouseがTBTスコアを決定する方法

TBTスコアは、モバイルデバイスに読み込まれたときの上位10,000サイトのページのTBT時間とTBT時間の比較です。トップサイトのデータには404ページが含まれています。

TBTスコアを改善する方法

ChromeDevToolsのパフォーマンスパネルを使用して長いタスクの根本原因を診断する方法を学びます。

一般に、長いタスクの最も一般的な原因は次のとおりです。

  • 不必要なJavaScriptのロード、解析、または実行。パフォーマンスパネルでコードを分析しているときに、メインスレッドがページの読み込みに実際には必要のない作業を行っていることに気付く場合があります。 コード分​​割によるJavaScriptペイロードの削減、未使用のコードの削除、または サードパーティのJavaScriptの効率的な読み込みにより、TBTスコアが向上するはずです。
  • 非効率的なJavaScriptステートメント。たとえば、パフォーマンスパネルでコードを分析した後、document.querySelectorAll(‘a’)2000ノードを返す呼び出しが表示されたとします。10ノードのみを返すより具体的なセレクターを使用するようにコードをリファクタリングすると、TBTスコアが向上するはずです。

全体的なパフォーマンススコアを向上させる方法

特定の指標に焦点を当てる特別な理由がない限り、通常は全体的なパフォーマンススコアの向上に焦点を当てたほうがよいでしょう。

Lighthouseレポートの[ Opportunities]セクションを使用して、ページに最も価値のある改善点を決定します。機会が重要であるほど、パフォーマンススコアへの影響は大きくなります。たとえば、以下のLighthouseのスクリーンショットは、レンダリングブロックリソースを削除すると 最大の改善が得られることを示しています。



関連

管理人のアンテナlive!

コメントを入力

CAPTCHA