悩めるWEB担当者様のための最新ノウハウをお届け

TTI(Time To Interactive)とは?低下の原因や測定方法と改善方法について解説

私がご紹介します

Tanaka Yuta

TanakaYuta SEO Div. コンサルタント

現在までに100社以上のSEO対策に従事し、様々なジャンル・キーワードで上位表示を実現。薬機法管理者の資格を有しているいること、SEOライターとして自身でもライティングができることから、広告表現が難しい医療・美容・健康を得意領域としている。「成分名」や「〇〇 効果」などの難関キーワードでの上位表示実績多数。SNSでの情報発信にも力を入れており、約10,000名のフォロワーを獲得している。

執筆者の投稿をみる

昨今のSEOにおいて、ページ表示速度の改善はより一層大切になってきました。

その根拠は、2021年6月に実施されたページエクスペリエンスアップデートで、コアウェブバイタル(Core Web Vitals)が検索ランキング要因に組み込まれるなどからも判断できます。

また、コアウェブバイタル以外にも、ページスピードに関連する指標は多数あり、その内の一つがTTIです。

本記事では、TTIとは「何を表しているのか・どう測定するのか・どう改善するのか」について詳しく解説していきます。

TTIとは

TTI(Time To Interactive)とは、ページが完全にインタラクティブになるまでにかかる時間です。

ここにいうインタラクティブとは、以下の場合を指します。

  • ページにFCPによって測定された有用なコンテンツが表示される。
  • イベントハンドラがほとんどの表示可能なページ要素に登録されている。
  • ページが50ミリ秒以内にユーザーの操作に応答する。

TTIは秒数で表し、0~3.8秒の場合は「速い」、3.9~7.3秒の場合は「平均」、7.3秒の場合は「遅い」と判断されます。

TTIの測定方法

GoogleはTTIを測定するツールを提供しています。それらについてみていきましょう。

PageSpeed Insights

PageSpeed Insightsにアクセスし、調査したいホームページのURLを入力して、分析をクリックします。

表示された数値結果から判定が可能です。

Light House

Google Chromeの拡張機能です。

測定したいページを開き、Generate reportと書かれている箇所をクリックすると、パフォーマンスの部分にメトリック(測定基準)が表示され、その項目の中にTTIが含まれています。

TTI低下の要因

TTIが低下する最大の要因は、「大量のJavaScript実行」です。

JavaScriptがページ内で動き出すと、その処理をしている間、ブラウザがユーザーの動作に応答できなくなるというデメリットがあります。

よって、JavaScriptの処理が多くなるにつれて動作に応答できなくなるため、インタラクティブ性が低下し、結果、TTIが低下します。

TTIを改善するには

TTIを改善するには何をすればいいのでしょうか?

ここではTTIの改善方法について、順に紹介します。

【改善方法①】DOMContentLoaded(DCL)までの時間を短くする

DOMContentLoaded(DCL)は、DOMツリーが構築されたときに発生するイベントのことで、DCLが遅いとその分TTIがずれ込んでいくので、まずはDOMContentLoaded(DCL)を改善しましょう。

もっと正確に言うと、DOMContentLoadedが発生するタイミングではなく、イベントが完了するDOMContentLoadedEndを改善するのが良いです。

DCLまでの時間短縮をするには以下のことを行うのおすすめです。

  • HTML(DOM)を簡略化・圧縮する(不要なタグを排除する)
  • CSS・JavaScriptを圧縮する(不要な記述は削除する)
  • 外部のCSS・JavaScriptは複数ファイルにせず1つにする
  • 極力、外部ファイル(CSS・JavaScript)の読み込み数減らす
  • jQuery.ready、JavaScriptでの大量のDOM操作や同期通信などは避ける

【改善方法②】Long taskを見つけて改善する

Long taskとは50ms以上継続する処理のことです。

Long taskは、GoogleChromeのDevToolsのPerformanceタブでチェックでき、Mainタイムラインで赤いマークが付いているのがTTIの悪化を招いているLong taskとなります。

Long Taskを発生させているのはトラッキングタグ・ウィジェットなどのJavaScriptであることが多く、外部ファイル(CSS・JavaScript)の読み込み数を減らしていたとしても、特定のファイルにLong taskとなる処理が埋め込まれている可能性があります。

