如何使用Lighthouse性能檢測工具
前言
最近做性能檢測工具，很多知識點不清楚，打算查缺補漏，補一補。
接下來從官方提供的性能檢測工具Lighthouse(燈塔)開始我們的學(xué)習(xí)，簡單介紹了下Lighthouse的一些點。
閱讀完本文，你可以了解到
- Lighthouse 是什么。
- 如何快速上手Lighthouse (使用入門)。
- Lighthouse中的一些Metrics指標。
Lighthouse 是什么
官方對它的解讀:
Lighthouse 是一個開源的自動化工具，用于改進網(wǎng)絡(luò)應(yīng)用的質(zhì)量。您可以將其作為一個 Chrome 擴展程序運行，或從命令行運行。您為 Lighthouse 提供一個您要審查的網(wǎng)址，它將針對此頁面運行一連串的測試，然后生成一個有關(guān)頁面性能的報告。
它是如何工作的呢?
如果你跟我一樣，翻過它的代碼，看過它的介紹肯定很懵逼，它的代碼依賴性如下:
lighthouse內(nèi)部模塊依賴
感興趣的可以看看它的倉庫，參考鏈接已經(jīng)給出。
https://github.com/GoogleChrome/lighthouse
使用入門
運行 Lighthouse 的方式有兩種: 作為 Chrome 擴展程序運行，或作為命令行工具運行。Chrome 擴展程序提供了一個對用戶更友好的界面，方便讀取報告。命令行工具允許您將 Lighthouse 集成到持續(xù)集成系統(tǒng)。
Chrome 擴展程序
下載 Google Chrome 52 或更高版本。
安裝 Lighthouse Chrome 擴展程序。
地址:https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
點擊 Generate report 按鈕以針對當前打開的頁面運行 Lighthouse 測試。
命令行工具
Node CLI在配置和報告Lighthouse運行情況方面提供了最大的靈活性。如果用戶需要更多的高級功能，或者想自動運行Lighthouse，可以使用Node CLI。安裝 Lighthouse 作為一個全局節(jié)點模塊。
安裝:
- npm install -g lighthouse
- # or use yarn:
- # yarn global add lighthouse
針對一個頁面運行 Lighthouse 審查。
- lighthouse https://www.example.com --view
傳遞 --help 標志以查看可用的輸入和輸出選項。
- lighthouse --help
對于一些options不清楚的，可以點擊這個鏈接:
https://github.com/GoogleChrome/lighthouse#cli-options
假設(shè)我們審查后，就會有這么一個結(jié)果:
New metrics
可以看到一共6個Metrics，Lighthouse 6.0在報告中引入了三個新指標。其中兩個新的指標--最大內(nèi)容畫(LCP)和累積布局偏移(CLS)--是Core Web Vitals的實驗室實現(xiàn)。
那么接下來，我們看看這些Metrics指標的含義。
幾個Metrics指標
First Contentful Paint (FCP)
第一次內(nèi)容豐富的繪畫(FCP)指標衡量了從頁面開始加載到頁面內(nèi)容的任何部分呈現(xiàn)在屏幕上的時間。對于該指標，"內(nèi)容"指的是文本、圖像(包括背景圖像)、svg元素或非白色canvas元素。
FCP
在上面的負載時間線中，F(xiàn)CP發(fā)生在第二幀中，就像呈現(xiàn)給屏幕的第一文本和圖像元素時一樣。
你會注意到，雖然部分內(nèi)容已經(jīng)呈現(xiàn)，但并非所有內(nèi)容都已呈現(xiàn)。這是First Contentful Paint (FCP)和Largest Contentful Paint (LCP)之間的一個重要區(qū)別--LCP的目的是衡量頁面的主要內(nèi)容何時完成加載。
知道了概念，如何衡量FCP呢，我們可以接觸的有Field tools和Lab tools
要在JavaScript中測量FCP，你可以使用Paint Timing API。下面的例子展示了如何創(chuàng)建一個PerformanceObserver，該PerformanceObserver監(jiān)聽名稱為first-contentful-paint的油漆條目，并將其記錄到控制臺。
- new PerformanceObserver((entryList) => {
- for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
- console.log('FCP candidate:', entry.startTime, entry);
- }
- }).observe({type: 'paint', buffered: true});
Speed Index
速度指數(shù)是Lighthouse報告中性能部分跟蹤的六個指標之一。每項指標都能反映出頁面加載速度的某些方面。
那么它是如何檢測的呢?
速度指數(shù)衡量的是內(nèi)容在頁面加載過程中的視覺顯示速度。Lighthouse首先會在瀏覽器中捕獲一段頁面加載的視頻，并計算出各幀之間的視覺進度。然后，Lighthouse使用Speedline Node.js模塊來生成速度指數(shù)得分。
至于具體的計算，可以參考GitHub里面的代碼，這里就不展開了。
那么我們有機會提升它的性能嗎?
利用Lighthouse報告中的 "Opportunities "部分來確定哪些改進對你的頁面最有價值。機會越重要，對性能評分的影響就越大。例如，下面的Lighthouse截圖顯示，消除渲染阻塞資源將帶來最大的改善。
Speed index
Largest Contentful Paint (LCP)
最大內(nèi)容畫(LCP)指標報告了在視口中可見的最大圖像或文本塊的渲染時間，相對于頁面首次開始加載的時間。
LCP
從圖上也能看出來，為了提供良好的用戶體驗，網(wǎng)站應(yīng)該努力使最大內(nèi)容畫幅達到2.5秒或更少。
更多信息，請觀看Paul Irish對LCP的深度剖析。
https://www.youtube.com/watch?v=diAc65p15ag
Cumulative Layout Shift (CLS)
官方對它的解釋:
Cumulative Layout Shift (CLS)是一種視覺穩(wěn)定性的測量方法，它量化了頁面內(nèi)容在視覺上的移動程度。它量化了一個頁面的內(nèi)容在視覺上移動的程度。
簡單理解就是:
CLS測量的是整個頁面生命周期內(nèi)發(fā)生的每一次意外布局轉(zhuǎn)變的所有單個布局轉(zhuǎn)變得分的總和。
布局偏移發(fā)生在可見元素從一個渲染幀到下一個渲染幀改變其位置的任何時候。關(guān)于如何計算單個布局偏移分數(shù)，請參見下文)。
https://web.dev/cls/
CLS
從上面的圖來看，CLS得分低是給開發(fā)者的一個信號，表明他們的用戶沒有經(jīng)歷不必要的內(nèi)容移動;CLS得分低于0.10被認為是 "好"。
Total Blocking Time (TBT)
我們看看官方對它的解讀：
總阻塞時間(Total Blocking Time，TBT)量化了負載響應(yīng)能力，測量了主線程被阻塞的時間長到足以阻止輸入響應(yīng)的總時間。TBT衡量的是第一次有內(nèi)容的繪畫(FCP)和交互時間(TTI)之間的總時間。它是TTI的配套指標，它為量化主線程活動帶來了更多的細微差別，這些活動阻礙了用戶與您的頁面進行交互的能力。
此外，TBT與核心網(wǎng)絡(luò)生命力的現(xiàn)場指標First Input Delay(FID)有很好的相關(guān)性。
需要更多的了解，可以參考鏈接:
https://web.dev/tbt/
最新評分標準
Lighthouse中的性能得分是由多個指標加權(quán)混合計算出來的，總結(jié)出一個頁面的速度。6.0的性能得分公式如下。
那么你是不是會跟我一樣，有疑問，我們不能修改這個權(quán)重嘛，當然可以試一試:
https://googlechrome.github.io/lighthouse/scorecalc/
點擊上面的鏈接，會展示這個一個畫面:
scoring calculator
這個網(wǎng)站發(fā)布了一個評分計算器，幫助你了解性能評分。同時，該計算器還能為你提供Lighthouse 5版和6版的評分比較。當你使用Lighthouse 6.0版本進行審計時，報告中會有一個鏈接，鏈接到計算工具，并將結(jié)果填入其中。
小結(jié)
到這里，其實Lighthouse如何使用，以及一些關(guān)鍵的指標也做了說明，你一定會有疑問:
- 我如何通過計算他們具體的值呢，有對應(yīng)的JavaScript API?
- 既然可以通過Lighthouse來衡量性能并找到加快頁面加載的機會，那么我們?nèi)绾蝺?yōu)化呢?
想必看到這里，你遇到的疑惑跟之前一樣，那么如何解決呢。
嗯，上面說的部分并沒有詳細的展開，剩下的部分，嘗試去翻一翻官方文檔，查一查資料，收獲一定很大。
我是TianTianUp，我們下一期見!!!
參考
[1] Lighthouse performance scoring: https://web.dev/performance-scoring/
[2] GoogleChrome-lighthouse: https://github.com/GoogleChrome/lighthouse
[3] What's New in Lighthouse 6.0: https://web.dev/lighthouse-whats-new-6.0/
[4] Measure: https://web.dev/measure/
[5] How does Lighthouse work?: https://github.com/GoogleChrome/lighthouse/blob/master/docs/architecture.md
[6] Largest Contentful Paint (LCP): https://web.dev/lcp/
[7] Total Blocking Time (TBT): https://web.dev/tbt/
[8] Cumulative Layout Shift (CLS): https://web.dev/cls/
[9] First Contentful Paint (FCP): https://web.dev/fcp/
[10] Speed Index: https://web.dev/speed-index/
