Optimize website speed

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

• 它為您創建了一個基線來衡量后續更改。
• 它為您提供有關哪些更改將產生最大影響的可行提示。

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

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

點擊 Tony, 然后再點擊 remix this，得到一個名稱隨機生成的項目：

點擊 show 按鈕，打開一個新的 tab. 按 F12 打開 Chrome 開發者工具，切換到 Lighthouse 標簽頁：

Establish a baseline

只選中 Performance 和 Mobile 的checkbox：

點擊 generate report，審計工作就開始了：

確保在隱身模式下生成 report，以避免 Chrome 擴展的干擾。

稍后，審計報表就生成了：

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

指標部分提供站點性能的定量測量。 每個指標都提供了對性能不同方面的洞察。 例如，First Contentful Paint 會告訴您內容何時首次繪制到屏幕上，這是用戶感知頁面加載的一個重要里程碑，而 Time To Interactive 標志著頁面似乎已準備好處理用戶交互的時間點。

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

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

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

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。