Forrester Total Economic Impact™の調査によると、Edwin AIは複合組織において313%の投資対効果（ROI）を実現したことが判明しました。

続きを読む

Partners

ドキュメント

LMアカデミー

LMコミュニティ

価格

Platform
解決策
業種
職種
結果はありません。
無料トライアル

14日間フルアクセス LogicMonitor プラットフォーム

Forrester Total Economic Impact™の調査によると、Edwin AIは複合組織において313%の投資対効果（ROI）を実現したことが判明しました。

続きを読む

コアウェブバイタル

インタラクティブな事例とベストプラクティスをご紹介します

TTIは、ページがクリック、タップ、スクロールに実際に反応する瞬間を捉えた指標です。TTIを低下させる一般的な要因、最新ツールを使った測定方法、そしてページの表示速度を向上させる最も効果的な方法について学びましょう。

8〜12分

デントン千倉

クイックダウンロード:

TTIは、ユーザーがページが正常に動作するまでにどれくらいの時間がかかるかを示します。ページの表示速度を低下させる要因、テスト方法、そしてサイトのレスポンスを瞬時に向上させるための実践的な調整方法を学びましょう。

  • TTIは、ページが最初に描画された時だけでなく、実際にクリック、タップ、スクロールに反応するタイミングを示します。

  • TTIが高い原因は通常、長時間実行されるJavaScript、レンダリングをブロックするリソース、および画面外のアセットが早すぎるタイミングで読み込まれることなどです。

  • 変更を実運用する前に、Lighthouse、WebPageTest、PageSpeed Insightsなどのツールを使用して、ラボでTTIを測定できます。

  • コード分​​割、遅延読み込み、重要度の低いスクリプトの遅延読み込みといった手法を用いることで、TTI（処理時間）を数秒短縮し、UX（ユーザーエクスペリエンス）とSEO（検索エンジン最適化）の両方を向上させることができます。

対話時間（TTI）

インタラクティブになるまでの時間（TTI）とは、ページが準備完了のふりをするのが終わり、実際に準備完了の状態になる瞬間です。「ページが見える」状態から「ページが使える」状態への移行を捉え、クリック、タップ、スクロールなどの操作が確実に反応するまでにユーザーがどれくらいの時間を待つかを示します。TTIが短いほど、この遅延は短縮され、サイトは高速で使いやすく、信頼できるものになります。

このガイドでは、TTIが何を測定するのか、ユーザーエクスペリエンスとCore Web Vitalsにとってなぜ重要なのか、正確に測定する方法、そしてTTIスコアを下げるための最も効果的な方法を詳しく解説します。

TTIとは何ですか？ 

TTIは、ユーザーがウェブページを読み込んでから、ページが完全にインタラクティブになるまでにかかる時間を推定するウェブサイトのパフォーマンス指標です。この指標が導入される以前は、ウェブ開発者はページ読み込み時間やOnloadシグナルといった標準的なパフォーマンス指標を用いてパフォーマンスを評価していました。しかし、これらの指標は、ユーザーが実際にページが完全に読み込まれた状態として認識する状態と比較すると、精度が低いという問題がありました。TTIは、これらの一般的な指標に代わる、効果的なページ読み込み時間を測定するための優れた代替手段となります。 

TTIは何を測定するのですか？

以下の3つの基準を満たしていれば、ウェブページは完全なインタラクションに対応できる状態にあると言える。

  • このページはユーザーにとって有益なコンテンツを表示します。
  • 最も目立つ要素に対してイベントハンドラが登録されます。
  • ユーザー操作に対する応答時間は最大50ミリ秒です。

最初の条件は ファーストコンテントフルペイント（FCP）指標これは、ページが有用なコンテンツを表示し始めるタイミングを推定するもので、ページはFCPを達成した後にのみTTIに到達します。イベントハンドラは、ユーザーがリンクをクリックしたりページをスクロールしたりするなど、イベントが発生したときに実行するコードを定義します。正しく登録されていれば、ユーザーの操作に正確に対応できます。3つ目の条件が重要なのは、ユーザーは最小限の応答遅延でスムーズなエクスペリエンスを期待しており、それより遅いとすぐにイライラしてしまうからです。

