Chrome 開發人員工具中的「效能」面板,在過去 15 年多來一直以各種形式協助開發人員評估及改善執行階段效能。從「時間軸」面板開始,演變成現在的成效面板。
在這段期間,Chrome 推出了其他強大的效能產品和功能。值得一提的是,Lighthouse 在 2016 年推出,可協助您更輕鬆地找出最佳化商機。我們在 2022 年推出實驗版「效能深入分析」面板,以測試呈現成效洞察資料的新方式。
「效能」面板提供豐富的資料和功能,協助開發人員深入瞭解網頁載入和執行階段效能問題。不過,我們必須坦承,這類工具不易使用,而且不容易找出可改善網頁成效的最佳商機。此外,其他工具 (例如 Lighthouse) 可協助您篩除雜訊,並快速找出可改善的機會,但這些工具與「成效」面板並無關聯。
為了讓開發人員更輕鬆地找出並重現效能問題,我們將從 Lighthouse 和「效能深入分析」面板中導入功能和學習成果,並整合至現有的「效能」面板。我們也致力於改善使用者體驗和可用性,讓效能面板更有效地發揮網路效能最佳化工具的功能。
結果為何?單一面板:提供所有成效資料和洞察資料,操作更簡單且功能更強大。
更輕鬆地針對網站成效採取行動
您的意見回饋證實,高資訊密度會使可用性更加複雜。我們正積極開發修正項目和功能,以便提供協助。我們會優先處理重要的最佳化歷程,例如改善 Core Web Vitals。我們預計推出註解等功能,方便您標記發現的內容,並與同事分享所學。顯示資料中的相關性有助於提升複雜系統的瞭解能力,並提供更多方式讓您瞭解資料的連結方式,例如網路要求與主執行緒活動。
我們會在開發新功能後立即推出,並每隔幾個月分享面板提供的新功能更新。請耐心等候!不久後就會開始看到新功能!
在「效能」面板中運用 Lighthouse 的強大功能
我們發現開發人員會同時使用 Lighthouse 和「效能」面板,但這兩者之間的切換會造成困擾。此外,您可能需要前往「成效」面板,取得更多關於 Lighthouse 檢測結果的相關資訊,才能採取行動。這會造成摩擦,因為網頁成效的規範性總覽與詳細成效資料不相連。
我們將透過「效能」面板深度整合 Lighthouse 的效能分析功能。透過這項整合功能,Lighthouse 會在「效能」面板中顯示可改善網頁成效的最佳機會,並附上所有必要的詳細資料,讓您能採取行動。
將所有效能功能移至「效能」面板後,DevTools 中的獨立 Lighthouse 面板就會變得多餘,並且會淘汰。這個面板的淘汰時間為 2025 下半年。請特別注意,Lighthouse 不會消失。
Lighthouse 將持續提供服務
PageSpeed Insights 中的 Lighthouse npm 模組和 Lighthouse 報表 (包括 PSI API) 不會淘汰。我們會持續致力於提供 Lighthouse 的開放原始碼工具,讓開發人員在偏好的環境中評估網頁效能,並確保該工具的品質。
這項整合功能可讓我們提升效能面板和 Lighthouse 的功能,方便開發人員判斷載入、回應速度和內容穩定性。
實驗性「效能深入分析」面板即將淘汰
我們推出「Performance Insights」面板,是為了進行實驗,瞭解如何進一步解決三個主要問題:減少「Performance」面板的資訊密度、支援以用例為導向的分析,以及減少使用「Performance」面板時的學習曲線。
我們透過開發人員的意見回饋,從實驗中學到很多。我們驗證了以用途為導向的分析功能 (例如「我想改善 LCP」或「我想改善網頁的回應速度」) 非常實用,而 版面配置變更追蹤功能等功能則可讓您更輕鬆地診斷及改善指標。
開發人員也發現,與「成效」面板相比,「成效深入分析」面板更容易上手,證實減少資訊密度確實能吸引使用者。不過,在許多情況下,降低密度會帶來成本,開發人員必須前往「效能」面板,才能取得採取行動所需的詳細資料。
我們將整合實驗版「效能深入分析」面板的許多功能,並將學習到的知識納入「效能」面板。我們將推出以用途為導向的分析功能,並改善資訊密度,同時整合 Lighthouse,讓網頁成效洞察資料更具可行性。
我們將於 2024 年稍晚移除「效能深入分析」實驗。
意見回饋管道
我們會陸續推出新功能,歡迎提供意見。如果您有改善新增功能的想法,或是面板中的現有流程遭到不當中斷,歡迎與我們分享。歡迎告訴我們哪些功能實用、哪些功能不實用,以及您認為可改善之處。感謝您!