Total Blocking Time(TBT)は、Lighthouseレポートのパフォーマンスセクションで追跡されるメトリックの1つです。各メトリックは、ページの読み込み速度のいくつかの側面をキャプチャします。 TBTが測定するもの TBT は、マウスクリック、画面タップ、キーボードの...
Total Blocking Time(TBT)は、Lighthouseレポートのパフォーマンスセクションで追跡されるメトリックの1つです。各メトリックは、ページの読み込み速度のいくつかの側面をキャプチャします。
TBTが測定するもの
TBT は、マウスクリック、画面タップ、キーボードの押下などのユーザー入力にページが反応しないようにブロックされている時間の合計を測定します。この合計は、First Contentful Paint から Time to Interactive までの間のすべての長いタスクのブロック部分を加算して計算されます。50ms 以上実行されるタスクはすべてロングタスクです。50ms以降の時間がブロッキング部分となります。例えば、Lighthouseが70msの長いタスクを検出した場合、ブロッキング部分は20msとなります。
LighthouseがTBTスコアを決定する方法
TBTスコアは、モバイルデバイスに読み込まれたときの上位10,000サイトのページのTBT時間とTBT時間の比較です。トップサイトのデータには404ページが含まれています。
TBTスコアを改善する方法
ChromeDevToolsのパフォーマンスパネルを使用して長いタスクの根本原因を診断する方法を学びます。
一般に、長いタスクの最も一般的な原因は次のとおりです。
- 不必要なJavaScriptのロード、解析、または実行。パフォーマンスパネルでコードを分析しているときに、メインスレッドがページの読み込みに実際には必要のない作業を行っていることに気付く場合があります。 コード分割によるJavaScriptペイロードの削減、未使用のコードの削除、または サードパーティのJavaScriptの効率的な読み込みにより、TBTスコアが向上するはずです。
- 非効率的なJavaScriptステートメント。たとえば、パフォーマンスパネルでコードを分析した後、document.querySelectorAll(‘a’)2000ノードを返す呼び出しが表示されたとします。10ノードのみを返すより具体的なセレクターを使用するようにコードをリファクタリングすると、TBTスコアが向上するはずです。
全体的なパフォーマンススコアを向上させる方法
特定の指標に焦点を当てる特別な理由がない限り、通常は全体的なパフォーマンススコアの向上に焦点を当てたほうがよいでしょう。
Lighthouseレポートの[ Opportunities]セクションを使用して、ページに最も価値のある改善点を決定します。機会が重要であるほど、パフォーマンススコアへの影響は大きくなります。たとえば、以下のLighthouseのスクリーンショットは、レンダリングブロックリソースを削除すると 最大の改善が得られることを示しています。
![](https://coron.tech/wp-content/uploads/2020/11/total-blocking-time1.jpg)
最新ニュース
coron's Source - 全国 generated by Nordot
- 東海道新幹線が全線で運転を再開by TBS NEWS DIG on 2024年7月27日 at AM 7:21
- 東海道新幹線 三島ー静岡間で運転見合わせ 停電の影響 JR東海by TBS NEWS DIG on 2024年7月27日 at AM 7:19
- スケートボード男子ストリート29日に延期by 共同通信 on 2024年7月27日 at AM 7:18
- 沢登りで福岡の男性滑落死 宮崎・西米良村by 共同通信 on 2024年7月27日 at AM 7:17
27日午前9時半すぎ、宮崎県西米良村上米良付近で沢登りをしていた福岡市城南区の国家公務員遠藤圭亮さん...
- コーチが意図的に負け誘導 埼玉栄高、卓球の総体予選by 共同通信 on 2024年7月27日 at AM 7:06
6月の全国高校総合体育大会(インターハイ)の卓球男子シングルス埼玉県予選で、埼玉栄高(さいたま市西区...
- 「課題解決に向けたキックオフ」渋滞解消へ熊本県知事と熊本市長が腹を割ってトップ会談 短期と中長期で施策検討by FNNプライムオンライン on 2024年7月27日 at AM 7:04
熊本県の木村知事と熊本市の大西市長が交通渋滞解消に向けたトップ会談を7月18日に開いた。。木村知事は...
- “初破壊”は1964年…共に今年70周年『ゴジラと中部電力MIRAI TOWERの歴史』8月からは新たなコラボもby FNNプライムオンライン on 2024年7月27日 at AM 7:03
名古屋市のランドマーク「中部電力MIRAI TOWER」は、2024年6月で70周年を迎えました。“...
- 【速報】東京都内で男女53人が熱中症の疑いで搬送 午後3時時点 東京消防庁by TBS NEWS DIG on 2024年7月27日 at AM 6:37
東京消防庁によりますと、きょう都内では午後3時時点で、6歳から89歳までの男女あわせて53人が熱中症...