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のスクリーンショットは、レンダリングブロックリソースを削除すると 最大の改善が得られることを示しています。
最新ニュース
はてなブックマーク - 新着エントリー - 総合 新着エントリー
- 美容院でおまけのマッサージをしてくれるとき、最後に「パンパンパン」ってするのは何なんだろう？→美容業界とマッサージ業界の認識
2025年12月16日 に AM 3:28 に美容院や理容室で施術の最後にする「パンパン」という叩きに対する疑問。特別な治療効果より合図や起こすための動作として使われることが多い。スタッフ同士や他の客へのシャンプー終了の合図、寝ている客を起こすためのルーティンで、店や担当者によって強さや意味合いが違う。長年の慣れで好みが分かれる行為でもある。
- 高市首相「従来の立場超えたと受け止められ反省」 存立危機発言巡り | 毎日新聞2025年12月16日 に AM 3:10 に
参院予算委員会で立憲民主党会派の広田一氏の台湾有事に関する質問に答える高市早苗首相＝国会内で2025年12月16日午前9時33分、平田明浩撮影 高市早苗首相は16日の参院予算委員会で、台湾有事について「存立危機事態になり得る」と国会で答弁したことを巡り、「従来の政府の立場を超えて答弁したように受け止められたこ...
- 【アドベントカレンダー2025】ぐるなびが取り組む「設計からのオブザーバビリティ」 3つのプロダクトで実践した Observability Shift Left - ぐるなびをちょっと良くするエンジニアブログ2025年12月16日 に AM 3:03 に
はじめに こんにちは、ぐるなびの APM(Application Performance Monitoring)分科会 です。 私たちは、全社的なシステム品質の向上を目指し、組織横断でオブザーバビリティ（可観測性）の導入・活用を推進しています。 昨今、「オブザーバビリティ」という言葉は広く浸透しましたが、多くの現場では依然として「リリース...
- 「女流棋士公式戦番勝負対局規定」の一部変更と公式戦番勝負対局規定（仮称）検討委員会立ち上げについて｜将棋ニュース｜日本将棋連盟2025年12月16日 に AM 2:58 に
平素より将棋界にあたたかいご支援を賜り、誠に有り難うございます。 先般、福間女流六冠より、タイトル戦における対局者の妊娠に関する規定について問題提起をいただきました。当連盟としては既に12月10日付で公式サイトにて所見を開示しておりますが、此処にあらためてご説明いたします。 日頃より応援してくださるフ...
- RISC-Vはなぜシンプルなのか？x86との比較で理解する設計思想 - iimon TECH BLOG2025年12月16日 に AM 2:51 に
本記事はiimon Advent Calendar 2025 16日目の記事となります！ こんにちは、iimonでエンジニアをしている須藤です。 RISC-V（リスクファイブ）は「シンプルでエレガント」と言われますが、実感が湧いていなかったので、今回はx86との比較を通じて、シンプルさやその設計思想を体感していこうかと思います。 この記事で...
- ある日突然４人の男に連れ去られ精神科へ強制入院、薬漬けの絶望…同意したのはまさかの人物 「医療保護入院」制度の闇 | NEWSjp2025年12月16日 に AM 2:46 に
２０１８年１２月、富山市でデイサービスを経営する元警察官、江口実さん（８４）は妻の富子さん（７９）と一緒に入居者たちの朝食を準備していた。ふと見ると、４人の男が土足で入ってくる。４人は江口さんを見つけるといきなり羽交い締め。引きずるように連れ出し、外に止めてあった民間の救急車に無理やり押し込んだ...
- UIは“感情”を設計できる時代へ — ダークモードから Material 3 Expressive・Liquid Glassまで - enechain Tech Blog2025年12月16日 に AM 2:43 に
この記事はenechain Advent Calendar 2025の16日目の記事です。 はじめに 序：UIは“気分”に寄り添う時代へ ダークモード：色反転から“情緒デザイン”へ 最新のダークモードは“情景”を作っている UIに宿る“空気感”：Expressive Design と Liquid Glass の登場 Material You：ユーザーの気分を UI に取り込む Material 3 Ex...
- 「スラッシュドット・ジャパン」跡地に2015年のキャッシュを用いた偽サイトが登場【やじうまWatch】2025年12月16日 に AM 2:38 に
「スラッシュドット・ジャパン」跡地に2015年のキャッシュを用いた偽サイトが登場【やじうまWatch】
