Lighthouse是什么？ —— 一種工具
Lighthouse 是一個(gè)開(kāi)源的自動(dòng)化工具，用來(lái)測(cè)試頁(yè)面性能。

為什么要用Lighthouse？—— 提升用戶體驗(yàn)
Web性能可以直接影響業(yè)務(wù)指標(biāo)，例如轉(zhuǎn)化率和用戶滿意度
分析收集各種應(yīng)用頁(yè)面性能指標(biāo)，并進(jìn)行評(píng)估，以此我們可以根據(jù)評(píng)估結(jié)果進(jìn)行針對(duì)性優(yōu)化，不斷提升用戶體驗(yàn)

Lighthouse怎么用？ —— 用法多樣，根據(jù)需求進(jìn)行選擇
目前官方提供了4種使用方式：
Chrome 開(kāi)發(fā)者工具（DevTools）
Node CLI
Node Module
Chrome 擴(kuò)展

Lighthouse: Lighthouse?是一個(gè)開(kāi)源的自動(dòng)化工具，用于改進(jìn)網(wǎng)絡(luò)應(yīng)用的質(zhì)量

GoogleChrome / lighthouse - GitCode - 開(kāi)發(fā)者的代碼家園

安裝方式——Chrome 開(kāi)發(fā)者工具（DevTools）

?一、下載插件

插件下載：

前端性能測(cè)試工具-Lighthouse (燈塔)插件

或

?Lighthouse_chrome插件下載

?二、解壓zip包

下載好插件后，對(duì)?.zip?包進(jìn)行解壓，解壓后文件夾里面有個(gè)?.crx?后綴的離線安裝包，大致如下圖所示

三、打開(kāi)擴(kuò)展程序管理菜單

①?在瀏覽器的地址欄中輸入?chrome://extensions/ 回車進(jìn)入頁(yè)面

②或者，依次點(diǎn)擊：右上角三個(gè)點(diǎn) -> 更多工具 -> 擴(kuò)展程序

?

?四、勾選“開(kāi)發(fā)者模式”

安裝前，一定要將開(kāi)發(fā)者模式勾選上，如下圖：

注意: 不勾選開(kāi)發(fā)者模式是安裝不上插件的。

五、 拖動(dòng)安裝插件

將?.crx?安裝包直接拖入 Chrome 瀏覽器中，即可完成安裝：

?六、使用： F12 打開(kāi)DevTools，選擇“分析網(wǎng)頁(yè)加載情況”，進(jìn)行網(wǎng)頁(yè)性能分析

Lighthouse 介紹

1、三種模式

2、設(shè)備 分為2種：移動(dòng)設(shè)備和桌面設(shè)備

?

3、主要監(jiān)測(cè)指標(biāo)

?

?指標(biāo)詳解

?評(píng)估后，得到評(píng)估結(jié)果：

?

?

性能指標(biāo)（Performance）

性能指標(biāo)：性能檢測(cè)（重點(diǎn)）。對(duì)頁(yè)面的性能評(píng)分，如：網(wǎng)頁(yè)的加載速度、響時(shí)間等。?

First Contentful Paint (FCP)

FCP（First Contentful Paint）首次內(nèi)容繪制，瀏覽器首次繪制來(lái)自 DOM 的內(nèi)容的時(shí)間，內(nèi)容必須是文本、圖片（包含背景圖）、非白色的 canvas 或 SVG，也包括帶有正在加載中的 Web 字體的文本。 這是用戶第一次開(kāi)始看到頁(yè)面內(nèi)容，但僅僅有內(nèi)容，并不意味著它是有用的內(nèi)容（例如 Header、導(dǎo)航欄等）

速度指標(biāo)

Time to Interactive（TTI）

表示網(wǎng)頁(yè)第一次完全達(dá)到可交互狀態(tài)的時(shí)間點(diǎn)，瀏覽器已經(jīng)可以持續(xù)性的響應(yīng)用戶的輸入。完全達(dá)到可交互狀態(tài)的時(shí)間點(diǎn)是在最后一個(gè)長(zhǎng)任務(wù)（Long Task）完成的時(shí)間, 并且在隨后的 5 秒內(nèi)網(wǎng)絡(luò)和主線程是空閑的。

速度指標(biāo)

Speed Index

Speed Index（速度指數(shù)）是一個(gè)表示頁(yè)面可視區(qū)域中內(nèi)容的填充速度的指標(biāo)，可以通過(guò)計(jì)算頁(yè)面可見(jiàn)區(qū)域內(nèi)容顯示的平均時(shí)間來(lái)衡量。

速度指標(biāo)

Total Block Time（TBT）

