新しい指標、パフォーマンス スコアの更新、新しい監査など
本日、Lighthouse 6.0 をリリースします。
Lighthouse は、自動ウェブサイト監査ツールです。 サイトのユーザー エクスペリエンスを向上させる機会と診断情報を提供します。 Chrome DevTools、npm（Node モジュールおよび CLI）、またはブラウザ拡張機能（ Chrome Firefox）。多くの Google サービス（web.dev/measure、PageSpeed など） 分析情報。
Lighthouse 6.0 は、npm と Chrome ですぐに利用できます。 Canary 版。Lighthouse を利用するその他の Google サービスでは、 月末までに更新される予定ですChrome 84（7 月中旬）の Chrome Stable でリリースされます。
Lighthouse Node CLI を試すには、次のコマンドを使用します。
bash
npm install -g lighthouse
lighthouse https://www.example.com --view
このバージョンの Lighthouse には多数の変更が加えられており、 6.0 の変更履歴をご覧ください。このコースでは いくつかご紹介します
- 新しい指標
- パフォーマンス スコアの更新
- 新しい監査
- Lighthouse CI
- Chrome DevTools パネルの名前を変更
- モバイル エミュレーション
- ブラウザ拡張機能
- 予算
- ソースの位置情報のリンク
- 今後の展望
- よろしくお願いいたします。
新しい指標
Lighthouse 6.0 では、レポートに 3 つの新しい指標が導入されています。新しい指標のうち 2 つ - 最大 Contentful Paint（LCP）と Cumulative Layout Shift（CLS）は、Core Web Vitals をご覧ください。
Largest Contentful Paint（LCP）
Largest Contentful Paint（LCP）は、認識される負荷の測定値 体験できますページの読み込み中に主要な（つまり「最大」の）コンテンツが読み込まれ、 ユーザーに表示されますLCP は、First Contentful Paint（FCP）を補完する重要な 読み込みエクスペリエンスの最初の部分をキャプチャします。LCP は ユーザーがページのコンテンツを 目にするまでの時間を短くしますLCP スコアが 2.5 秒未満の場合 「良好」と見なされます。
詳しくは、Paul Irish による LCP の詳細をご覧ください。
Cumulative Layout Shift（CLS）
Cumulative Layout Shift（CLS）は、視覚的な安定性を測る尺度です。これは、 ページのコンテンツの視覚的な移動量を数値化します。CLS スコアが低い場合、 コンテンツの変更が不当に行われていないことをデベロッパーに伝えるCLS スコアが 0.10 未満の場合 「良好」と見なされます。
ラボ環境における CLS は、ページ読み込みが終了するまで測定されます。これに対し 最初のユーザー インタラクションまで、またはすべてのユーザー入力を含む CLS を測定。
詳しくは、Annie Sullivan による CLS の詳細をご覧ください。
合計ブロック時間（TBT）
合計ブロック時間（TBT）は負荷の応答性を定量化し、 入力の応答を妨げるのに十分な時間、メインスレッドがブロックされていた合計時間。 TBT は、First Contentful Paint（FCP）から操作可能になるまでの時間の合計を測定します。 （TTI）。これは TTI に付随する指標であり、メインスレッドのアクティビティを定量化する際により細かいニュアンスをもたらす ブロックすることがあります
また、TBT はフィールド指標 First Input Delay とよく相関します。 （FID）です。これは Core Web Vitals の一つです。
パフォーマンス スコアの更新
Lighthouse のパフォーマンス スコアは、 複数の指標の重み付けを適用し、ページ速度を要約します。パフォーマンス スコア 6.0 の式 できます。
| フェーズ | 指標名 | 指標の重み付け |
|---|---|---|
| 早着（15%） | First Contentful Paint（FCP） | 15% |
| 中（40%） | 速度インデックス（SI） | 15% |
| Largest Contentful Paint（LCP） | 25% | |
| 遅刻（15%） | 操作可能になるまでの時間（TTI） | 15% |
| メインスレッド（25%） | 合計ブロック時間（TBT） | 25% |
| 予測可能性（5%） | Cumulative Layout Shift（CLS） | 5% |
新たに 3 つの指標が追加されましたが、古い指標である First Meaningful Paint、 First CPU Idle、Max Potential FID です。残りの指標の重み付けは、次のように変更されました: メインスレッドのインタラクティビティとレイアウトの予測可能性を重視します。
比較のために、バージョン 5 のスコアリングを次に示します。
| フェーズ | 指標名 | 重量 |
|---|---|---|
| 早期（23%） | First Contentful Paint（FCP） | 23% |
| 中（34%） | 速度インデックス（SI） | 27% |
| First Meaningful Paint（FMP） | 7% | |
| 終了（46%） | 操作可能になるまでの時間（TTI） | 33% |
| 最初の CPU のアイドル（FCI） | 13% | |
| メインスレッド | 最大ポテンシャル FID | 0% |
Lighthouse のバージョン 5 と 6 での主なスコアの変更点は次のとおりです。
- TTI の重みは 33% から 15%に減少しました。これはユーザーに対する TTI のばらつきや、指標の最適化の不整合について、 ユーザーエクスペリエンスの向上ですTTI は、ページが完全に終了した場合にも有用なシグナル 一方、TBT が 補完 – ばらつきが少なくなる。 今回のスコア変更により、デベロッパーはより効果的に ユーザー インタラクティビティ。
- FCP の重みは 23% から 15% に減少しました。最初のピクセルがレンダリングされた場合にのみ ペイント（FCP）では全体像はつかめませんでしたこれに加えて、ユーザーがいつアクションを ユーザーが関心を持っていると思われる項目（LCP）が、読み込み体験をより正確に反映したものとなるようにする必要があります。
- Max Potential FID のサポートが終了しました。レポートに表示されなくなりますが、 JSON では引き続き使用できますTBT を見て、インタラクティビティを定量化することをおすすめします を使用します。
- First Meaningful Paint は非推奨になりました。この指標は多様で、実行可能なものがありませんでした 実装は Chrome レンダリングの内部に固有のものであるため、標準化の道筋をつける必要があります。しばらく サイトの FMP のタイミングが価値があると判断した場合、この指標は 改善されています。
- TTI と十分に区別できないため、最初の CPU のアイドルは非推奨になりました。TBT と TTI インタラクティビティの主要な指標になりました
- CLS の重みは比較的小さいものの、今後のメジャー バージョンで増加が見込まれています。
スコアの変化
これらの変更は、実際のサイトのスコアにどのような影響を与えていますか？このたび、 分析 2 つのデータセット（1 つの一般的なデータセット）を サイトと 静的サイトのセット Eleventy でビルドされています。つまり、約 20% のサイトでは、 約 30% ではほとんど変化がなく、約 50% では少なくとも 5 ポイント低下しています。
スコアの変化は、主に次の 3 つの要素に分類できます。
- スコアの重みの変化
- 基盤となる指標の実装に関するバグを修正
- 個々のスコア曲線の変化
スコアの重み付けの変更と 3 つの新しい指標の導入が、スコアの大部分を伸ばした できます。デベロッパーが最適化していない新しい指標がバージョン 6 で大幅に重み付け 確認できますバージョン 5 のテストコーパスの平均パフォーマンス スコアは約 50 でしたが、新しい Total Blocking Time 指標と Largest Contentful Paint 指標の平均スコアは約 30 でした。Lighthouse バージョン 6 のパフォーマンス スコアでは、これら 2 つの指標を合わせると重みの 50% を占めるため、当然ながら多くのサイトでパフォーマンスが低下します。
基盤となる指標の計算に関するバグの修正により、スコアが異なる場合があります。影響 サイトの数は比較的少ないですが、特定の状況ではかなりの影響を受ける場合があります。全体の約 8% のサイトが 指標の実装方法の変更によりスコアが改善され、約 4% のサイトで パフォーマンスが低下する場合があります約 88% のサイトがこれらの修正の影響を受けませんでした。
個々のスコア曲線の変化も、全体的なスコアの変動にわずかではあるものの影響を与えました。水 スコア曲線が HTTPArchive で確認された指標と合致していることを定期的に確認します。 データセットをご覧ください。実装の大幅な変更の影響を受けるサイト 個々の指標のスコア曲線を調整した結果、約 3% のサイトのスコアが改善しました。 サイトのスコアが約 4% 低下しました約 93% のサイトがこの変更の影響を受けませんでした。
スコア計算ツール
そこで、スコア計算ツールを公開しました。 パフォーマンススコアを確認しますこの計算ツールでは、Lighthouse バージョン 5 と 6 件のスコア。Lighthouse 6.0 で監査を実行すると、レポートには計算ツールへのリンクが含まれる 結果が入力されます。
<ph type="x-smartling-placeholder">
新しい監査
使用されていない JavaScript
DevTools コードを活用しています。 新しい監査の対象範囲: 未使用 JavaScript。
この監査は完全に新しいものではありません。 2017 年半ばでしたが、 Lighthouse ではパフォーマンス上のオーバーヘッドが低減し、デフォルトで無効になっています。 考えていますこのカバレッジ データの収集は、今でははるかに効率的になったため、安心して有効にできます。 使用できます。
ユーザー補助機能の監査
Lighthouse では、優れた axe-core ライブラリを使用して 分類していますLighthouse 6.0 では、以下の監査が追加されました。
- aria-hidden-body
- aria-hidden-focus
- aria-input-field-name
- aria-toggle-field-name
- form-field-multiple-labels
- 見出しの順序
- 重複 ID アクティブ
- duplicate-id-aria
マスク可能なアイコン
マスク可能なアイコン: PWA のアイコンを作成する新しいアイコン形式 どのデバイスでも きれいに表示できますPWA の見た目を整えるために、 manifest.json がこの新しい形式をサポートしているかどうかを確認する新しい監査です。
文字セット宣言
meta charset 要素では、使用する文字エンコードを宣言します。 HTML ドキュメントを解釈しますこの要素がない場合や、 ブラウザでは、多くのヒューリスティックを使用して、どのエンコードを使用すべきかを推測しています。もし ブラウザが誤って推測し、遅延の meta charset 要素が見つかった場合、通常、パーサーは それまでのすべての作業を終わらせて最初からやり直します。これはユーザー エクスペリエンスの低下につながります。この新しい ページの文字エンコードが有効かどうか、事前に定義されていることが検証されます。
Lighthouse CI
昨年 11 月の CDS オープンソース ノードである Lighthouse CI を発表しました。 継続的インテグレーションで commit するたびに Lighthouse の結果を追跡する CLI とサーバー アルファ版リリースから長い道のりを歩んできました。Lighthouse CI でサポートされるようになりました 多数の CI プロバイダ向けに構築されています。デプロイ準備完了 docker images を使用して、 ダッシュボードのデザインが刷新され、すべてのカテゴリと指標の傾向が簡単に 表示して詳細な分析を行うこともできます。
プロジェクトで Lighthouse CI の使用を開始するには、 スタートガイド
Chrome DevTools パネルの名前を変更しました
[Audits] パネルの名前を [Lighthouse] パネルに変更しました。もうそうだ！
DevTools のウィンドウ サイズによっては、パネルが » ボタンの背後にある可能性があります。ドラッグします。
順序を変更します。
- Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
Control+Shift+P（Mac の場合はCommand+Shift+P）を押す: [コマンド] メニューを開きます。- 「Lighthouse」と入力します。
Enterキーを押します。
モバイル エミュレーション
Lighthouse はモバイル ファーストの考え方に基づいています。パフォーマンスの問題は、通常の環境では デベロッパーは多くの場合、そのような条件下でのテストは行いません。このため、デフォルトの でモバイル エミュレーションが適用されます。エミュレーションは次のものから構成されます。
- 低速なネットワークと CPU の状態をシミュレーション（シミュレーション エンジンを使用） Lantern）。
- デバイス画面のエミュレーション（Chrome DevTools でも同じ）。
Lighthouse では当初から Nexus 5X を参照デバイスとして使用してきました。近年、ほとんどの組織では、 パフォーマンス エンジニアがテスト目的で Moto G4 を使用しています。現在、Lighthouse が追随 参照デバイスを Moto G4 に変更しました。実際にはこの変化はそれほど顕著ではなく ただし、ウェブページで検出できるすべての変更は次のとおりです。
- 画面サイズが 412x660 ピクセルから 360x640 ピクセルに変更されました。
- ユーザー エージェント文字列が少し変更されています（以前は
Nexus 5 Build/MRA58Nだったデバイスの部分です）Moto G (4)になります。
Chrome 81 以降、Chrome DevTools のデバイス エミュレーション リストで Moto G4 も使用できるようになりました。
ブラウザの拡張機能
「 Lighthouse の Chrome 拡張機能 Lighthouse をローカルで実行する便利な方法です。サポートが複雑だったのが残念でした。 Chrome DevTools の Lighthouse パネルの方が使い勝手がよいため（レポート 他のパネルと統合する場合）は、Chrome ブラウザを簡素化することで、 あります。
Lighthouse をローカルで実行する代わりに、この拡張機能では PageSpeed Insights を使用 API。これにより 一部のユーザーにとっては十分な代替策ではなかったからです。主な違いは次のとおりです。
- PageSpeed Insights では、非公開ウェブサイトがリモート サーバーを介して実行されるため、監査できません ローカルの Chrome インスタンスではなく Google サーバーにアクセスします非公開ウェブサイトを監査する必要がある場合は、 DevTools の [Lighthouse] パネル、または Node CLI から行います。
- PageSpeed Insights では、Lighthouse の最新リリースが使用される保証はありません。「新規顧客の獲得」目標を Node CLI を使用してください。ブラウザ拡張機能のアップデートは、リリースから約 1 ～ 2 週間後に配信されます。
- PageSpeed Insights は Google API です。これを使用すると、Google API 利用規約 。利用規約に同意しない場合や、同意できない場合は、DevTools の [Lighthouse] パネルを使用します。 Node CLI を使用できます
プロダクトのストーリーを簡素化することで、他のエンジニアリングに集中でき、 学習しますこれを受けて、Lighthouse Firefox をリリースしました。 拡張機能です。
予算
Lighthouse 5.0 で導入されたパフォーマンス バジェットは、 しきい値の追加をサポートしています。 各リソースタイプの量が （スクリプト、画像、CSS など）のみを指定します。
Lighthouse 6.0 で追加された機能 予算に関する指標のサポート そのため、FCP などの特定の指標にしきい値を設定できるようになりました。現在のところ、予算は Node CLI と Lighthouse CI に移動します
ソースの場所のリンク
Lighthouse で検出されたページに関する問題の中には、 関連する正確なファイルと行がレポートに表示されます。これを簡単に レポートで指定されている場所をクリックすると、関連するファイルが開きます。 [ソース] パネルで確認できます。
<ph type="x-smartling-placeholder">今後の予定
Lighthouse では、次のような新機能を活用するためのソースマップの収集のテストを開始しました。
- JavaScript バンドル内の重複モジュールを検出する。
- 最新のブラウザに送信されるコード内の過剰なポリフィルまたは変換を検出する。
- 使用されていない JavaScript の監査を強化し、モジュール レベルの粒度を提供。
- アクションが必要なモジュールがハイライトされたツリーマップの可視化。
- 「ソースの場所」が指定されたレポート項目の元のソースコードが表示されている。
Lighthouse の今後のバージョンでは、これらの機能がデフォルトで有効になる予定です。現在のところ、 次の CLI フラグを使用した、Lighthouse の試験運用版の監査:
lighthouse https://web.dev --view --preset experimental
ありがとうございました
Lighthouse のご利用とフィードバックに感謝申し上げます。お寄せいただいたフィードバックは Lighthouse の改善に活用させていただきます Lighthouse 6.0 をきっかけに、 ウェブサイト。
今後の対応
- Chrome Canary を開き、Lighthouse パネルを確認します。
- Node CLI
npm install -g lighthouse && lighthouse https://yoursite.com --viewを使用します。 - 以下を使用して Lighthouse CI を実行する できます。
- Lighthouse の監査に関するドキュメントをご確認ください。
- ウェブの改善にぜひご協力ください。
Google はウェブに情熱を注いでおり、デベロッパー コミュニティと協力して、 ウェブの改善にご協力ください。Lighthouse はオープンソース プロジェクトで、 誤字脱字の修正からドキュメントのリファクタリング、新規開発まで、あらゆる作業を支援するコントリビューター 監査などがあります。 投稿に興味はありますか？ Lighthouse GitHub リポジトリにアクセスしてみましょう。