天天看點

使用 Chrome 開發者工具的 lighthouse 功能分析 web 應用的性能問題

每當您着手提高站點的負載性能時,請始終從 audit 開始。 審計有兩個重要功能:

它為您建立了一個基線來衡量後續更改。

它為您提供有關哪些更改将産生最大影響的可行提示。

本文使用下面這個網站應用作為例子。

https://glitch.com/edit/#!/tony

點選 Tony, 然後再點選 remix this,得到一個名稱随機生成的項目:

使用 Chrome 開發者工具的 lighthouse 功能分析 web 應用的性能問題

點選 show 按鈕,打開一個新的 tab. 按 F12 打開 Chrome 開發者工具,切換到 Lighthouse 标簽頁:

使用 Chrome 開發者工具的 lighthouse 功能分析 web 應用的性能問題

Establish a baseline

隻選中 Performance 和 Mobile 的checkbox:

使用 Chrome 開發者工具的 lighthouse 功能分析 web 應用的性能問題

點選 generate report,審計工作就開始了:

使用 Chrome 開發者工具的 lighthouse 功能分析 web 應用的性能問題

確定在隐身模式下生成 report,以避免 Chrome 擴充的幹擾。

稍後,審計報表就生成了:

使用 Chrome 開發者工具的 lighthouse 功能分析 web 應用的性能問題

報告頂部的數字是網站的整體性能得分。 稍後,當您對代碼進行更改時,您應該會看到這個數字上升。 更高的分數意味着更好的性能。

使用 Chrome 開發者工具的 lighthouse 功能分析 web 應用的性能問題

名額部分提供站點性能的定量測量。 每個名額都提供了對性能不同方面的洞察。 例如,First Contentful Paint 會告訴您内容何時首次繪制到螢幕上,這是使用者感覺頁面加載的一個重要裡程碑,而 Time To Interactive 标志着頁面似乎已準備好處理使用者互動的時間點。

每一個選項都可以點選 learn more 深入研究:

使用 Chrome 開發者工具的 lighthouse 功能分析 web 應用的性能問題

Passed audits 包含的是該 web 應用通過了的審計項目:

使用 Chrome 開發者工具的 lighthouse 功能分析 web 應用的性能問題

Diagnostics 欄目下就是該應用存在可以改進的地方:

使用 Chrome 開發者工具的 lighthouse 功能分析 web 應用的性能問題

繼續閱讀