Total Block Time（TBT）總阻塞時(shí)間，度量了 FCP 和 TTI 之間的總時(shí)間，在該時(shí)間范圍內(nèi)，主線程被阻塞足夠長(zhǎng)的時(shí)間以防止輸入響應(yīng)。

只要存在長(zhǎng)任務(wù)，該主線程就會(huì)被視為“阻塞”，該任務(wù)在主線程上運(yùn)行超過(guò) 50 毫秒（ms）。我們說(shuō)主線程“被阻止”是因?yàn)闉g覽器無(wú)法中斷正在進(jìn)行的任務(wù)。因此，如果用戶確實(shí)在較長(zhǎng)的任務(wù)中間與頁(yè)面進(jìn)行交互，則瀏覽器必須等待任務(wù)完成才能響應(yīng)。

如果任務(wù)足夠長(zhǎng)（例如，超過(guò) 50 毫秒的任何時(shí)間），則用戶很可能會(huì)注意到延遲并感覺(jué)頁(yè)面緩慢或過(guò)時(shí)。

給定的長(zhǎng)任務(wù)的阻止時(shí)間是其持續(xù)時(shí)間超過(guò) 50 毫秒。頁(yè)面的總阻塞時(shí)間是 FCP 和 TTI 之間發(fā)生的每個(gè)長(zhǎng)任務(wù)的阻塞時(shí)間的總和。

速度指標(biāo)

Largest Contentful Paint（LCP）

CP（Largest Contentful Paint）最大內(nèi)容繪制，可視區(qū)域中最大的內(nèi)容元素呈現(xiàn) 到屏幕上的時(shí)間，用以估算頁(yè)面的主要內(nèi)容對(duì)用戶可見(jiàn)時(shí)間。

LCP 考慮的元素包括

• <img> 元素
• <image>元素內(nèi)的<svg>元素
• <video> 元素
• 通過(guò) url() 函數(shù)加載背景圖片的元素
• 包含文本節(jié)點(diǎn)或其他內(nèi)聯(lián)文本元素子級(jí)的塊級(jí)元素。

為了提供良好的用戶體驗(yàn)，網(wǎng)站應(yīng)力爭(zhēng)使用 2.5 秒或更短的“最大內(nèi)容繪畫(huà)” 。為確保您達(dá)到大多數(shù)用戶的這一目標(biāo)，衡量移動(dòng)設(shè)備和臺(tái)式機(jī)設(shè)備的頁(yè)面加載量的第 75 個(gè)百分位數(shù)是一個(gè)很好的衡量標(biāo)準(zhǔn)

速度指標(biāo)

Cumulative Layout Shift（CLS）

Cumulative Layout Shift（CLS）累計(jì)布局偏移，CLS 會(huì)測(cè)量在頁(yè)面整個(gè)生命周期中發(fā)生的每個(gè)意外的布局移位的所有單獨(dú)布局移位分?jǐn)?shù)的總和，它是一種保證頁(yè)面的視覺(jué)穩(wěn)定性從而提升用戶體驗(yàn)的指標(biāo)方案。

速度指標(biāo)

可訪問(wèn)性（Accessibility）

Accessibility 輔助功能 : 無(wú)障礙設(shè)計(jì)，也稱為網(wǎng)站可達(dá)性。鋪助檢測(cè)。監(jiān)測(cè)頁(yè)面的可訪問(wèn)性與優(yōu)化建議，如：網(wǎng)頁(yè)的可訪問(wèn)性問(wèn)題，HTML代碼標(biāo)簽之類的優(yōu)化等

?

?

ARIA（無(wú)障礙）

增強(qiáng)輔助技術(shù)用戶的體驗(yàn)，如屏幕閱讀器。?

?

Contrast(對(duì)比度)

提高內(nèi)容易讀性。

比如：Background and foreground colors do not have a sufficient contrast ratio(背景色和前景色沒(méi)有足夠的對(duì)比度) 解決：UI 設(shè)計(jì)的樣式和顏色就是這樣的，不好改

?

Names and labels

改進(jìn)應(yīng)用程序中的控件語(yǔ)義，增強(qiáng)輔助技術(shù)（如屏幕閱讀器）用戶的體驗(yàn)。

比如：

• Image elements do not have [alt] attributes(圖像元素沒(méi)有 [alt] 屬性)
  • 解決：需要向圖像添加替代文本，添加alt屬性，用作占位符，這個(gè)容易改
• Links do not have a discernible name（鏈接沒(méi)有可辨別的名稱）
  • 鏈接主要從其文本內(nèi)容中獲取其可訪問(wèn)的名稱，內(nèi)容不具備代表性時(shí)，可使用aria-label定義

