1、谷歌插件lighthouse的基本介紹

Lighthouse 是一個(gè)網(wǎng)站性能測(cè)評(píng)工具， 它是 Google Chrome 推出的一個(gè)開(kāi)源自動(dòng)化工具，能夠?qū)?PWA 和網(wǎng)頁(yè)多方面的效果指標(biāo)進(jìn)行評(píng)測(cè)，并給出最佳實(shí)踐的建議以幫助開(kāi)發(fā)者改進(jìn)網(wǎng)站的質(zhì)量。它的使用方法也非常簡(jiǎn)單，我們只需要提供一個(gè)要測(cè)評(píng)的網(wǎng)址，它將針對(duì)此頁(yè)面運(yùn)行一系列的測(cè)試，然后生成一個(gè)有關(guān)頁(yè)面性能的報(bào)告。通過(guò)報(bào)告我們就可以知道需要采取哪些措施來(lái)改進(jìn)應(yīng)用的性能和體驗(yàn)。

2、lighthouse使用指南

在高版本（應(yīng)該是?>= 60）的 Chrome 瀏覽器中，Lighthouse 已經(jīng)直接集成到了調(diào)試工具 DevTools 中了，因此不需要進(jìn)行任何安裝或下載。

按?F12 打開(kāi)開(kāi)發(fā)者工具，可以看到在 console、security 等選項(xiàng)后面有一個(gè) Audits （安裝了lighthouse插件或者是高版本的谷歌瀏覽器可能顯示的是 lighthouse）選項(xiàng)，選擇該選項(xiàng)，然后點(diǎn)擊 generate report 即可。

針對(duì)不同的適用場(chǎng)景，我們可以通過(guò)多種方式來(lái)安裝并使用?Lighthouse：

• Chrome 瀏覽器插件。Chrome 插件的形式提供了更加友好的用戶界面，方便讀取報(bào)告。

• Chrome DevTools。該工具集成在最新版本的 Chrome 瀏覽器中，無(wú)需安裝即可使用。

• Lighthouse CLI 命令行工具。方便將 Lighthouse 集成到持續(xù)集成系統(tǒng)中。

• 編程的方式。我們也能通過(guò)?Node.js 模塊引入 Lighthouse 工具包，以編程的形式來(lái)使用它。

3、lighthouse生成網(wǎng)站報(bào)告

先訪問(wèn)需要評(píng)估的網(wǎng)站，比如?http://www.baidu.com，然后點(diǎn)擊燈塔按鈕，選擇 generate report 即可。如下圖：

lighthouse 會(huì)運(yùn)行一系列的測(cè)試審查這個(gè)頁(yè)面，然后它會(huì)把關(guān)于頁(yè)面執(zhí)行的一些性能指標(biāo)以報(bào)告的形式展示給你。你可以參考這份報(bào)告中的一些指標(biāo)提示來(lái)提升你的網(wǎng)站應(yīng)用。Lighthouse 能夠生成一份 JSON 或 HTML 報(bào)告，HTML 可以直接打開(kāi)，json 格式的報(bào)告可以通過(guò)?Lighthouse Report Viewer?這個(gè)地址來(lái)打開(kāi)。如圖所示：

4、lighthouse 運(yùn)行的生命周期

Lighthouse 運(yùn)行測(cè)評(píng)的過(guò)程有一套完整的生命周期，可以劃分成三個(gè)主要流程：

Collecting（收集數(shù)據(jù)）：首先是?Collecting 流程，這一步會(huì)調(diào)用內(nèi)置的驅(qū)動(dòng)程序（Driver） ，其作用是通過(guò)谷歌開(kāi)發(fā)工具協(xié)議（?Chrome DevTools Protocol） 調(diào)起瀏覽器，并創(chuàng)建新的 tab 請(qǐng)求待測(cè)評(píng)的站點(diǎn)，通過(guò)瀏覽器采集站點(diǎn)數(shù)據(jù)并將結(jié)果（稱之為 Artifacts）保存在本地臨時(shí)目錄。

Auditing（分析數(shù)據(jù)）：然后進(jìn)入?Auditing 流程，讀取 Artifacts 數(shù)據(jù)，根據(jù)內(nèi)置的評(píng)判策略逐條進(jìn)行檢查并計(jì)算出各項(xiàng)的數(shù)字形式得分。

Report（生成報(bào)告）：最后進(jìn)行?Report 流程，將評(píng)分結(jié)果按照 PWA、性能、無(wú)障礙訪問(wèn)、最佳實(shí)踐等緯度進(jìn)行劃分，以 JSON、HTML 等格式輸出。

