【Lighthouse 10】Google の Lighthouse がアップデート！スコアの評価項目「TTI」廃止やベストプラクティスの項目変更など

2023年2月27日 カテゴリ - サイトスピード

2023年9月に Google の Chrome Developers ブログにて、ウェブサイト監査ツール Lighthouse （ライトハウス）の新バージョン「 Lighthouse 10 」の概要が紹介されました。

Core Web Vitals の評価点にも影響する指標「 Time To Interactive 」の廃止や、ベストプラクティスのチェックポイントの変更など、SEO 施策やユーザー体験向上に重要なリリース内容です。

本記事では、新バージョン「 Lighthouse 10 」リリースによる変更点や概要について解説します。

Lighthouse 10 による主な変更点

Lighthouse10 リリースによる主な変更点は、以下の3つです。

• 指標「 Time To Interactive 」が廃止。評価の比重も変動。
• 「 back/forward cache (bfcache) 」の可否チェックを新機能として追加
• ベストプラクティス「ユーザーがパスワードフィールドにペーストできるようにする」が「ユーザーが入力フィールドに貼り付けられるようにする」に変更

順に詳細を解説します。

指標「 Time To Interactive 」が廃止。評価の比重も変動。

これまで Lighthouse の評価点を改善するための指標としてチェックされていた「 Time To Interactive 」（以下、TTI）が、今回のリリースで廃止されます。

また、評価点100点のなかで TTI は10%の比重を持っていましたが、その比重は今回の廃止に伴って、Core Web Vitals の3指標のうちの一つでもある「 Cumulative Layout Shift 」（以下、CLS ）に統合されます。

これで、CLS の比重は25%になります。

TTI 廃止による影響

Google が公開したブログの中では、一般的に TTI よりも CLS のほうが高い評価を出すことが多いため、今回のリリースによって評価点自体は改善するだろうと記載しています。

We expect this to improve most pages’ performance scores, since most pages tend to score better on CLS than TTI. In an analysis of 13 million page loads in the latest HTTP Archive run, 90% of those pages would see an improvement in their Lighthouse performance score, with 50% of them seeing a performance improvement of more than 5 points.

ほとんどのページがTTIよりもCLSでより良いスコアを出す傾向があるため、これによってほとんどのページのパフォーマンス・スコアが改善されるものと思われます。HTTPアーカイブの最新版で1300万ページのロードを分析したところ、これらのページの90%でLighthouseのパフォーマンススコアが改善され、そのうち50%では5ポイント以上のパフォーマンス改善が見られました。

What’s new in Lighthouse 10 – Chrome Developers ※原文は英語。日本語はDeeplによる翻訳
https://developer.chrome.com/blog/lighthouse-10-0/

TTI 廃止に伴って SEO 担当者・マーケターが必要な対策

今回のリリースによって、CLS の、すなわち Core Web Vitals の比重が増えました。
このリリースに付随して特別必要な対策はありませんが、これまで以上に Core Web Vitals の改善が重要になります。

【補足】TTI とは

TTI とは、ページにアクセスしてから（読み込みが開始されてから）、サイト訪問者が操作可能になるまでの時間のことです。
読み込みの応答性を計測するための指標です。

参考：Time to Interactive (TTI)
https://web.dev/tti/

【補足】CLS とは

CLS とは、視覚的な安定性を測定するための指標です。
具体的には、ページの表示中に発生した予期しないレイアウトシフトごとにレイアウト シフト スコアの最大値を測定しています。

日常的にウェブサイトを操作しているときに、しばらくたってから画像が表示されて「クリックしようとしていた位置がずれてしまった」「別のリンクを誤タップしてしまった」などの経験があると思います。
そのような事象が多く発生するページは CLS が低く評価されます。

公式ドキュメントに記載の動画がわかりやすいため、ぜひご覧ください。

参考：Cumulative Layout Shift (CLS) – web.dev
https://web.dev/cls/

「back/forward cache (bfcache)」の可否チェックを新機能として追加

ブラウザの機能で、すでにアクセスしたことのある前のページに戻ったり、次のページに進んだりできます。
back/forward cache（バック/フォワードキャッシュ）とは、閲覧済みのページの情報をメモリに保存しておき、初めてアクセスしたときに比べて、高速で表示できる機能です。

しかし、このバック/フォワードキャッシュを使ってブラウザがページを高速で表示する機能を妨げる方法があります。
今回のアップデートで、バック/フォワードキャッシュが正常に動くかどうか、および正常に動作させるための原因が分かるようになりました。

この機能は、ページの表示速度向上に向けて、有用な示唆が得られると期待できます。

バック/フォワードキャッシュ – web.dev
https://web.dev/i18n/ja/bfcache/

ベストプラクティス「ユーザーがパスワードフィールドにペーストできるようにする」が「ユーザーが入力フィールドに貼り付けられるようにする」に変更

ベストプラクティスの評価項目である「ユーザーがパスワードフィールドにペーストできるようにする」が「ユーザーが入力フィールドに貼り付けられるようにする」に変更されます。

以前はパスワードの入力欄のみがペーストできるように、という内容でしたが、今回のアップデートでパスワードに限らずすべてのフォームがペーストできるようにすべき、という内容に変わるとのことです。

評価基準が変わるため、自社サイトの入力フォームがどのような仕様になっているか、確認しましょう。

現在は開発環境でのみ内容が反映されている

今回のアップデートは、記事執筆時点では PageSpeed Insights にはまだ反映されていません。

アップデートを告知した記事では以下のように、開発者用の Chrome 「 Chrome Canary 」と Node.js のパッケージ管理システム「 npm 」でのみ利用可能です。

Lighthouse is a website auditing tool that helps developers with opportunities and diagnostics to improve the user experience of their sites.

Lighthouse 10 is available immediately on the command line through npm and in Chrome Canary. It will land in Chrome stable in Chrome 112 and in PageSpeed Insights in the coming weeks.

Lighthouseは、開発者がサイトのユーザーエクスペリエンスを向上させるための機会と診断を支援するウェブサイト監査ツールです。

Lighthouse 10は、npmを介したコマンドラインとChrome Canaryですぐに利用可能です。今後数週間のうちに、Chrome 112のChrome安定版とPageSpeed Insightsに上陸する予定です。

What’s new in Lighthouse 10 – Chrome Developers ※原文は英語。日本語はDeeplによる翻訳
https://developer.chrome.com/blog/lighthouse-10-0/

まとめ

本記事では、2023年2月9日に発表された Lighthouse 10 アップデートの内容についてご紹介しました。

特に大きな変更点として、パフォーマンススコアの評価に利用されていた指標「TTI」が削除され、Core Web Vitals のひとつ「CLS」の比重が大きくなった点です。
Google 記載の記事では、今回のアップデートによってスコアが下がることはなく、上がることのほうが多いと記載しています。
しかし、ページによってパフォーマンスの変化は異なることが予測されるため、PageSpeed Insights に反映された際にはどのような評価になっているか確認しましょう。

本記事は、以下 Chrome Developers の記事を参考に執筆しています。

What’s new in Lighthouse 10 – Chrome Developers
https://developer.chrome.com/blog/lighthouse-10-0/