2020/6/3 追記
本家レポートよりPageSpeed Insightsのスコア改善が捗る裏レポートツールを公開しました。併せてご参考ください。
https://simulate.site/cheatspeed-insights/
インタラクティブになるまでの時間
英語ではTime To Interactiveまたはその頭文字をとってTTIと表記されます。Webページ表示の体感速度を決める重要な指標です。
PageSpeed Insightsでも最も重視されていて、点数の1/3がこの指標で決まります。
Googleによると以下の説明ですが、
「操作可能になるタイミング」とは、レイアウトが安定して、主要なウェブフォントが表示され、メインスレッドでユーザー入力を処理できる状態になるタイミングとして定義されます。
https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive?hl=ja
フワッとしているのでもう少し具体的に調べてみました。
ユニークな測り方
TTIは少し変わった指標です。ページの読み込み開始からしばらくブラウザの挙動を観察して、振り返って「あのときがTTIだったね」と決める感じです。
https://github.com/WICG/time-to-interactive/blob/master/README.md
-
DocumentContentLoaded(図表のDCLEnd)以降で、 - ネットワーク接続が2本以下かつLong task(50ms以上の処理)がない5秒の期間ができたら、
- その前の最後のLong taskが終わったタイミングをTTIとする。
TTIを遅らせるのは何か
実はTTIの決め方は、調べた記事よって少しずつ記述が違いました。ネットワークについての記述がなかったり、Long taskは100ms以上としていたり、DOMContentLoadedまたはFMPとしていたり…
特にChromeがどのような実装なのかは調べていません。なのでこの記事は具体的なノウハウではなく、一般論としての考察としてお読みください。
また、私も勉強中なのでご指摘やアドバイスもお待ちしてます。
DOMContentLoaded(DCL)までの時間を短く
DOMツリーが構築されたときに発生するイベント(タイミング)です。以下DCLとします。DCLが遅いとその分TTIは後ろにずれ込むので、まずはここを改善します。
正確にはDOMContentLoaded発火の瞬間ではなく、イベントハンドラ完了のタイミングDOMContentLoadedEndです。
一般的なフロントエンドの軽量手法がDCLまでの時間短縮に直結します。
- HTML(DOM)をシンプルにする
- CSS・JavaScriptを軽くする
- 外部のCSS・JavaScriptは少ないファイル(コネクション)に束ねる
- それらをHTMLで適切に参照したり、インライン化を活用する
- DOMContentLoadedやjQuery.readyでのJavaScriptでの重たい処理を避ける(大量のDOM操作や同期通信など)
Long taskを見つけて対処する
Long taskは50ms以上継続する処理です。正確にはメインスレッドの占有ですが、Webページ上のほとんどの処理はメインスレッドで行われます。
DevToolsのPerformanceタブでチェックできます。Mainタイムラインで赤いマークが付いている処理がTTIの悪化を招いているLong taskです。Bottom-Upで原因となっているスクリプトを調べることができます。
- JavaScriptでのアニメーションをやめてCSSで実現する
- 大量のDOM操作はVirtualDOMで行う
- 長時間の処理は分割する
- Service Workerの利用を検討する
など技術的な対策も考えられますが、コンテンツや表現を見直す方が総じて効果的です。
トラッキングタグやサードパーティJavaScriptに注意
タイムラインの終盤でLong Taskを発生させているのはトラッキングタグやウィジェットなどのサードパーティJavaScriptであることが多いです。
呼び出しはインライン化されていてレンダリングをブロックしなくても、その後でLong taskで暴れ放題なスクリプトを埋め込んでいるかもしれません。
必要最低限に絞り、どうしても外せないスクリプトがLong taskを招いている場合は改善を依頼してみましょう。
ページ下部の画像は遅延読み込みを
画像が多いページでは、DOMContentLoadedの後にも画像のダウンロードが続きます。その分ネットワークビジーの状態が続くので、TTIも遅くなると思われます。
実際に画像の数とPageSpeed Insightsのスコアには弱い相関性が見られます。
スクロールが必要なページ下部の画像は遅延読み込みにすることをおすすめします。