2024 年及之後推出的效能工具

Chrome 開發人員工具中的「效能」面板,在過去 15 年多來一直以各種形式協助開發人員評估及改善執行階段效能。從「時間軸」面板開始,演變成現在的成效面板。

在這段期間,Chrome 推出了其他強大的效能產品和功能。值得一提的是,Lighthouse 在 2016 年推出,可協助您更輕鬆地找出最佳化商機。我們在 2022 年推出實驗版「效能深入分析」面板,以測試呈現成效洞察資料的新方式。

「效能」面板提供豐富的資料和功能,協助開發人員深入瞭解網頁載入和執行階段效能問題。不過,我們必須坦承,這類工具不易使用,而且不容易找出可改善網頁成效的最佳商機。此外,其他工具 (例如 Lighthouse) 可協助您篩除雜訊,並快速找出可改善的機會,但這些工具與「成效」面板並無關聯。

為了讓開發人員更輕鬆地找出並重現效能問題,我們將從 Lighthouse 和「效能深入分析」面板中導入功能和學習成果,並整合至現有的「效能」面板。我們也致力於改善使用者體驗和可用性,讓效能面板更有效地發揮網路效能最佳化工具的功能。

結果為何?單一面板:提供所有成效資料和洞察資料,操作更簡單且功能更強大。

更輕鬆地針對網站成效採取行動

您的意見回饋證實,高資訊密度會使可用性更加複雜。我們正積極開發修正項目和功能,以便提供協助。我們會優先處理重要的最佳化歷程,例如改善 Core Web Vitals。我們預計推出註解等功能,方便您標記發現的內容,並與同事分享所學。顯示資料中的相關性有助於提升複雜系統的瞭解能力,並提供更多方式讓您瞭解資料的連結方式,例如網路要求與主執行緒活動。

我們會在開發新功能後立即推出,並每隔幾個月分享面板提供的新功能更新。請耐心等候!不久後就會開始看到新功能!

在「效能」面板中運用 Lighthouse 的強大功能

我們發現開發人員會同時使用 Lighthouse 和「效能」面板,但這兩者之間的切換會造成困擾。此外,您可能需要前往「成效」面板,取得更多關於 Lighthouse 檢測結果的相關資訊,才能採取行動。這會造成摩擦,因為網頁成效的規範性總覽與詳細成效資料不相連。

我們將透過「效能」面板深度整合 Lighthouse 的效能分析功能。透過這項整合功能,Lighthouse 會在「效能」面板中顯示可改善網頁成效的最佳機會,並附上所有必要的詳細資料,讓您能採取行動。

將所有效能功能移至「效能」面板後,DevTools 中的獨立 Lighthouse 面板就會變得多餘,並且會淘汰。這個面板的淘汰時間為 2025 下半年。請特別注意,Lighthouse 不會消失。

螢幕截圖:顯示 Lighthouse 標誌的「Performance」面板

Lighthouse 將持續提供服務

PageSpeed Insights 中的 Lighthouse npm 模組和 Lighthouse 報表 (包括 PSI API) 不會淘汰。我們會持續致力於提供 Lighthouse 的開放原始碼工具,讓開發人員在偏好的環境中評估網頁效能,並確保該工具的品質。

這項整合功能可讓我們提升效能面板和 Lighthouse 的功能,方便開發人員判斷載入、回應速度和內容穩定性。

實驗性「效能深入分析」面板即將淘汰

我們推出「Performance Insights」面板,是為了進行實驗,瞭解如何進一步解決三個主要問題:減少「Performance」面板的資訊密度、支援以用例為導向的分析,以及減少使用「Performance」面板時的學習曲線。

我們透過開發人員的意見回饋,從實驗中學到很多。我們驗證了以用途為導向的分析功能 (例如「我想改善 LCP」或「我想改善網頁的回應速度」) 非常實用,而 版面配置變更追蹤功能等功能則可讓您更輕鬆地診斷及改善指標。

開發人員也發現,與「成效」面板相比,「成效深入分析」面板更容易上手,證實減少資訊密度確實能吸引使用者。不過,在許多情況下,降低密度會帶來成本,開發人員必須前往「效能」面板,才能取得採取行動所需的詳細資料。

我們將整合實驗版「效能深入分析」面板的許多功能,並將學習到的知識納入「效能」面板。我們將推出以用途為導向的分析功能,並改善資訊密度,同時整合 Lighthouse,讓網頁成效洞察資料更具可行性。

我們將於 2024 年稍晚移除「效能深入分析」實驗。

意見回饋管道

我們會陸續推出新功能,歡迎提供意見。如果您有改善新增功能的想法,或是面板中的現有流程遭到不當中斷,歡迎與我們分享。歡迎告訴我們哪些功能實用、哪些功能不實用,以及您認為可改善之處。感謝您!