JavaScriptは必要最低限にして、Long taskとなる処理をなるべく減らしていきましょう。

【改善方法③】画像が多いページのページ下部画像は遅延読み込みをする

画像が多いとDOMContentLoadedの後に、画像のダウンロードが続き、その分ネットワークビジーの状態が続くので、TTIも遅くなることが考えられます。

画像の数や容量、読み込みなどはPageSpeed Insightsのスコアに関係があるので、スクロールしてから表示されるようなページ下部の画像は遅延読み込みさせることがおすすめです。

【改善方法④】JavaScriptの量を減らす

基本的なことですが、不要なJavaScriptは削除しましょう。

Webサイト構築時から不要なJavaScriptを使用しないことはもちろんですが、サイト運用開始からある程度期間が経過してくると、様々なツール・サービス等のタグが埋め込まれることがあります。

  • アクセス解析系のタグ
  • 広告のリマーケティングタグ
  • アフィリエイト系のCVタグ
  • ヒートマップタグ
  • MAツール、CRMツール等のタグ

など、数が増えてくると誰も全体像を把握できていない、ということも往々にしてあります。
手間ではありますが、表示スピードのパフォーマンスを保つためには、不要なタグを削除するとともに、定期的にタグの見直しを行いましょう。
タグマネージャーの導入もおすすめです。

【改善方法②】Cookieのスクリプト実行からの影響を削減する

インタラクション準備の遅れを引き起こす要因の一つに、ファーストパーティやサードパーティのスクリプト実行からの影響があります。

そのため、クリプト実行からの影響を削除することが、TTIの改善に繋がります。

【改善方法⑤】長いタスクを分割する

ブラウザがユーザーのイベントや描画を処理する箇所を「メインスレッド」と呼びます。
メインスレッドを50ミリ秒以上ブロックするコードが、長いタスクとされています。

この「コードが長いタスク」を分割することで、JavaScriptの処理時間をその分だけ短縮することができ、TTIの改善に繋がります。

【改善方法⑥】Webワーカーを使用する

Webワーカーとは、メインスレッドで行われる処理をバックグランドスレッドで実行するための手段です。

ユーザーインターフェイス以外の操作をwebワーカーを使用しバックグラウンド処理に変更することで、メインスレッドに割く時間を短縮できます。

その結果、TTIの改善に繋がります。

まとめ

今回は、ページスピードに関連する指標一つであるTTIについて解説してきました。

TTIはコンテンツの質が検索順位に影響することを踏まえると、1つずつ改善を加えていくのが望ましいでしょう。

低下した原因を一つ一つ改善することで、ユーザーにとってさらに使いやすいWebサイトとなり、結果検索順位が上昇することにも期待ができます。

また、うまくTTIを分析し、改善を加えるのが難しいと考えるご担当者様もいらっしゃるかと思います。

弊社では、コアウェブバイタルをはじめとしたWebサイトの表示スピードを改善する「表示速度改善サービス」をご用意しています。サービスの詳細は、下記のページからご確認いただけます。

表示速度改善サービスはコチラ

【無料】SEOセミナー開催中!SEOでわからないことはプロに相談!

株式会社デジタルアイデンティティでは、無料のSEOセミナーを開催しています。

セミナーでは、SEO対策の基礎・基本はもちろん、質疑応答時間をたっぷりとご用意していますので、自社のSEO対策のお悩み、直近のアルゴリズムのトレンドなど、お気軽にご質問いただけます。

こんなお悩みはありませんか?

  • SEO対策をどこから始めればいいかわからない…
  • 自社でSEO対策をしているが思うように順位が上がらない…
  • 他社にSEO対策を依頼しているがセカンドオピニオンが欲しい…
  • なぜ競合サイトの検索順位が高いのか知りたい…
  • 現在のSEO対策が正しいのか確認したい…

開催日程についても、ご希望に合わせられますので、ぜひお気軽にお申し込みください。

【無料】SEOセミナーお申し込みはこちら

関連記事

Keywords

無料!プロに相談する 無料!SEO対策のご相談はこちら

SEOコンサルティングって何してくれるの?