Best practices(最佳實(shí)踐)

• [user-scalable="no"] is used in the element or the [maximum-scale] attribute is less than 5：([user-scalable=“no”]（禁用網(wǎng)頁(yè)上的瀏覽器縮放）用于元素或 [maximum-scale]屬性小于 5)
  • 分析：對(duì)于依賴瀏覽器縮放來(lái)查看網(wǎng)頁(yè)內(nèi)容的低視力用戶來(lái)說(shuō)，這兩個(gè)配置都是有問(wèn)題的。
  • 解決：但是實(shí)際情況中，縮放了頁(yè)面樣式會(huì)混亂，一般是不能縮放的。

Additional items to manually check(手動(dòng)檢查)

• The page has a logical tab order：該頁(yè)面具有邏輯 Tab 鍵順序。
  • 測(cè)試：可以用 tab 鍵盤(pán)瀏覽頁(yè)面，元素聚焦順序遵循 DOM 順序
  • 修復(fù)：tabindex 屬性可控制
• Interactive controls are keyboard focusable：交互式控件可通過(guò)鍵盤(pán)聚焦。
  • 測(cè)試：先通過(guò) Tab 鍵瀏覽，再使用 TAB（或 SHIFT + TAB）到控制間來(lái)回移動(dòng)，并使用箭頭鍵 ENTER 和 SPACE 操縱它們的值
  • 修復(fù)：tabindex 來(lái)提高控件的可聚焦性；可能還需要向自定義控件元素添加適當(dāng)?shù)?ARIA 角色
• Interactive elements indicate their purpose and state：交互元素表明它們的目的和狀態(tài)。
  • 測(cè)試：tab 鍵測(cè)試，:focus 可設(shè)置焦點(diǎn)指示器的樣式
• The user's focus is directed to new content added to the page：用戶的焦點(diǎn)被定向到添加到頁(yè)面的新內(nèi)容。
• User focus is not accidentally trapped in a region：用戶焦點(diǎn)不會(huì)意外陷入某個(gè)區(qū)域。
  • 測(cè)試：使用鍵盤(pán)在所有頁(yè)面元素之間導(dǎo)航。用于 TAB“向前”SHIFT + TAB 導(dǎo)航和“向后”導(dǎo)航。
  • 修復(fù)：提供一種鍵盤(pán)可訪問(wèn)的方法來(lái)轉(zhuǎn)義模態(tài)，創(chuàng)建可訪問(wèn) modal，模態(tài)和鍵盤(pán)陷阱
• Custom controls have associated labels：自定義控件具有關(guān)聯(lián)的標(biāo)簽，是可聚焦的。
• Custom controls have ARIA roles：檢查所有自定義控件是否具有 role 賦予其屬性和狀態(tài)的適當(dāng)且任何必需的 ARIA 屬性。
• Visual order on the page follows DOM order：頁(yè)面上的視覺(jué)順序遵循 DOM 順序。
• Offscreen content is hidden from assistive technology：屏幕外內(nèi)容對(duì)輔助技術(shù)隱藏。
• HTML5 landmark elements are used to improve navigation：HTML5 地標(biāo)元素用于改進(jìn)導(dǎo)航，如 main、nav、aside 等。

Passed audits(通過(guò)審核)

• [aria-hidden="true"] is not present on the document ：body 上不能寫(xiě) aria-hidden 屬性
• [aria-hidden="true"] elements do not contain focusable descendents：[aria-hidden=“true”] 元素包含可聚焦的后代
• [aria-*] attributes have valid values：[aria-*] 屬性沒(méi)有有效值
• [aria-*] attributes are valid and not misspelled：[aria-*] 屬性無(wú)效或拼寫(xiě)錯(cuò)誤
• Buttons have an accessible name：按鈕沒(méi)有可訪問(wèn)的名稱，aria-label 屬性標(biāo)識(shí)
• The page contains a heading, skip link, or landmark region：頁(yè)面不包含標(biāo)題、跳過(guò)鏈接或地標(biāo)區(qū)域）
• Document has a element：文檔有元素
• Heading elements appear in a sequentially-descending order：標(biāo)題元素不是按順序降序排列的，即結(jié)構(gòu)不佳
• element has a [lang] attribute：元素沒(méi)有l(wèi)ang屬性
• element has a valid value for its [lang] attribute：lang屬性沒(méi)有有效值
• Form elements have associated labels：表單元素沒(méi)有關(guān)聯(lián)的標(biāo)簽，使用 for 屬性引用元素的 id
• No element has a [tabindex] value greater than 0：某些元素的[tabindex]值大于 0，會(huì)被認(rèn)為是反模式

