Chrome DevTools のパフォーマンス パネルは、15 年近くにわたり、デベロッパーがランタイム パフォーマンスを測定して最適化するうえで役立ってきました。最初は [タイムライン] というパネルでしたが、現在は [パフォーマンス] パネルに進化しています。
この間、Chrome では他の強力なパフォーマンス プロダクトや機能もリリースされています。特に、最適化の機会をより簡単に見つけられるように、2016 年に Lighthouse がリリースされました。パフォーマンス分析情報の試験運用版パネルは、パフォーマンス分析情報を表示する新しい方法をテストするために 2022 年にリリースされました。
[パフォーマンス] パネルには、ページの読み込みと実行時のパフォーマンスの問題を詳しく調べるのに役立つデータと機能が満載されています。ただし、現実的には、使用が難しい場合や、ページのパフォーマンスを改善するための最大の機会を特定するのが難しい場合もあります。また、ノイズを整理して改善の余地をすばやく特定できる Lighthouse などの他のツールは、[パフォーマンス] パネルから切り離されています。
デベロッパーがパフォーマンスの問題を簡単に特定して再現できるようにするため、Lighthouse と [パフォーマンス分析情報] パネルの機能と学習結果を、既存の [パフォーマンス] パネルに統合します。また、UX とユーザビリティにも重点を置き、ウェブ パフォーマンスの最適化ツールとしての [パフォーマンス] パネルの有効性を高めています。
結果はどうなりましたか？すべてのパフォーマンス データと分析情報を 1 つのパネルで確認できる、これまで以上に簡単で強力なパネル。
ウェブ パフォーマンスに関するアクションが簡単に
ご意見を拝見して、情報量の多さがユーザビリティの課題を複雑にしていることがわかりました。解決に向けて、現在、修正と機能の開発を積極的に進めております。Core Web Vitals の改善など、主要な最適化プロセスは優先的に処理されます。アノテーションなどの機能も導入する予定です。これにより、検出結果をマークしたり、学んだことを同僚と共有したりできるようになります。データ内の相関関係を把握することで、複雑なシステムを理解する能力を高めることができます。また、メインスレッド アクティビティへのネットワーク リクエストなど、データの接続方法をさまざまな方法で明らかにできます。
新機能は開発が完了次第リリースされ、パネルで利用できる新機能の最新情報は数か月ごとにお知らせします。しばらくお待ちください。まもなく新機能が利用可能になります。
[パフォーマンス] パネルの Lighthouse の機能
デベロッパーが Lighthouse パネルとパフォーマンス パネルの両方を使用していることがわかりましたが、両者を切り替えるのは難しい作業です。また、Lighthouse の検出結果に対応するには、[パフォーマンス] パネルに移動して詳細なコンテキストを確認することが必要になる場合があります。ページのパフォーマンスに関する推奨事項の概要と詳細なパフォーマンス データが分離されているため、不便が生じます。
Lighthouse のパフォーマンス分析を [パフォーマンス] パネルに統合します。この統合により、Lighthouse はパフォーマンス パネル内でページのパフォーマンスを改善するための最優先の改善案をハイライト表示し、その改善案に対応するために必要な詳細情報をすべて提供します。
パフォーマンス機能がすべて [パフォーマンス] パネルに移動された後、DevTools の独立した Lighthouse パネルは不要になり、廃止されます。このパネルのサポート終了は 2025 年後半まで行われません。Lighthouse は廃止されませんことを明確に伝えることが重要です。
Lighthouse は今後も継続されます
Lighthouse npm モジュールと PageSpeed Insights の Lighthouse レポート（PSI API を含む）はサポートが終了しません。Google は、デベロッパーが好む環境でページのパフォーマンスを評価するために使用できるオープンソース ツールとして、Lighthouse の可用性と品質の向上に引き続き取り組んでいます。
この統合により、パフォーマンス パネルと Lighthouse の両方の機能を強化し、読み込み、応答性、コンテンツの安定性について検討するデベロッパーをサポートします。
試験運用版の [パフォーマンス分析情報] パネルのサポート終了
パフォーマンス分析情報パネルは、3 つの主要な問題（パフォーマンス パネルの情報量の削減、ユースケース ドリブンの分析のサポート、パフォーマンス パネルの使用に伴う学習曲線の短縮）をより適切に解決する方法を検討するための試験運用版としてリリースされました。
Google は、デベロッパーからのフィードバックを通じて、このテストから多くのことを学びました。Google は、ユースケース ドリブンの分析（「LCP を最適化したい」、「ページの応答性を高めるために最適化したい」など）が非常に有用であること、レイアウト シフト トラックなどの機能により、指標の診断と改善が大幅に容易になることを確認しました。
また、デベロッパーは、パフォーマンス分析パネルの方がパフォーマンス パネルよりも使いやすいと回答しており、情報量を減らしたことが好評を得ていることが確認されました。ただし、この密度の低下は多くの場合、デベロッパーが [パフォーマンス] パネルに移動して、対応に必要な詳細なデータを取得する必要がありました。
得られた知見と、試験運用版の [パフォーマンス分析情報] パネルの多くの機能は、[パフォーマンス] パネルに統合されます。ユースケース ドリブンの分析や情報密度の向上などの機能に加え、Lighthouse との統合により、ページのパフォーマンスに関する分析情報をこれまで以上に実践に役立てることができます。
パフォーマンス分析情報の試験運用版は、2024 年中に削除されます。
フィードバックの送信先
新機能をリリースするにあたり、フィードバックをお待ちしております。追加された機能の改善方法についてアイデアをお持ちの場合や、パネル内の既存のフローが過度に中断されている場合は、お知らせください。うまく機能している点、うまく機能していない点、改善の余地がある点について、ぜひお聞かせください。ありがとうございました