TTIがユーザーエクスペリエンスに与える影響 

多くのチームは、ページが実際に使用可能になるまでの時間を考慮せずに、ページ読み込み速度の最適化に注力しています。その結果、ページは高速に読み込まれるように見えますが、ユーザー入力に反応できないため、TTI（読み込み時間）が長くなってしまいます。ユーザーは「準備完了」のページが表示され、クリックやタップをしても何も起こりません。この不一致はユーザーの不満を招き、怒りのクリックにつながり、最終的にはコンバージョン率の低下と離脱率の上昇を招きます。

TTIがSEOに与える影響

インタラクティブなコンテンツが多いページであれば、ユーザーはより長く滞在し、結果として直帰率が低下し、ページ訪問数が増加します。このようなプラスの効果が得られることは、 SEO指標はウェブサイトのランキングに影響を与える. 

TTIが他の主要なWebバイタルとどのように関連しているか

TTIとFCPの関係

上記のように、 FCP TTIは、ページの読み込み開始からコンテンツの表示開始までの時間を計測します。TTIはFCPの後に発生するため、FCPとTTIの間に大きな時間差があると、ページの読み込みに深刻な問題が発生する可能性があります。 

TTIとFIDの関係

最初の入力遅延（FID） TTIは、ユーザーがウェブページを初めて操作した際に、ページが応答するまでの時間を測定する指標です。TTIとFIDはどちらもウェブページのインタラクティブ性に関連しており、ページが完全にインタラクティブでない場合、ユーザー入力に応答する準備ができていないことを意味します。TTIの値が低いほど、FIDスコアが高くなる可能性が高くなります。 

TTIとTBTの関係

総ブロッキング時間（TBT）は、FCP（ファーストクリック完了）からTTI（トータルタイムイン）までの間に、メインスレッドがビジー状態のためユーザー入力に応答できない時間を計測します。メインスレッドが長時間かかるタスクで占有されている場合、そのタスクが完了するまで、クリック、タップ、スクロールなどの操作は事実上無視されます。TBT値が高いほど、ユーザーは「フリーズ」状態になる時間が長くなります。一方、メインスレッド上の長時間かかるタスクを減らすことでTBT値が低下し、ページがTTIに到達するまでの時間が短縮されます。

TTIのビジネスへの影響：ケーススタディ

トコペディア はインドネシア最大級のeコマース企業の一つで、全国に約2.7万人の加盟店を抱えています。同社のウェブサイトには18万点以上の商品が掲載されており、毎月50万人以上の訪問者を集めています。 Googleのケーススタディ このパフォーマンス重視のアプローチにより、Tokopediaはクリック率（CTR）を35%、コンバージョン率（CVR）を8%向上させ、TTIを4秒短縮することに成功したと報告されている。

そのために、チームはまず、長時間実行されるJavaScriptがパフォーマンス問題の主な原因であることを特定し、その影響を軽減することに注力しました。サードパーティのJavaScriptを選択的にロードするためのコントローラーライブラリを構築し、重いライブラリをより軽量な代替ライブラリに置き換えました。また、 コード分​​割, 適応型ローディング, 遅延読み込み 戦略により、重要度の低いJavaScriptの読み込みが遅延されました。 

これらのJavaScriptとリソースの最適化により、TTIが4秒短縮され、ホームページのTTIは2.2秒、商品ページのTTIは1.9秒となりました。また、ホームページのアプリJavaScriptコードサイズを88%、商品ページのコードサイズを86%削減することにも成功しました。

JavaScript最適化によるTTIスコアとJavaScriptコードサイズ削減の結果

TTIの測定方法

良いTTIスコアとは？ 

一般的に、TTIスコアが3.8秒未満であれば良好なユーザーエクスペリエンスとSEO効果が得られます。以下の表は、TTI値とウェブページのパフォーマンスの関係を示しています。 

