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

過去 15 年來,Chrome 開發人員工具的效能面板協助開發人員以單層或其他方式評估及最佳化執行階段效能。從名為「時間軸」的面板開始,此面板已演進你今天熟悉的「效能」面板。

此外,Chrome 也陸續推出其他強大的效能產品和功能。值得注意的是,Lighthouse 於 2016 年推出,幫助我們更輕鬆地找出最佳化商機。「成效洞察」面板已於 2022 年推出,目的是測試顯示成效洞察資料的新方式。

「效能」面板包含資料和功能,可協助開發人員深入瞭解網頁載入和執行階段效能問題。但我們先讓各位瞭解一下,知道使用起來很困難,而且很難找出最大商機,無法改善網頁效能。此外,其他能分析雜訊並迅速找出商機 (例如 Lighthouse) 的其他工具,也能與 Performance 面板取消連結。

為了讓開發人員能夠更輕鬆地找出及重現效能問題,我們將從 Lighthouse 和「Performance Insights」面板導入功能和學習成果,並整合至現有的「效能」面板。我們也將重點放在使用者體驗和可用性,以改善「成效」面板做為網站效能最佳化工具的效果。

結果會如何?透過單一面板,輕鬆查看所有成效資料和洞察資訊,並享有更強大的功能。

輕鬆處理網站效能

你的意見回饋指出,高資訊密度會使可用性問題更加複雜。我們正積極開發修正項目和新功能。像是改善網站體驗核心指標等重要的最佳化歷程,都享有一流的療法。我們計劃推出註解等功能,方便您標示發現結果並與同事分享經驗。在資料中顯示相關性,將有助於改善理解複雜系統的能力,讓您透過更多方式揭露資料連結方式,例如對主執行緒活動的網路要求。

我們會在開發新功能的同時推出新功能,並每隔幾個月就會分享面板新增的新功能。請稍候!你即將開始體驗新功能!

Lighthouse 威力,位於「效能」面板中

我們發現開發人員同時使用 Lighthouse 和 Performance 面板,在兩者間切換環境是一項挑戰。此外,要對 Lighthouse 發現項目採取行動,可能需要前往 Performance 面板,才能取得更多相關資訊。這會造成阻礙,因為網頁成效總覽與詳細成效資料不會有關聯。

我們將透過 Performance 面板,深入整合 Lighthouse 效能分析。這次整合後,Lighthouse 會在「Performance」(效能) 面板中顯示改善網頁效能的重要機會,以及針對商機採取行動的所有必要細節。

將所有效能功能移至效能面板後,開發人員工具中的獨立 Lighthouse 面板將變得多餘且將停用。這個面板將於 2025 下半年停止提供。請特別說明 Lighthouse 不會停止

含有 Lighthouse 標誌的「Performance」面板螢幕截圖

燈塔終於誕生

不過,我們將不會淘汰 Lighthouse npm 模組和 PageSpeed Insights 中的 Lighthouse 報告 (包括 PSI API)。我們持續將 Lighthouse 的可用性和品質視為開放原始碼工具,可用於開發人員偏好的環境中來評估網頁效能。

這項整合可協助我們提升效能面板和 Lighthouse 功能,讓開發人員在考量載入、回應和內容穩定性等問題時提升效能。

實驗性 Performance Insights 面板即將淘汰

「Performance Insights」面板是以實驗的形式推出,旨在協助我們瞭解如何妥善解決三個關鍵的問題:降低效能面板的資訊密度、支援應用實例導向分析,以及縮短使用「成效」面板時出現的學習曲線。

我們透過開發人員的意見回饋,從實驗中獲取了諸多。經過我們的驗證,根據使用案例導向的分析 (例如「我想最佳化 LCP」或「我想讓網頁回應速度更快」等) 極為重要,而版面配置位移軌等功能讓診斷與改善指標的過程更加簡單直接。

開發人員也發現「Performance Insights」面板比「成效」面板更加簡單,證明較少資訊密度確實具有吸引力。然而,在許多情況下,這種降低的密度會導致您的代價,導致開發人員需要前往「Performance」(效能) 面板取得採取行動所需的詳細資料。

我們的研究結果和實驗性「成效洞察」面板中的多項功能,將整合至「成效」面板。多項功能 (例如根據用途進行分析、改善資訊密度) 以及 Lighthouse 整合,將有助於我們以空前的方式,深入分析網頁效能。

成效深入分析實驗將於 2024 下半年移除。

提供意見的地方

在推出新功能的同時,也歡迎你提供意見。如果您對於如何改善新增的功能有任何想法,或是目前透過該面板使用的流程遭到非正式中斷,歡迎與我們分享您寶貴的意見。我們希望您可以瞭解有哪些功能運作順利,以及有待改進之處。感謝!