如何使用Lighthouse性能檢測工具

前言

最近作性能檢測工具，不少知識點不清楚，打算查缺補漏，補一補。git

接下來從官方提供的性能檢測工具Lighthouse(燈塔)開始咱們的學習，簡單介紹了下Lighthouse的一些點。github

閱讀完本文，你能夠了解到web

Lighthouse 是什麼。
如何快速上手Lighthouse (使用入門)。
Lighthouse中的一些Metrics指標。

性能相關的總結準備搞個思惟導圖，能夠點這裏:chrome

docs.qq.com/mind/DWnljW…npm

Lighthouse 是什麼

官方對它的解讀:瀏覽器

Lighthouse 是一個開源的自動化工具，用於改進網絡應用的質量。您能夠將其做爲一個 Chrome 擴展程序運行，或從命令行運行。您爲 Lighthouse 提供一個您要審查的網址，它將針對此頁面運行一連串的測試，而後生成一個有關頁面性能的報告。bash

它是如何工做的呢？markdown

若是你跟我同樣，翻過它的代碼，看過它的介紹確定很懵逼，它的代碼依賴性以下:網絡

感興趣的能夠看看它的倉庫，參考連接已經給出。app

github.com/GoogleChrom…

使用入門

運行 Lighthouse 的方式有兩種: 做爲 Chrome 擴展程序運行，或做爲命令行工具運行。 Chrome 擴展程序提供了一個對用戶更友好的界面，方便讀取報告。命令行工具容許您將 Lighthouse 集成到持續集成系統。

Chrome 擴展程序

下載 Google Chrome 52 或更高版本。

安裝 Lighthouse Chrome 擴展程序。

地址:chrome.google.com/webstore/de…

點擊 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不清楚的，能夠點擊這個連接:

github.com/GoogleChrom…

假設咱們審查後，就會有這麼一個結果:

能夠看到一共6個Metrics，Lighthouse 6.0在報告中引入了三個新指標。其中兩個新的指標--最大內容畫（LCP）和累積佈局偏移（CLS）--是Core Web Vitals的實驗室實現。

那麼接下來，咱們看看這些Metrics指標的含義。

幾個Metrics指標

First Contentful Paint (FCP)

第一次內容豐富的繪畫(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截圖顯示，消除渲染阻塞資源將帶來最大的改善。

Largest Contentful Paint (LCP)

最大內容畫（LCP）指標報告了在視口中可見的最大圖像或文本塊的渲染時間，相對於頁面首次開始加載的時間。

從圖上也能看出來，爲了提供良好的用戶體驗，網站應該努力使最大內容畫幅達到2.5秒或更少。

更多信息，請觀看Paul Irish對LCP的深度剖析。

www.youtube.com/watch?v=diA…

Cumulative Layout Shift (CLS)

官方對它的解釋:

Cumulative Layout Shift (CLS)是一種視覺穩定性的測量方法，它量化了頁面內容在視覺上的移動程度。它量化了一個頁面的內容在視覺上移動的程度。

簡單理解就是:

CLS測量的是整個頁面生命週期內發生的每一次意外佈局轉變的全部單個佈局轉變得分的總和。

佈局偏移發生在可見元素從一個渲染幀到下一個渲染幀改變其位置的任什麼時候候。關於如何計算單個佈局偏移分數，請參見下文）。

web.dev/cls/

從上面的圖來看，CLS得分低是給開發者的一個信號，代表他們的用戶沒有經歷沒必要要的內容移動；CLS得分低於0.10被認爲是 "好"。

Total Blocking Time (TBT)

咱們看看官方對它的解讀：

總阻塞時間（Total Blocking Time，TBT）量化了負載響應能力，測量了主線程被阻塞的時間長到足以阻止輸入響應的總時間。TBT衡量的是第一次有內容的繪畫（FCP）和交互時間（TTI）之間的總時間。它是TTI的配套指標，它爲量化主線程活動帶來了更多的細微差異，這些活動阻礙了用戶與您的頁面進行交互的能力。

此外，TBT與核心網絡生命力的現場指標First Input Delay（FID）有很好的相關性。

須要更多的瞭解，能夠參考連接:

web.dev/tbt/

Phase	Metric Name	Metric Weight
Early (15%)	First Contentful Paint (FCP)	15%
Mid (40%)	Speed Index (SI)	15%
	Largest Contentful Paint (LCP)	25%
Late (15%)	Time To Interactive (TTI)	15%
Main Thread (25%)	Total Blocking Time (TBT)	25%
Predictability (5%)	Cumulative Layout Shift (CLS)	5%

最後

到這裏，其實Lighthouse如何使用，以及一些關鍵的指標也作了說明，你必定會有疑問:

我如何經過計算他們具體的值呢，有對應的JavaScript API？
既然能夠經過Lighthouse來衡量性能並找到加快頁面加載的機會，那麼咱們如何優化呢？

想必看到這裏，你遇到的疑惑跟以前同樣，那麼如何解決呢。

嗯，上面說的部分並無詳細的展開，剩下的部分，嘗試去翻一翻官方文檔，查一查資料，收穫必定很大。

使用入門，很簡單，沒有難度，後續會繼續梳理，思惟導圖在這裏:

docs.qq.com/mind/DWnljW…

我是TianTianUp，咱們下一期見！！！

參考

[1] Lighthouse performance scoring: web.dev/performance…

[2] GoogleChrome-lighthouse: github.com/GoogleChrom…

[3] What's New in Lighthouse 6.0: web.dev/lighthouse-…

[4] Measure: web.dev/measure/

[5] How does Lighthouse work?: github.com/GoogleChrom…

[6] Largest Contentful Paint (LCP): web.dev/lcp/

[7] Total Blocking Time (TBT): web.dev/tbt/

[8] Cumulative Layout Shift (CLS): web.dev/cls/

[9] First Contentful Paint (FCP): web.dev/fcp/

[10] Speed Index: web.dev/speed-index…