最佳實(shí)踐（Best Practices）

實(shí)踐性檢測(cè)。如：網(wǎng)頁(yè)安全性，如是否開(kāi)啟HTTPS、網(wǎng)頁(yè)存在的漏洞等?

?Trust and Safety(信任與安全)

• Ensure CSP is effective against XSS attacks：確保 CSP 對(duì) XSS 攻擊有效
• Does not use HTTPS:沒(méi)有使用 HTTPS，有 不安全的請(qǐng)求

General(通用)

• Missing source maps for large first-party JavaScript：缺少 JavaScript 的源映射。一般出現(xiàn)情況是可能開(kāi)發(fā)環(huán)境是有的，但是生產(chǎn)環(huán)境為了減少包大小，一般不會(huì)配置*

Passed audits(審核通過(guò))

• ?Links to cross-origin destinations are safe（指向跨源目的地的鏈接不安全）
  • 問(wèn)題：使用target="_blank"屬性鏈接到另一個(gè)站點(diǎn)上的頁(yè)面時(shí)，可能會(huì)面臨性能和安全問(wèn)題
  • 解決：添加?rel="noopener"或?rel="noreferrer"
• Avoids requesting the geolocation permission on page load（在頁(yè)面加載時(shí)請(qǐng)求地理定位權(quán)限）
  • 問(wèn)題：代碼調(diào)用?geolocation.getCurrentPosition()或?geolocation.watchPosition()，并且尚未授予地理定位權(quán)限，則審核失敗
• Avoids requesting the notification permission on page load（請(qǐng)求頁(yè)面加載通知權(quán)限）
  • 問(wèn)題：代碼調(diào)用?notification.requestPermission()，并且尚未授予通知權(quán)限，則審核失敗
• Avoids front-end JavaScript libraries with known security vulnerabilities（具有已知安全漏洞的前端 JavaScript 庫(kù)）
  • 問(wèn)題：入侵者可以通過(guò)自動(dòng)網(wǎng)絡(luò)爬蟲(chóng)掃描站點(diǎn)，查找已知的安全漏洞
• Allows users to paste into password fields（防止用戶獲取密碼）
• Displays images with correct aspect ratio（顯示縱橫比不正確的圖像）
• Serves images with appropriate resolution（提供響應(yīng)式圖像）
• Page has the HTML doctype（頁(yè)面缺少 HTML 文檔類型，從而觸發(fā)怪異模式）
• Properly defines charset（字符集聲明缺失或在 HTML 中出現(xiàn)得太晚）
• Avoids unload event listeners（要避免遺留的生命周期 API，事件或者監(jiān)聽(tīng)器要注銷）
• Avoids Application Cache（使用應(yīng)用程序緩存）
  • 使用緩存 API 而不是應(yīng)用程序緩存，通過(guò) Service Worker 使用緩存 API
• Detected JavaScript libraries（列出所有前端使用的 JavaScript 庫(kù)）
• Avoids deprecated APIs（使用已棄用的 API）
• No browser errors logged to the console（沒(méi)有瀏覽器錯(cuò)誤被記錄到控制臺(tái)）
• No issues in the Issues panel in Chrome Devtools（Chrome Devtools “Issues” 面板中沒(méi)有未解決的問(wèn)題）

NOT APPLICABLE（不適用）

?

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

?搜索引擎優(yōu)化檢測(cè)。如：網(wǎng)頁(yè)title是否符合搜索引擎的優(yōu)化標(biāo)準(zhǔn)等

Content Best Practices(內(nèi)容最佳實(shí)踐)

Crawling and Indexing(爬取和索引)

Additional items to manually check(需要手動(dòng)檢查的項(xiàng)目)

Passed audits(審核通過(guò))

Not applicable(不適用)

PWA

驗(yàn)證 PWA 的各個(gè)方面的性能情況。?

Installable(安裝)

PWA Optimized(PWA 優(yōu)化)

ADDITIONAL ITEMS TO MANUALLY CHECK（需要手動(dòng)檢查）

?引用：Lighthouse（燈塔）—— Chrome瀏覽器強(qiáng)大的性能測(cè)試工具_(dá)chrome lighthouse-CSDN博客

前端性能測(cè)試工具 Lighthouse(燈塔)使用 - 掘金?

超級(jí)詳細(xì)的手把手教你使用Lighthouse更好推動(dòng)項(xiàng)目性能優(yōu)化，性能指標(biāo)詳解，優(yōu)化方法，需要關(guān)注指標(biāo)分析_lighthouse報(bào)告分析-CSDN博客?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-849310.html

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