一. 用途
Lighthouse 是一個開源的自動化工具，用于改進網(wǎng)絡(luò)應(yīng)用的質(zhì)量。只要為 Lighthouse 提供一個需要審查的網(wǎng)址，它將針對此頁面運行一連串的測試，然后生成一個有關(guān)頁面的性能報告。
二. 安裝步驟
三種安裝方式
2.1 Chrome擴展程序
2.2 Chrome Dev Tools
2.3 命令行node
1. 安裝命令：# 注意：Lighthouse需要 Node 10 LTS (10.13) 或更高的版本.
npm install -g lighthouse
2. 運行Lighthouse：
lighthouse <url>
3. 以百度為例，輸入下面的命令即可：
lighthouse https://www.baidu.com/
完成后，可以查看HTML報告
Performance 性能,性能檢測，如網(wǎng)頁的加載速度、響應(yīng)時間等
accessibility 無障礙使用
Best Practice 用戶體驗
SEO 優(yōu)化
0 to 49 (red): Poor
50 to 89 (orange): Needs Improvement
90 to 100 (green): Good
三. 報告分析
- **Performance 性能檢測，如網(wǎng)頁的加載速度、響應(yīng)時間等
- First Contentful Paint：首次內(nèi)容繪制時間。
- Speed Index：速度指數(shù)，是一個頁面加載性能指標，明顯的頁面填充的速度，此指標的分數(shù)越低越好。
- Largest Contentful Paint:（最大內(nèi)容渲染時間）LCP是一個頁面加載時長的技術(shù)指標，用于表示當前頁面中最重要/占比最大的內(nèi)容顯示出來的時間點。不同于First Contentful Paint，F(xiàn)CP代表的是第一次頁面內(nèi)容渲染的時間點，LCP是FCP的一個重要的補充，它可以代表當前頁面主要內(nèi)容展示的時間。LCP低于2.5s則表示頁面加載速度優(yōu)良。
-
Time to Interactive：可互動時間，頁面中的大多數(shù)網(wǎng)絡(luò)資源完成加載并且
CPU在很長一段時間都很空閑的所需的時間。此時可以預(yù)期cpu非?？臻e，可以及時的處理用戶的交互操作。 - Total Blocking Time:（累積阻塞時長）TBT是一個衡量用戶事件響應(yīng)的指標。TBT會統(tǒng)計在FCP和TTI時間之間，主線程被阻塞的時間總和。當主線程被阻塞超過50ms導致用戶事件無法響應(yīng)，這樣的阻塞時長就會被統(tǒng)計到TBT中。TBT越小說明頁面能夠更好的快速響應(yīng)用戶事件。
- Cumulative Layout Shift:（累積布局變化量）CLS是一個衡量頁面內(nèi)容是否穩(wěn)定的指標，CLS會將頁面加載過程中非預(yù)期的頁面布局的累積變動。CLS的分數(shù)越低，表明頁面的布局穩(wěn)定性越高，通常低于0.1表示頁面穩(wěn)定性良好。
- Accessibility 輔助功能 : 無障礙設(shè)計，也稱為網(wǎng)站可達性。是指所創(chuàng)建的網(wǎng)站對所有用戶都可用/可訪問，不管用戶的生理/身體能力如何、不管用戶是以何種方式訪問網(wǎng)站。
Background and foreground colors do not have a sufficient contrast ratio.
這個意思就是某處文字背景色和文字顏色對比度不夠，對于視障用戶可能不好區(qū)分。
- Best Practices 最佳實踐 : 實踐性檢測，如網(wǎng)頁安全性，如是否開啟HTTPS、網(wǎng)頁存在的漏洞等
html element does not have a [lang] attribute
搜索引擎在索引網(wǎng)站內(nèi)容時也需要知道網(wǎng)站適用的語言,從而更好地為用戶返回搜索結(jié)果
改為：
<html lang="zh">
當頁面鏈接至使用 target="_blank" 的另一個頁面時，兩個頁面將在同一個進程上運行。 如果新頁面正在執(zhí)行開銷極大的 JavaScript，當前頁面性能可能會受影響。
另外，target="_blank" 也有一個安全漏洞。新的頁面可以通過 window.opener 訪問舊的窗口對象，甚至可以使用 window.opener.location = newURL 將舊頁面導航至不同的網(wǎng)址。
當設(shè)置rel="noopener"時chrome會在獨立的進程中打開新頁面,同時會阻止window.opener，因此不存在跨窗口訪問。
<a target="_blank" rel="noopener" >
- SEO 搜索優(yōu)化
SEO（Search Engine Optimization）：搜索引擎優(yōu)化檢測，如網(wǎng)頁title是否符合搜索引擎的優(yōu)化標準等
Document does not have a meta description
<meta name=”description” content=”leepin”>
四.實戰(zhàn)
優(yōu)化后
這是 Lighthouse 目的：它能識別和修復(fù)，影響我們網(wǎng)站的性能、可訪問性和用戶體驗的常見問題。