如下圖：

命令行工具基于此提供了生命周期的選項(xiàng)，我們可以讓?CLI 只運(yùn)行整個(gè)測(cè)評(píng)過(guò)程的一個(gè)或多個(gè)特定生命周期。比如，使用 --gather-mode（-G）只進(jìn)行資源采集的生命周期，命令行工具將會(huì)啟動(dòng)瀏覽器，采集被測(cè)試站點(diǎn)的相關(guān)數(shù)據(jù)，并將結(jié)果以 json 的形式存儲(chǔ)到本地，默認(rèn)是?./latest-run/?目錄，然后退出進(jìn)程：

1. lighthouse https://example.com/ -G

如果想要跳過(guò)瀏覽器的交互，直接從本地讀取頁(yè)面的臨時(shí)數(shù)據(jù)，運(yùn)行測(cè)評(píng)和產(chǎn)出結(jié)果報(bào)告，則可以使用?--audit-mode（-A），默認(rèn)將從?./latest-run/?目錄讀?。?/p>

1. lighthouse https://example.com/ -A

兩個(gè)選項(xiàng)同時(shí)使用，就會(huì)運(yùn)行整個(gè)測(cè)評(píng)的生命周期，與直接運(yùn)行?lighthouse 命令相比，會(huì)在當(dāng)前目錄保存一份測(cè)試站點(diǎn)的數(shù)據(jù)。

1. lighthouse https://example.com -GA

如果不想使用默認(rèn)的?./latest-run/?目錄，我們也能自定義站點(diǎn)的 json 數(shù)據(jù)的保存目錄，如：

1. lighthouse -GA=./mycustomfolder https://example.com

參考：附錄1 使用 Lighthouse 測(cè)評(píng) PWA · PWA 應(yīng)用實(shí)戰(zhàn)

5、lighthouse 報(bào)告的指標(biāo)分析

使用?Lighthouse 對(duì)網(wǎng)站進(jìn)行測(cè)評(píng)后，我們會(huì)得到一份評(píng)分報(bào)告，它包含了性能（Performance），訪問(wèn)無(wú)障礙（Accessibility），最佳實(shí)踐（Best Practice），搜索引擎優(yōu)化（SEO），PWA（Progressive Web App）五個(gè)部分：

5.1、性能（Performance）

性能評(píng)分的分值區(qū)間是0到100，如果出現(xiàn)0分，通常是在運(yùn)行 Lighthouse 時(shí)發(fā)生了錯(cuò)誤，滿分100分代表了網(wǎng)站已經(jīng)達(dá)到了98分位值的數(shù)據(jù)，而50分則是75分位值的數(shù)據(jù)。

影響評(píng)分的性能指標(biāo)：性能測(cè)試結(jié)果會(huì)分成?Metrics，Diagnostic，Opportunities 三部分，但只有 Metrics 部分的指標(biāo)項(xiàng)會(huì)對(duì)分?jǐn)?shù)產(chǎn)生直接影響。

Lighthouse 會(huì)衡量以下 Metrics 性能指標(biāo)項(xiàng)：

• 首次內(nèi)容繪制（First Contentful Paint）。即瀏覽器首次將任意內(nèi)容（如文字、圖像、canvas 等）繪制到屏幕上的時(shí)間點(diǎn)。

• 首次有效繪制（First Meaningful Paint）。衡量了用戶感知頁(yè)面的主要內(nèi)容（primary content）可見(jiàn)的時(shí)間。對(duì)于不同的站點(diǎn)，首要內(nèi)容是不同的，例如：對(duì)于博客文章，標(biāo)題及首屏文字是首要內(nèi)容，而對(duì)于購(gòu)物網(wǎng)站來(lái)說(shuō)，圖片也會(huì)變得很重要。

• 首次?CPU 空閑（First CPU Idle）。即頁(yè)面首次能夠?qū)斎胱龀龇磻?yīng)的時(shí)間點(diǎn)，其出現(xiàn)時(shí)機(jī)往往在首次有效繪制完成之后。該指標(biāo)目前仍處于實(shí)驗(yàn)階段。

• 可交互時(shí)間（Time to Interactive）。指的是所有的頁(yè)面內(nèi)容都已經(jīng)成功加載，且能夠快速地對(duì)用戶的操作做出反應(yīng)的時(shí)間點(diǎn)。該指標(biāo)目前仍處于實(shí)驗(yàn)階段。

