このページは Cloud Translation API によって翻訳されました。

Lighthouse の進化: 継続的インテグレーション、新しいパフォーマンススコア式など

Chrome Developer Summit 2019 で、Lighthouse の最新情報とインサイトをお届けします。

Elizabeth Sweeny

Chrome Developer Summit（CDS）の Speed Tooling Evolutions の講演で、Paul Irish と私は、すべてのユーザーのために極めて高速なエクスペリエンスの構築と維持に役立つ Google の最新プロダクトと機能を紹介しました。その中心となるのが、パフォーマンスモニタリングツールである Lighthouse ファミリーの追加機能です。

Lighthouse CI アルファ版リリース

Lighthouse チームは、新しい継続的インテグレーションプロダクトである Lighthouse CI のアルファ版をリリースしました。これにより、本番環境に push する前に、すべての commit で Lighthouse を実行できます。Lighthouse CI は、Lighthouse を複数回実行し、静的監査または指標のしきい値をアサートしてから、Lighthouse レポートをサーバーにアップロードして、差分と基本的なカテゴリスコアの履歴を確認します。既存の budgets.json 設定は、Lighthouse のあらゆる監査やカテゴリの結果についてアサーション可能な新しい構文とシームレスに連携します。

Lighthouse CI は、すぐに使用できる Travis CI、Circle CI、GitHub Actions と、いくつかの構成を行った Ubuntu またはコンテナベースの CI サービスをサポートしています。Lighthouse CI サーバーをオンプレミスにインストールすることも、即時設定に Docker イメージを使用することもできます。今すぐ使用を開始するための手段として、Lighthouse で公開される無料のレポートストレージを代わりにご利用いただけます。

近日提供予定: パフォーマンススコアの更新

Lighthouse パフォーマンススコアバージョン 6 が変更されます。バージョン 5（2019 年 11 月現在）の Lighthouse には、パフォーマンススコアが 0 ～ 100 になるように重み付けおよび統合された 5 つの指標（First Contentful Paint、Speed Index、First Meaningful Paint、Time to Interactive、First CPU Idle）があります。

Lighthouse のバージョン 5 とバージョン 6 のパフォーマンススコアの式の比較

詳細については、Lighthouse のパフォーマンススコアリングをご覧ください。

Lighthouse バージョン 6 では、First CPU Idle（FCI）と First Meaningful Paint（FMP）の代わりに、新しい指標である Largest Contentful Paint（LCP）と Total Blocking Time（TBT）が導入されています。5 つの指標それぞれの重みは、負荷とインタラクティビティの測定のさまざまなフェーズのバランスが取れるように調整されます。

Lighthouse チームは、すべてのスコアリング曲線が微調整され、指標が成熟し、徹底的にテストされるよう、引き続き取り組んでいます。Lighthouse v6 のパフォーマンススコアは 2020 年 1 月にリリースする予定です。

注: パフォーマンスエンジニアは、ばらつきと環境間の不整合という 2 つの個別の課題のために、スピードツールの結果を再現するのが難しい場合があります。ばらつきとは、テスト環境が同じままでも数値が変化するという問題です。環境間の不整合は、同じページでも異なる環境（たとえば、DevTools と PageSpeed Insights）でテストを実行すると、得られる結果が異なるという問題です。Lighthouse チームはばらつきを軽減するべく取り組んでいますが、ばらつきの原因と対処方法を理解しておいていただくことは役に立ちます。Lighthouse チームは、環境間の差を減らすためのキャリブレーション方法も調査中ですが、少なくとも現時点では、条件やハードウェアが異なると測定値も異なることが予想されます。

Lighthouse スタックパック

Lighthouse では、サイトがフレームワークやコンテンツマネジメントシステム（CMS）を使用しているかどうかを自動的に検出し、スタック固有のアドバイスをレポートに追加できます。Stack Pack では、Lighthouse のコア監査に加えて、コミュニティのエキスパートが厳選したカスタマイズされた推奨事項が追加されます。

Lighthouse レポートで、React アプリケーションで画面外画像の読み込みを延期することに関する推奨事項を確認。

現在、Angular、WordPress、Magento、React、AMP のスタックパックがあります。独自の Stack Pack を作成するには、GitHub リポジトリにアクセスするか、Lighthouse チームにお問い合わせください。

近日提供予定: Chrome 拡張機能としての Lighthouse プラグイン

Lighthouse プラグインは、Lighthouse の拡張性を活用できるもう 1 つの方法です。現在、Lighthouse のコア監査でカバーされていない品質チェックが多数あります。原因は、一部のデベロッパーにしか適用されないか、チームに監査を作成する帯域幅がないことが原因です。

Lighthouse プラグインを使用すると、コミュニティエキスパートは新しいチェックセットを実装して、Lighthouse で新しいカテゴリとしてレポートに追加できます。現時点では、プラグインは Lighthouse CLI でのみ機能しますが、目標は DevTools の [Audits] パネルでもプラグインの実行を有効にすることです。

Google パブリッシャー広告およびユーザーエクスペリエンス用の Lighthouse プラグインを実行するためのオプションが表示された Chrome DevTools の [監査] パネル。 — DevTools の監査パネルのコミュニティプラグイン（ベータ版）

ユーザーが Chrome ウェブストアから Lighthouse プラグイン拡張機能をインストールすると、インストールされているプラグインが DevTools によって識別され、[Audits] パネルのオプションとして提示されます。Lighthouse チームは、今後数か月以内にプラグインアプローチのサポートを構築する予定です。どうぞご期待ください。それまでの間、プラグインをノードモジュールとして今すぐ作成して、CLI を介してすべての Lighthouse ユーザーがアクセスできるようにしましょう。

詳細

Lighthouse など、CDS 2019 のパフォーマンスツールに関する最新情報について詳しくは、Speed ツールの進化に関する以下の動画をご覧ください。

皆様からのフィードバックは Lighthouse の改善に役立てさせていただきます。ぜひ Lighthouse CI をお試しください。また、スタックパックを作成するか、Lighthouse プラグインを作成して、こちらからお知らせください。