Optimize website speed

每當(dāng)您著手提高站點(diǎn)的負(fù)載性能時(shí)，請(qǐng)始終從 audit 開始。 審計(jì)有兩個(gè)重要功能：

• 它為您創(chuàng)建了一個(gè)基線來衡量后續(xù)更改。
• 它為您提供有關(guān)哪些更改將產(chǎn)生最大影響的可行提示。

本文使用下面這個(gè)網(wǎng)站應(yīng)用作為例子。

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

點(diǎn)擊 Tony, 然后再點(diǎn)擊 remix this，得到一個(gè)名稱隨機(jī)生成的項(xiàng)目：

點(diǎn)擊 show 按鈕，打開一個(gè)新的 tab. 按 F12 打開 Chrome 開發(fā)者工具，切換到 Lighthouse 標(biāo)簽頁：

Establish a baseline

只選中 Performance 和 Mobile 的checkbox：

點(diǎn)擊 generate report，審計(jì)工作就開始了：

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

稍后，審計(jì)報(bào)表就生成了：

報(bào)告頂部的數(shù)字是網(wǎng)站的整體性能得分。 稍后，當(dāng)您對(duì)代碼進(jìn)行更改時(shí)，您應(yīng)該會(huì)看到這個(gè)數(shù)字上升。 更高的分?jǐn)?shù)意味著更好的性能。

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

每一個(gè)選項(xiàng)都可以點(diǎn)擊 learn more 深入研究：

Passed audits 包含的是該 web 應(yīng)用通過了的審計(jì)項(xiàng)目：

Diagnostics 欄目下就是該應(yīng)用存在可以改進(jìn)的地方：

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。