TTI（秒）解釈
0-3.8対応時間
3.9-7.3穏健派
7.3以上遅く

WebPageTest を使用した TTI の測定

TTIは、実際のユーザーではなくラボで測定される指標です。TTIは、次のようなラボツールを使用して計算できます。 Google Chrome Lighthouse (NAIST) と WebPageTest.  

次の例では、TTI を測定する方法を示します。 WebPageTest （オプションとしてLighthouseを実行することもできますが、この例では実行しません。） 

  • MFAデバイスに移動する https://webpagetest.org/  
  • TTIを取得するには、高度なテストから任意のテストタイプを選択できます。 ウェブバイタルまたは 簡単なテスト例として、簡単なテストを選択します。
  • テストしたいウェブページのURLを入力してください。（ このURL.)
  • 必要なテスト構成を選択してください。オプションで、 Lighthouse Auditを実行する Lighthouseテストを実行するオプションもあります。
  • テストを開始し、最終結果が出るまで数分お待ちください。

パフォーマンス テスト結果ページに移動して、 ファイルのエクスポート ドロップダウン。WebPageTest では、TTI は ページレベルのインタラクティビティ指標 JSONデータの中に見つけることができます。

WebPageTest の結果 https://smartblogger.com/blogging-platforms/
  • いずれかを選択することができます JSONを表示 ブラウザで完全な JSON を直接表示するには、 JSONをダウンロード あなたのマシンに。
  • 検索する 相互作用的 JSONファイルから、TTI値をミリ秒と秒の両方で取得し、関連するスコアも取得します。  
サンプルテキスト: リクエスト: CPU: 50m メモリ: 50Mi 制限: CPU: 100m メモリ: 100Mi

さらに、をクリックします 結果をすべて表示する 概要ページでTTI値に関する統計情報を確認できます。

WebPageTest の結果プロット：ページの TTI https://smartblogger.com/blogging-platforms/
  • この例では、TTI値は2.8秒、FCP値はわずか0.486秒、TBT値は0.30秒以下です。これらの数値は、このページのインタラクティブ性が良好であることを示しています。 

PageSpeed Insightsの使用

TTIを測定するには PageSpeed​​ Insightsの ツールにウェブサイトの URL を入力してクリックします 解析 ボタン。下の画像でご覧いただけるように、 サンプルページ PageSpeed Insightsによるコアウェブバイタル評価では総合スコア79を獲得しており、TTI値は3.3秒です。これは良好な値であり、ウェブページがユーザーの操作に迅速に反応することを意味します。

Google PageSpeedInsight Tools Core Web Vitals の評価結果 サンプルページ

TTI不良の原因となる要因 

1. 実行時間の長いJavaScriptコード

ウェブページに実行に時間がかかるJavaScriptコードが含まれている場合、これはTTI（Teaching Time Intensification：完了までの時間）に直接影響します。JavaScriptの実行時間が長くなる原因としては、最適化されていないコード、未使用のスクリプト、大規模なサードパーティ製JavaScriptバンドル、コーディングエラーなどが挙げられます。このようなスクリプトファイルの解析、コンパイル、実行にはかなりの時間がかかり、ページ全体の読み込み時間に影響を与えます。 

ページ上のJavaScriptの実行を分析することで、パフォーマンスのボトルネックを見つけることができます。WebPageTestは、このような実行時間の長い負荷を示すことができます。例えば、以下の画像は、ページのWeb Vitalsのスクリーンショットです。 https://www.dailymirror.lk/これは、 このリンクTBTとページ最大のコンテンツペイントの両方が標準値よりも高いことがわかります。また、ページ上の長時間実行タスクは、JavaScriptの実行時間が長いことを示しています。

滝の画像  サンプルページ

