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

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が低下します。

SEO診断の資料はコチラ

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は、表示するブラウザによっては対応していないことがあります。

そのため、互換性がないブラウザでJavaScriptを使用可能にする「ポリフィル」というコードが解決策として有効になります。

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

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

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

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

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

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

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

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

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

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

当社で高速化施策を行なって速くならなかった要因ベスト３はこちら。
①外部リソースの読み込みが多い
②サーバーのスペックや設定に問題がある
③JSなど動きの多いレイアウト
これらはサイトの根本に問題があるので、
当社ではリニューアルや高速サーバーへの移管をご提案しています。#SEO #高速化

— 田中雄太 / ADAMTECHNOLOGIES,Inc. (@yuuta_tanaka88) August 23, 2021

まとめ

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

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

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

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

弊社では、コアウェブバイタルをはじめとしたWebサイトの表示スピードの改善する「WEBサイト表示スピード高速化サービス」をご用意しています。まずは、下記のページから無料で資料をダウンロードしてみてはいかがでしょうか。

WordPressのサイト表示スピード改善をするなら「HP爆速くん for WP」

WordPressは世界で40%以上のWEBサイトで導⼊されている無料CMSで、エンジニアでなくても簡単にWEBサイトの構築が可能です。

しかし、⾼度なカスタマイズや表⽰スピードの⾼速化においては、WEBだけでなくWordPressに関する専⾨的な知識が必要で、⼀般的なWEB制作会社やSEO対策会社では対応できない可能性もあります。

WordPressサイトの表⽰スピードに悩む企業の課題を解決するため、SEO技術者集団の「ADAMTECHNOLOGIES 」と、WordPress専⾨家チーム「株式会社e2e」と技術共同開発し、WordPressサイトに特化した表⽰スピード⾼速化サービス『HP爆速くん for WP』をご提供しています。

「HP爆速くん for WP」は、Page Speed Insightsのスコアが上がらなければ一切料金をいただかない、完全成果報酬型のWordPressサイトの表示スピードの高速化サービスです。

「HP爆速くん for WP」の詳細が知りたい方は、下記リンクからご確認ください。