Google Lighthouseは、多くのウェブサイトが単一のスコアでパフォーマンスを測定する事実上のツールとなっています。Lighthouse Performance Scoreです。 新しいバージョンであるLighthouse 6.0は、Chrome Canary、PageSpeed Insights、GSC ConsoleのNPMで利用できるようになりました。 7月中旬までに、Lighthouse 6.0はChrome 84ユーザーに完全にロールアウトされます。 今こそ、Lighthouse 6.0のスコア監査を使用して、サイトが新しいバージョンに対応できるように準備されていることを確認するときです。
Lighthouse 6.0には、パフォーマンススコアを計算するための新しい重み付け式に加えて、新しく減価償却された指標が付属しています。 この新バージョンは、Google Page ExperienceのアップデートでGoogleのランキングアルゴリズムにCore Web Metricsが追加されるという発表とともに、 Google Page Experienceが認識速度(ユーザーがページを読み込み済みとして認識する速度)を強調していることを明確に示しています。 ユーザーがサイトの読み込みを認識する速度が速いほど、ランクが高くなり、コンバージョンが多くなります。
最適化に必要な6つの指標
Googleは、ユーザーがウェブをどのように体験するかを重視しています。 2つのWebサイトの読み込みがまったく同時に完了する場合がありますが、ページ上のコンテンツの表示方法によっては、1つのWebサイトの読み込みが速くなる場合があります。 両方のサイトが同時にロードを終了した間、Googleは後者を支持します。つまり、より高速に認識されるパフォーマンスを備えたサイトです。
Lighthouse 6.0のスコアは、6つのユーザー中心の速度メトリックの加重平均に基づいています 。 First Contentful Paint (FCP)、Speed Index (SI)、およびLargest Contentful Paint (LCP)は、認識される負荷速度を測定し、バージョン6のウェブサイトのLighthouseスコアで55%の重みを保持します。 さらに40%のスコアは、応答性を測定する指標に基づいています。これは、ユーザーの速度に対する認識に影響を与えるもう1つの側面です。 これには、Total Blocking Time（TBT）とTime to Interactive（TTI）が含まれます。 スコアの最後の5%は、累積レイアウトシフト（CLS）と呼ばれる視覚的安定性を測定する指標に基づいています。
Lighthouse 5.7のスコアからのFirst Meaningful Paint（FMP）とFirst CPU Idle（FCI）は、ユーザー中心の観点から速度を測定するためのより良い指標に置き換えられました。 これらは、Lighthouse 6.0で最大のContentful Paint（LCP）とTotal Blocking Time（TBT）です。
| 灯台5.7 | 重量 | Lighthouse 6.0 | 重量 |
|---|---|---|---|
| 最初の満足塗料（FCP） | 20% | 最初の満足塗料（FCP） | 15% |
| 速度インデックス（SI） | 27% | 速度インデックス（SI） | 15% |
| 最初の意味のあるペイント（FMP） | 7% | 最大コンテンツ表示時間（LCP） | 25% |
| 最初のCPUアイドル（FCI） | 13% | 総ブロック時間（TBT） | 25% |
| 対話時間（TTI） | 33% | 対話時間（TTI） | 15% |
| - | - | 累積レイアウトシフト数（CLS） | 5% |
Lighthouse 6.0に備えてWebサイトを監査する際に重視すべき6つのスピード指標を次に示します。 メトリクスは、ページの読み込み時に測定される順序でレイアウトされます。
目標とする速度とメトリックごとの最適化手法を網羅した簡易チェックリストは、この記事の最後に掲載されています。
最初のコンテンツフルペイント
FCPは、ユーザーが画面上のページコンテンツを見ることができる最初のポイントです。 このコンテンツには、テキスト、画像、グラフィック、またはSVGファイルが含まれます。 FCPのウェイトはLighthouse 5.7で20%でしたが、Lighthouse 6.0のスコアより15%しかウェイトを保持していませんでした。
上のフィルムストリップでは、最初のページロードのFCPは0.6秒で測定されています。 これは、TheTieBar.comのホームページにコンテンツが最初に表示されるときです が、すべてのコンテンツが表示されているときではありません。 これは最初と最大の満足感のある塗料の重要な違いです。 LCPは、折りの上のコンテンツが表示されているときに0.9秒で測定されます。
Lighthouse 6.0のスコア監査を実行する際には、ページの平均FCP 2秒以下を確認してください 。これは、75パーセンタイルの指標のしきい値であり、Googleによって高速と見なされるためです。 2秒と4秒の間のFCPは中程度の速度と見なされ、4秒を超えるFCPは50パーセンタイルを下回り、低速として分類されます。
FCPのロードが遅すぎる場合は、次のいずれかが原因である可能性があります。
- レンダリングブロックリソースが多すぎます
- 大きなCSSファイル
- サードパーティのオリジンへのセキュアな接続の欠如
- サーバーの応答時間が長い
- 複数ページリダイレクト
- キャッシュされていない静的リソース
- DOMサイズが大きすぎます
FCPを最適化するには、次の点を考慮してください。
- 重要なリソースをインライン化し、重要でないリソースを保留し、未使用のリソースを削除して、レンダリングブロックURLの影響を軽減します。
- CSSから不要な文字をすべて削除して、ファイルのサイズを小さくします。
- プリコネクトを使用して、重要なサードパーティオリジンへの早期接続を確立します。
- サーバのアプリケーションロジックを最適化するか、サーバハードウェアをアップグレードしてメモリを増やすことで、サーバの応答時間を短縮します。
- 1ページ以上のリダイレクトは避けてください。
- HTTPキャッシングを使用して静的リソースをキャッシュします。
- DOMサイズを小さくするには、1,500ノードの合計が少なく、32ノードの深さが少なく、60子ノードの親ノードが小さい場合があります。
速度インデックス
SIは、ページ読み込みの視覚的な進行を測定し、コンテンツがどのくらい速く描画されるかの全体的なスコアを計算します。 Lighthouse 5.7では、SIはウェブサイトのパフォーマンススコアよりも27%重みがありました。 Lighthouse 6.0では、これは半減少し、ページのパフォーマンススコアの15%に影響します。 Googleは、画像の表示が遅いページはぎこちないと認識される可能性があるため、これを主要な知覚指標と見なしています。
Lighthouseでは、ページがブラウザにロードされるときにページのフィルムストリップをキャプチャし、フレームごとのビジュアル進行を分析することでSIを測定します。 ページの表示されている部分が表示される平均時間によってSIが決まります。 このメトリックは、デバイスの画面サイズによって異なります。
Lighthouse 6.0のスコア監査を経て、4.3秒以内にSIを目指します 。 この速度は75パーセンタイルにランクされ、Googleによって高速と見なされます。 SIが4.3 ～ 5.8秒のページは中程度であり、5.8秒より遅いSIは50パーセンタイルを下回り、低速と見なされます。
SI時間が遅いのは、次のような場合があります。
- メインスレッドのロード時間が4秒を超えている
- JavaScriptの実行時間が3.5秒を超える
- 大きなフォントファイルを使用すると、目に見えないテキスト(FOIT)がフラッシュします。
SI時間を短縮するには、次の点を考慮します。
- コード分割を実装し、未使用のコードを削除し、コードを圧縮して、メインスレッドの負荷とJavaScriptの実行時間を削減します。
- FOITを回避するために、Webfontの読み込み中にテキストが表示されたままになる
最大のコンテンツフルペイント
LCPはLighthouse 6.0に追加された新しい指標であり、サイトのパフォーマンススコアで25%の重みを受けます。 LCPは、Lighthouse 5.7のFirst Meaningful Paint (FMP)に代わるものです。 どちらの指標も最大のコンテンツ要素が表示される時間を測定しますが、FMPは一貫性のない結果を生成することで悪名高く、特定のWebブラウザでのみ標準化できます。
LCPは、最大のコンテンツ要素が画面上に完全に表示されるタイミングを測定します。 測定されるコンテンツ要素には、ブロックレベルの要素、画像（SVGファイル内の画像を含む）、およびビデオが含まれます。 これは、ほとんどのユーザーがページを完全にロードされていると認識し、購入する可能性が高いポイントインタイムを示すため、eコマースWebサイトにとって非常に重要な指標です。
上記の例では、LCPは0.9秒で、メインイメージが完全にペイントされています。 このメトリックは、ページが完全に読み込まれているのに、コンテンツが折りの下に読み込まれている可能性があることをユーザーが認識した瞬間を捉えます 。
Layer0(現在のEdgio)のような、パフォーマンスの高いWebサイトは、1 Secondの下でLCPを配信します。 2.5秒までのLCP は高速と見なされ、このメトリックの75パーセンタイルでランク付けされます。 2.5秒から4秒の間のLCPは中等度であり、改善が必要であると見なされ、4秒を超えるLCPは50パーセンタイルを下回り、Googleによって遅いと見なされます。
LCPの低速化は、通常、次の1つまたは複数の原因になります。
- サーバーのレスポンス時間の遅さ
- JavaScriptおよびCSSのレンダリングブロック
- リソースのロード時間が長い
- クライアント側のレンダリングの問題
Lighthouse 6.0スコア監査中に目的のLCPよりも遅いと判断した場合は、次の点を考慮してください。
- 利用可能な最も近いCDNにトラフィックをルーティングし、アセットをキャッシュし、HTMLページをキャッシュファーストで提供し、サードパーティ接続を早期に確立することで、サーバーの応答時間を最適化します。
- 不要なCSSを削除してCSSを削減し、重要でないCSSとインラインクリティカルCSSを延期します。 JavaScriptファイルを圧縮することで、JavaScriptのブロック時間を短縮します。
- リソースのロード時間を短縮するには、イメージファイルとテキストファイルを最適化および圧縮し、重要なリソースをプリロードします。
- サーバー側レンダリングとプリレンダリングを使用して、クライアント側レンダリングを最適化します。
1対1のデモをスケジュールする 今すぐコンサルティング型の会話をスケジュールして、Layer0(現在はEdgio)が1秒未満のページロードを実現する方法を学び ましょう。 ここをクリックしてください。
合計ブロック時間
TBTは、13%の重量を保持していたLighthouse 5.7のFCIに代わるものです。 Lighthouse 6.0では、TBTはページの応答性を測定し、パフォーマンススコアの25%を占めます。 TBTは、ページが確実にインタラクティブになるまでの非インタラクティブなページの重大度を測定します。
あなたはこれらの苦痛なインスタンスを知っています:あなたはページが読み込まれるのを待っています、そして最後に-それは準備ができているように見えます。 表示したい商品をタップしますが、何も起こりません。 もう一度タップしますか？ この待ち時間は、文字通り消費者にストレスを引き起こすことが知られています 。 基本的に、TBTは、ページの非インタラクティブ性による消費者のストレスを感じる時間の長さです。
出典： Web.de V
このメトリックは、最初に表示されたコンテンツ要素（FCP）からユーザーがページを完全に操作できる時間（TTI）までの「ブロック」時間（50ミリ秒以上かかるタスク）の合計を計算することによって測定されます。 たとえば、上の画像では、メインスレッドで5つのタスクが実行されていますが、そのうちの3つだけが50msを超えています。 最初は200ms、2番目は40ms、3番目は105msです。 TBTは（200 + 40 + 105）345msです。
50ミリ秒を超えるタスクは、ユーザーがページの遅延、または悪化、非アクティブであることに気付き、ユーザーがページを離れるのに十分な長さになります。 これを回避するには、300ms未満のTBTを高速と見なすようにします。 300ms ～ 600msのTBT は中程度の速度と見なされ、改善が必要です。 600ms未満のTBTは50percentileを下回り、低速と見なされます。
長いタスクは、通常、次の1つ以上が原因で発生します。
- メインスレッドを250ミリ秒以上ブロックするサードパーティコード
- JavaScriptの実行に3.5秒以上かかる
- ロード中にメインスレッドが4秒を超えてビジー状態になっている
- 大量のネットワーク要求と大量の転送サイズ
このメトリックを改善するには、次の点を考慮してください。
- スクリプトタグのasync属性またはdefer属性を使用して、サードパーティJavaScriptを効率的にロードし、重要なサードパーティオリジンへの早期接続を確立し、遅延ロードを使用します。
- JavaScriptの実行を高速化し、メインスレッドの負荷を軽減するには、コード分割を実装し、未使用のコードを削除してコードを圧縮します。
- CSSとJavaScriptを最適化して、リソース数と転送サイズを削減します。
インタラクティブになるまでの時間
TTIはLighthouse 5.7から引き継いだ3番目の指標ですが、GoogleはLighthouse 6.0ではその重みを33%から15%に減らしました。 TTIは、TBTの関連指標であり、ページが確実に、または完全にインタラクティブになるまでにかかる時間を測定します。 Lighthouseは、最初のコンテンツ要素が表示され、その最初のスクリプト（存在する場合）がロードされたときに、ページが確実にインタラクティブであると見なし、50ミリ秒以内にユーザー入力に応答できます。
ユーザーにとって、TTIが遅いと、ページが非アクティブであるか壊れているかのように感じることがあります。 ページはインタラクティブに見えますが、実際にはメインスレッドがブロックされているためではありません(TBTで測定)。 Lighthouse 6.0のWebサイトを監査する際には、TTIを5.2秒以内で高速と見なされるようにします 。 5.2 ～ 7.3秒のTTIは中程度の速度と見なされ、7.3秒より遅いTTIは低速と見なされ、消費者のサイト滞在意欲に影響します。
Lighthouse 6.0のスコア監査でTTI速度が低下している場合は、次のいずれかが原因である可能性があります。
- 大きなペイロードサイズと長いスクリプト解析時間
- リソースのロード時間が長い
- サードパーティのコードがメインスレッドを250ミリ秒以上ブロックする
- クリティカルリクエストチェーン
- メインスレッドの速度とJavaScriptの実行時間が遅い
- リソース数が多い、または転送サイズが大きい
TTI時間を短縮するには、JavaScriptを最適化します。 これには、
- JavaScriptファイルを縮小および圧縮して、ペイロードサイズとスクリプト解析時間を短縮します。
- ロード時間を短縮するために、プリロード要求またはプリコネクトを追加します。
- スクリプトタグのasync属性またはdefer属性を使用し、遅延読み込みを使用することで、サードパーティのJavaScriptを効率的にロードします。
- 重要なリソースの数を減らし、残りのリソースをロードする順序を最適化することで、重要なリクエストチェーンがパフォーマンスに与える影響を軽減します。
- コード分割を実装し、未使用のコードを削除し、コードを圧縮して、メインスレッドの負荷とJavaScriptの実行時間を削減します。
- CSSとJavaScriptを最適化して、リソース数と転送サイズを削減します。
累積レイアウトシフト
CLSはLighthouse 6.0で導入された3番目の新しいメトリックであり、Lighthouse 5.7のメトリックに代わるものではない唯一のものです。 CLSはLighthouse 6.0のスコアの最後の5%を占め、視覚的な安定性を測定します。
このメトリックは、ユーザーが予期しないレイアウトのシフトを経験する頻度を測定します。 これは以前に経験したことがあります。商品をタップしようとしているときに、要素がシフトしたために、突然、ページ上の他のものをタップします。 これらの経験は非常に迷惑であり、ユーザーにとってはがっかりしていると思われる場合があります。
CLSは、ページの全期間中に発生した予想外のレイアウトシフトごとの個々のレイアウトシフトスコアの合計で測定されます。 優れたCLSは0.1未満 で、パフォーマンスの75パーセンタイルにランクされます。 0.1から0.25の間のCLSは中等度と見なされ、0.25を超える測定値は50パーセンタイルを下回り、Googleでは遅いと見なされます。
Lighthouse 6.0のスコア監査でCLSが不十分であることがわかった場合、次のいずれかが原因である可能性があります。
- 画像または動画のサイズ変更
- 読み込みが遅く、意図したサイズよりも大きく表示されたり小さく表示されたりするフォント
このメトリックを改善するには、次の点を考慮してください。
- 画像やビデオ要素に正確な寸法を含める
- ポップアップ広告やバナーを避ける
- FOIT/FOUTの原因となるフォントを避ける
LighthouseスコアはGoogleがあなたのサイトをどう思っているかを示します
ページのLighthouse Performance Scoreは、Googleがページを速度の観点からどのように認識しているかを示します。 Lighthouse 6.0の各メトリックは、ユーザーがどのように速度を認識しているかを測定するGoogleの最良の試みを反映しています。 スコアが基準を下回った場合、ユーザーだけでなく検索大手自身からも遅いと認識され、収益とSEOに悪影響を及ぼします。
Googleは検索エンジンの結果ページでサイトをより速くランク付けします。 SEO以外にも、サイトの速度はコンバージョンと収益に大きな影響を与えることがわかっています。 たとえば、Amazonは、ページの読み込みに1秒の遅れがあると、年間16億ドルの損失を被る可能性があることを発見しました 。
結論
Lighthouseのこの最新バージョンは、検索巨人が知覚速度メトリクスに重点を置いていることを示しています。 Lighthouse 6.0のスコアメトリクスは、訪問者がページを完全に読み込まれたと認識する速度を測定します(バックグラウンドでプロセスを実行している場合でも)。
最初のコンテンツフルペイント、スピードインデックス、最大のコンテンツフルペイントの3つの指標は、認識されたロード速度を測定し、パフォーマンススコアの55%を占めています。 2秒のFCP、2.5秒のLCP、4.3秒以下のSIを目標としてください。
パフォーマンススコアの40%は、ページの応答性を測定する知覚指標に基づいています。 これには、合計ブロック時間と対話時間が含まれます。 高速なLighthouse 6.0スコア監査では、TBTが300ミリ秒未満で、TTIが5.2秒未満で表示されます。そうでない場合、ユーザーはサイトを危険だと認識します。
最後に、テキストや画像が画面に飛び込んだり飛び出したりするのが好きな人はいません。 累積レイアウトシフトは、Lighthouse 6.0の監査で考慮すべき6番目の指標です。 CLSの測定値を0.1未満にすると、パフォーマンススコアに保持される重みの5%をすべて受け取ることができます。
Lighthouse 6.0 Score監査で目標とする速度を網羅した簡単なチェックリストと、メトリックごとの最適化テクニックを入手するには、以下のフォームに記入してください。