実行時間を短縮するには、JavaScriptの解析およびコンパイル時間を最小限に抑える必要があります。通常、JavaScriptコードはメインスレッドで実行され、実行が完了するまでメインスレッドはブロックされます。JavaScriptファイルが長いと、メインスレッドの時間を大量に消費し、ページの表示遅延を引き起こし、最終的にTTI（Time To Interaction：実行時間）に影響を与えます。JavaScriptの実行時間を短縮することで、メインスレッドのブロック時間を短縮できます。

問題を解決する方法

  • コード分​​割： コード分​​割 長時間実行されるJavaScriptがページ読み込み速度に与える影響を大幅に軽減できます。最初のページを読み込む際にすべてのJavaScriptを一度に含めるのではなく、複数のバンドルに分割し、必要なファイルのみを必要に応じて読み込むようにします。
  • サードパーティ製JavaScriptの使用を減らす： ウェブページは、外部JavaScriptライブラリに依存しすぎている場合があります。これらのサードパーティースクリプトはファイルサイズが大きく、読み込みに時間がかかることがあります。可能な限り使用を減らし、ページに必要な場合にのみ読み込むようにしてください。
  • コードの最小化： JavaScriptファイルやCSSファイルには、改行やスペースなどの不要な文字が含まれていることがあり、ページの読み込み速度低下の原因となります。コードのミニファイ化は、こうした不要な要素を削除し、コードを圧縮します。

2. レンダリングを阻害するリソース 

JavaScript、CSS、HTMLインポートなどのレンダリングを阻害するリソースは、ページのレンダリングを大幅に遅延させ、FCP（ファーストクリックプログレス）とTTI（トータル・タッチ・インタラクション）をさらに悪化させます。これらの阻害リソースは、多くの場合、ブラウザが重要な要素をレンダリングした後に読み込むことができる重要度の低いファイルです。したがって、レンダリングを阻害するリソースを排除することで、ページの読み込み時間を短縮し、TTIを改善できます。

WebPageTestは、レンダリングを妨げるリソースを特定し、オレンジ色の十字で強調表示できます。以下のスクリーンショットは、ページのウォーターフォールビューを示しています。 https://www.dailymail.co.uk/news/index.htmlオレンジ色の十字マークで強調表示された、レンダリングを妨げるリソースを示します。

ウェブページのレンダリングを妨げるリソース https://www.dailymail.co.uk/news/index.html

問題を解決する方法

レンダリングを妨げるリソースを削減する方法はいくつかあります。最も効果的なのは、ページの最も重要な部分のレンダリングが完了するまで、レンダリングを妨げるコードの読み込みを遅らせることです。そのためには、まずページをプロファイリングして、どのリソースがレンダリングを妨げているかを特定する必要があります。その後、重要度の低いサードパーティのJavaScriptとCSSを削除し、後で読み込むか条件付きで読み込むようにし、残りのスクリプトとスタイルを圧縮して、その影響をさらに軽減することができます。

3. オフスクリーン画像

非表示のオフスクリーン画像は、ページ読み込み時にダウンロードされますが、ユーザーにはすぐには表示されません。例えば、ユーザーがページをスクロールダウンした場合にのみ表示される画像などが挙げられます。オフスクリーン画像を読み込むと、特に画像ファイルはテキストベースのリソースよりもサイズが大きいため、ユーザーが最初に必要としないコンテンツの読み込みにブラウザが時間がかかりすぎる可能性があります。 

例えば、以下の画像は、ページ用にダウンロードされたオフスクリーン画像を示しています。 https://www.dailymirror.lk/ 最初の例で使用しました。

初期読み込み中にダウンロードされたオフスクリーン画像 https://www.dailymirror.lk/

問題を解決する方法

こうした画像の影響を軽減するには、オフスクリーン画像を遅延読み込みすることで、必要なときにのみダウンロードされるようにすることができます。そうすることで、ブラウザは最初のページ読み込みに必要なコンテンツのみを表示することに集中できます。 

要約

