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のスクリーンショットは、レンダリングブロックリソースを削除すると 最大の改善が得られることを示しています。
最新ニュース
はてなブックマーク - 新着エントリー - 総合 新着エントリー
- ドッペルゲンガー？ 中国旅客機C919、部品点数30万個超の仏エアバスA320を完コピして誕生か（朝鮮日報日本語版） - Yahoo!ニュースon 2025年7月12日 at AM 4:19
中国が独自開発し、2023年に商業運航を始めた中国商用飛機（COMAC）の中型旅客機C919を巡り、フランスでは欧州の多国籍航空宇宙企業エアバスの主力機種であるエアバスのA320をそのままコピーしたものではないかとする主張が出ています。中国が2000年代初めにエアバスから購入した2機のA320のうち1機が旅客機登録さえされ...
- 「データセンターASMR」GMOが公開中 サーバの音が約12時間、ほぼホワイトノイズ？on 2025年7月12日 at AM 4:08
GMOインターネットは7月4日、データセンター内の環境音を録音した動画「データセンターASMR」を公開した。同社がレンタルサーバサービス「ConoHa」の提供に使うデータセンター内で録音したもので、サーバの稼働音を約12時間ひたすら聞き続けられる。 ASMRとは、環境音や声などで心地良さやぞわぞわ感を誘発する動画・音...
- Amazon創業者が70億円かけて挙げた結婚式、「自分の金を使って何が悪い？」はそのとおりだが、庶民が環境のために行った活動が一度で無に帰すグロテスクさがあるon 2025年7月12日 at AM 3:58
Mystery Parrot (ミスパロ)🦜 @ParrotMystery 今週末、アマゾン創業者ジェフ・ベゾスと元ジャーナリストのローレン・サンチェスの結婚披露宴がベニスで執り行われたのが話題ですね。 おめでたいイベントで、ベニスにおよそ1630億円の経済効果があったと報道されているにも関わらず、欧米メディアや SNS の論調は、総じて...
- [テーマ読切：お仕事] 薬☆剤☆師☆王 - きゅうた | となりのヤングジャンプon 2025年7月12日 at AM 3:51
薬☆剤☆師☆王 きゅうた 今日も薬局では戦いが繰り広げられていた。患者に適切に薬を処方する戦場。そして、それを生き抜いた者だけが挑めるもう一つの戦いがあり...？
- 『バンドリ！』に救われたRAS Raychellの7年間【インタビュー】 | アニメイトタイムズon 2025年7月12日 at AM 3:44
「BanG Dream! アニメイトドリームフェア2025」開催記念！ RAISE A SUILEN / Ba.&Vo. レイヤ役・Raychellさんにインタビュー｜「『バンドリ！』ならでは”の奇跡的なスケール感で歩んできた7年」 2025年7月5日（土）～7月27日（日）の期間中、全国アニメイト（通販を除く）にて開催となる「BanG Dream! アニメイトドリー...
- 自民 鶴保庸介氏 参院予算委員長辞任の意向 能登発言の引責で | NHKon 2025年7月12日 at AM 3:22
自民党の鶴保庸介参議院予算委員長は「運のいいことに能登で地震があった」などと発言した責任をとりたいとして、予算委員長を辞任する意向を参議院自民党の幹部に伝えました。
- チャパティを焼いてカレーは湯煎するキャンプ飯が最高だったon 2025年7月12日 at AM 3:14
趣味は食材採取とそれを使った冒険スペクタクル料理。週に一度はなにかを捕まえて食べるようにしている。最近は製麺機を使った麺作りが趣味。（動画インタビュー） 前の記事：初めてのソロキャンプが楽しかった ＞ 個人サイト ＞私的標本 ＞趣味の製麺 ＞ライターwiki チャパティを焼くのが楽しい ここ数年、インド料理...
- 花より男子、原作読んでたら道明寺司がありえないクズだった「腹蹴って内臓破裂させてるのやばい」「90年代の少女漫画は全体的に過激」on 2025年7月12日 at AM 2:38
tamdaosan @tamdaosan 引用みたらこどちゃは概念ユーシ😻の不純ノリでメロつき求めて読むような漫画じゃなくて子どもたちの世界を通してリアルな社会問題が描かれているらしいので離脱したけどちゃんと読んでみよかな x.com/tamdaosan/stat… 2025-07-11 20:19:50 リンク 集英社コミック公式 S-MANGA 花より男子 1／神尾 ...
