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