インタラクティブ時間（TTI）は、実際のユーザーにとってページの応答性がどれほど優れているかを把握する最も分かりやすい指標の一つです。TTIを積極的に最適化しているチームは、怒りのクリックが減り、エンゲージメントが向上し、SEO効果も高まります。これまで見てきたように、TTIスコアが高い原因は、実行時間が長い、あるいは最適化されていないJavaScriptやその他のブロックするリソースにあることが多く、WebPageTestのようなツールを使えば簡単に特定できます。JavaScriptを削減し、重要度の低いコードの実行を遅延させ、その他の負荷の高いアセットを最適化することで、TTIを下げ、サイトの速度と信頼性を大幅に向上させることができます。

章

    ニュースレター

    最新情報のメール配信を登録

    最新のブログ、ホワイトペーパー、電子ガイドなどを直接受信ボックスにお届けします。

    シェア

    ページが実際に準備完了したタイミングを把握しましょう

    読み込みが完了しているように見えても、実際には操作できないページはユーザーを苛立たせ、離脱率を高めます。LogicMonitorは、実際のユーザー体験を反映するTTI（読み込み完了までの時間）やその他のパフォーマンス指標を追跡するのに役立ちます。

    よくあるご質問

    TTIを遅くしているスクリプトやリソースを特定するにはどうすればよいですか？

    まず、LighthouseやWebPageTestなどのツールでラボテストを実行し、メインスレッドで長時間実行されるタスク、大きなJavaScriptバンドル、レンダリングをブロックするリソースを探します。TTIの前に実行され、ウォーターフォール図で長時間実行されるタスクやオレンジ色の「ブロック」マーカーとして繰り返し表示されるスクリプトに優先的に注目してください。

    私のラボのTTIは問題なさそうですが、ユーザーからサイトの動作が遅いという苦情が寄せられています。次に何をチェックすれば良いでしょうか？

    ラボでのテスト結果を、実際のユーザーから得られたフィールドデータと比較し、デバイス、ネットワーク、地域の違いに注意してください。多くの場合、問題は本番環境でのみ読み込まれる重いJavaScriptコードやサードパーティ製コード、あるいは低速なモバイル端末でのみ読み込まれるコードにあります。こうした問題は、実際の使用環境をプロファイリングすることで明らかにすることができます。

    全面的な設計変更を行わずにTTIを改善するために、最も迅速に行える変更点は何ですか？

    重要度の低いJavaScriptの実行を遅延させ、画面外の画像を遅延読み込みし、容量の大きいサードパーティライブラリを削減または置き換えることを優先してください。これらの変更により、メインスレッドのブロッキングとネットワークオーバーヘッドが軽減され、ユーザーは主要なUI要素をより早く操作できるようになります。

    TTIはどのくらいの頻度で追跡すべきですか？また、他にどのような指標を併せて監視すべきですか？

    TTIをINP、LCP、TBTなどの指標と併せて継続的に監視することで、ページがインタラクティブになるタイミングと、継続的な入力に対するページの反応の両方を把握できます。これらの指標をまとめて監視することで、技術的な変更がエンゲージメント、直帰率、コンバージョンに及ぼす実際の影響を長期的に容易に特定できます。

    デントン千倉著

    テクニカルライター

    デントン・チクラは、テクニカルライターであり、長年にわたりオブザーバビリティを推進してきた人物です。彼は、サイト信頼性エンジニアやエンジニアリングチームがインターネットの回復力を強化するツールや機能を発見できるよう支援することに注力しています。監視、パフォーマンス、インフラストラクチャの交差点で活動し、複雑なシステムをより理解しやすく使いやすいものにすることで、高度な技術的詳細と実際の運用とのギャップを埋めています。彼の目標は、チームがより迅速に構築し、問題を早期に発見し、よりスマートに復旧できるよう支援し、最終的にはインターネットをすべての人にとってより良く、より信頼性の高い場所にすることです。

    免責事項: このブログで述べられている見解は著者の見解であり、LogicMonitor またはその関連会社の見解を必ずしも反映するものではありません。

    © LogicMonitor 2026 | 無断複写・転載を禁じます。 | ここで言及されているすべての商標、商号、サービス マーク、およびロゴは、それぞれの会社に帰属します。