• 速度指標(biāo)（Speed Index）。衡量了首屏可見(jiàn)內(nèi)容繪制在屏幕上的速度。在首次加載頁(yè)面的過(guò)程中盡量展現(xiàn)更多的內(nèi)容，往往能給用戶帶來(lái)更好的體驗(yàn)，所以速度指標(biāo)的值約小越好。

• 輸入延遲估值（Estimated Input Latency）。這個(gè)指標(biāo)衡量了頁(yè)面對(duì)用戶輸入行為的反應(yīng)速度，其基準(zhǔn)值應(yīng)低于 50ms。

Metrics 部分的指標(biāo)項(xiàng)會(huì)直接影響分?jǐn)?shù)，可以作為我們的主要參考點(diǎn)。

另外的兩部分中，?Opportunities?指的是優(yōu)化機(jī)會(huì)，它提供了詳細(xì)的建議和文檔，來(lái)解釋低分的原因，幫助我們具體進(jìn)行實(shí)現(xiàn)和改進(jìn)。Diagnostics?指的是現(xiàn)在存在的問(wèn)題，為進(jìn)一步改善性能的實(shí)驗(yàn)和調(diào)整給出了指導(dǎo)。這兩者不會(huì)納入分?jǐn)?shù)的計(jì)算。

5.1.1、性能評(píng)分標(biāo)準(zhǔn)

每一項(xiàng)性能指標(biāo)對(duì)評(píng)分的貢獻(xiàn)都有其計(jì)算邏輯，Lighthouse 會(huì)將原始的性能值映射成為 0-100 之間的數(shù)字。

例如，F(xiàn)MP（First Meaningful Paint）的原始值是從頁(yè)面初始化開(kāi)始到主要內(nèi)容渲染成功的耗時(shí)，根據(jù)真實(shí)站點(diǎn)的數(shù)據(jù)，頂級(jí)性能的站點(diǎn)的 FMP 值約為 1220ms，這個(gè)值會(huì)被映射成 Lighthouse 的 99 分。

針對(duì)不同的評(píng)分，Lighthouse 用了不同的顏色進(jìn)行標(biāo)注，分值區(qū)間和顏色的對(duì)應(yīng)關(guān)系如下：

• 0 - 49（慢）：紅色

• 50 - 89（平均值）： 橙色

• 90 - 100（快）： 綠色

各個(gè)指標(biāo)對(duì)性能評(píng)分的貢獻(xiàn)并不相同，權(quán)重較大的指標(biāo)，對(duì)性能評(píng)分的影響更大一些。各指標(biāo)權(quán)重分配情況可參考：https://docs.google.com/spreadsheets/d/1Cxzhy5ecqJCucdf1M0iOzM8mIxNc7mmx107o5nj38Eo/edit#gid=0

5.2、訪問(wèn)無(wú)障礙（Accessibility）

訪問(wèn)無(wú)障礙評(píng)分的分值由相關(guān)指標(biāo)的加權(quán)平均值計(jì)算而來(lái)?？梢栽谠u(píng)分詳情查閱每項(xiàng)指標(biāo)的具體權(quán)重。同理，較大權(quán)重的指標(biāo)項(xiàng)對(duì)分?jǐn)?shù)的影響較大。

無(wú)障礙性的每個(gè)指標(biāo)項(xiàng)測(cè)試結(jié)果為pass或者fail，與性能指標(biāo)項(xiàng)的計(jì)算方式不同，當(dāng)頁(yè)面只是部分通過(guò)某項(xiàng)指標(biāo)時(shí)，頁(yè)面的這項(xiàng)指標(biāo)將不會(huì)得分。例如，如果頁(yè)面中的一些元素有屏幕閱讀器友好的命名，而其他的元素沒(méi)有，那么這個(gè)頁(yè)面的?screenreader-friendly-names 指標(biāo)項(xiàng)得分為0。

5.3、最佳實(shí)踐（優(yōu)化）（Best Practice）

最佳實(shí)踐評(píng)分的分?jǐn)?shù)區(qū)間為0-100。影響這項(xiàng)評(píng)分的指標(biāo)項(xiàng)的權(quán)重都是相同的。

比如：推薦使用?https，跨域的跳轉(zhuǎn)鏈接需要使用 rel 標(biāo)識(shí)，不能使用廢棄的 API等等。

5.4、搜索引擎優(yōu)化（SEO）

