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