比如：圖片元素使用?alt 屬性等等提高搜索引擎搜索排名，便于搜索引擎能找到你這個(gè)網(wǎng)站。

5.5、PWA（Progressive Web App）

Lighthouse 使用 PWA 基準(zhǔn)檢查項(xiàng)列表（Baseline PWA Checklist）進(jìn)行測(cè)評(píng)，測(cè)評(píng)結(jié)果將這些指標(biāo)項(xiàng)分成了四個(gè)類別，共包含12個(gè)自動(dòng)測(cè)試項(xiàng)和3個(gè)手動(dòng)測(cè)試項(xiàng)，其中各個(gè)自動(dòng)測(cè)試項(xiàng)的評(píng)分權(quán)重是相同的。PWA 的評(píng)測(cè)指標(biāo)對(duì)我們來(lái)說(shuō)非常重要，我們可以從這四個(gè)類別詳細(xì)了解一下基準(zhǔn)指標(biāo)項(xiàng)。

快速可靠：

1. 頁(yè)面在移動(dòng)網(wǎng)絡(luò)條件下能夠快速加載。

2. 在離線條件下頁(yè)面能夠返回狀態(tài)碼200。這里我們可以通過(guò) Service Worker 來(lái)實(shí)現(xiàn)離線可用。

3. starturl 在離線條件下返回狀態(tài)碼200。starturl 是前面章節(jié)我們提到過(guò)的 manifest.json 中的一個(gè)屬性，它指定了用戶打開(kāi)該 PWA 時(shí)加載的 URL。

可安裝：

1. 始終使用?HTTPS。

2. 注冊(cè)?Service Worker 來(lái)緩存頁(yè)面以及 start_url。

3. 使用?manifest 文件來(lái)實(shí)現(xiàn)安裝 PWA 的需求，瀏覽器能夠主動(dòng)通知用戶將應(yīng)用添加到桌面，增加留存率。

PWA 優(yōu)化：

1. 將?HTTP 流量重定向到 HTTPS。

2. 配置自定義啟動(dòng)畫面。

3. 設(shè)置地址欄主題顏色。

4. 頁(yè)面內(nèi)容針對(duì)視口大小自適應(yīng)，對(duì)移動(dòng)用戶的展示更友好。

5. 使用了??標(biāo)簽，并設(shè)置了 width 或 initial-scale 屬性。

6. 當(dāng)?JavaScript 文件不可用時(shí)，提供降級(jí)措施，頁(yè)面能顯示基本內(nèi)容而不出現(xiàn)白屏。

手動(dòng)測(cè)試項(xiàng)：

1. 站點(diǎn)跨瀏覽器可用，如主流瀏覽器?Chrome, Edge, Firefox 及 Safari 等。

2. 頁(yè)面間切換流暢，即使在較差的網(wǎng)絡(luò)環(huán)境下，切換動(dòng)畫也應(yīng)該簡(jiǎn)潔順暢，這是提高用戶感知體驗(yàn)的關(guān)鍵。

3. 保證每個(gè)頁(yè)面都有獨(dú)一無(wú)二的?URL，能夠在新的瀏覽器窗口打開(kāi)，且方便在社交媒體上進(jìn)行分享。

除了上述基準(zhǔn)指標(biāo)項(xiàng)之外，為了讓?PWA 的體驗(yàn)更加完美，還有一些 Lighthouse 未實(shí)現(xiàn)檢查的進(jìn)階指標(biāo)，也就是可以作為示范性參考的 PWA 的指標(biāo)，比如用戶體驗(yàn)、緩存、推送通知等等。

參考：2 Lighthouse 評(píng)分指南 · PWA 應(yīng)用實(shí)戰(zhàn)

6、node及Chrome版本要求

使用?lighthouse 時(shí) node 和 Chrome 瀏覽器的版本有一定的要求。

node > =8.9 （未驗(yàn)證）

Chrome 瀏覽器必須 >= 79 ，否則 lighthouse 可能會(huì)運(yùn)行失敗，或者是某些指標(biāo)無(wú)法顯示出來(lái)。比如下面我安裝的是 Chrome75.0.3770.80，使用命令行執(zhí)行 lighthouse 時(shí)有兩個(gè)指標(biāo)顯示異常：

performance 和 best practice 指標(biāo)顯示異常，錯(cuò)誤如下：

?---------------------------------------------------------------------------------

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-642105.html

到了這里，關(guān)于前端性能分析工具——Lighthouse的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！