使用Lighthouse更好推動項目性能優化，性能指標詳解，優化方法，需要關注指標分析

🌸Lighthouse是什么---一種工具

• Lighthouse 是一個開源的自動化工具，用來測試頁面性能。

🌸為什么要用Lighthouse----提升用戶體驗

• Web性能可以直接影響業務指標，例如轉化率和用戶滿意度
• 分析收集各種應用頁面性能指標，並進行評估，以此我們可以根據評估結果進行針對性優化，不斷提升用戶體驗

🌸Lighthouse怎么用----用法多樣，根據需求進行選擇

目前官方提供了4種使用方式：

• Chrome 開發者工具（DevTools）
• Node CLI
• Node Module
• Chrome 擴展

方式一：Chrome 開發者工具（DevTools）

• 1.在chrome瀏覽器中打開你需要測試的網站，按f12進入開發者調試模式
• 2.找到Lighthouse-點擊 generate report,它會對頁面進行相關性能的檢查，最終生成報告
  

方式二：使用Node Cli

1.安裝node 8 或更高版本
2.全局安裝lighthouse:

npm install -g lighthouse

3.新建一個文件夾，初始化，可根據自己需求進行綁定git倉庫

npm init -y

4.使用終端輸入下面命令(這里以m.jd為例）

npx lighthouse https://wqs.jd.com/data/coss/important/msportal_recovery.shtml?tpl=index --locale zh --quiet --chrome-flags="--headless"  --only-categories=performance  --preset=desktop 

5.生成報告

6.打開報告

7.分析報告，從不同角度來對照分析我們的關注指標

7.1 用戶角度

• 7.1.1 項目首屏加載時間 例如，從打開系統到看到系統頁面的時間
  關注點：FCP
  First Contentful Paint(首次內容渲染)表示瀏覽器渲染出第一個內容的時間，這個內容可以是文本、圖片或SVG元素等，不包括iframe和白色背景的canvas元素
  

• 7.1.2 交互響應時間，例如 當我們點擊某個按鈕，到系統發送請求獲取結果，此過程的消耗時間
  關注點：FID 點擊直達WEB-DEV-FID文檔
  首次輸入延遲 (FID) 是測量加載響應度的一個以用戶為中心的重要指標
  因為該項指標將用戶嘗試與無響應頁面進行交互時的體驗進行了量化，低 FID 有助於讓用戶確信頁面是有效的
  首次輸入延遲 (FID) 指標有助於衡量您的用戶對網站交互性和響應度的第一印象
  FID 測量從用戶第一次與頁面交互（例如當他們單擊鏈接、點按按鈕或使用由 JavaScript 驅動的自定義控件）直到瀏覽器對交互作出響應，並實際能夠開始處理事件處理程序所經過的時間
  
  
  
  
  您可能已經注意到 FCP 和 TTI 之間有相當長的一段時間（包括三段長任務），如果用戶在這段時間內嘗試與頁面進行交互（例如單擊一個鏈接），那么從瀏覽器接收到單擊直至主線程能夠響應之前就會有一段延遲。
  請看如果用戶在最長的任務剛開始時就嘗試與頁面進行交互會發生什么：
  
  

7.2研發角度

• 7.2.1 詳情參考下方 Lighthouse優化總結

性能指標詳解

• 網絡進程與渲染進程圖
  

• 1.FP
  First Paint(首次渲染)表示了瀏覽器從開始請求網站到屏幕渲染第一個像素點的時間

• 2.FCP
  First Contentful Paint(首次內容渲染)表示瀏覽器渲染出第一個內容的時間，這個內容可以是文本、圖片或SVG元素等，不包括iframe和白色背景的canvas元素

• 3.SI
  Speed Index(速度指數)表明了網頁內容的可見填充速度
  速度指數衡量頁面加載期間內容的視覺顯示速度

• 4. LCP
     Largest Contentful Paint(最大內容繪制)標記了渲染出最大文本或圖片的時間
     最大內容繪制 (LCP) 是測量感知加載速度的一個以用戶為中心的重要指標

• 5.TTI
  Time to Interactive(可交互時間)指標測量頁面從開始加載到主要子資源完成渲染，並能夠快速、可靠地響應用戶輸入所需的時間
  webpagetest
  雖然 TTI 可以在實際情況下進行測量，但我們不建議這樣做，因為用戶交互會影響您網頁的 TTI，從而導致您的報告中出現大量差異。如需了解頁面在實際情況中的交互性，您應該測量First Input Delay 首次輸入延遲 (FID)

• 6.TBT
  total Blocking Time(總阻塞時間)指標測量First Contentful Paint 首次內容繪制 (FCP)與Time to Interactive 可交互時間 (TTI)之間的總時間，這期間，主線程被阻塞的時間過長，無法作出輸入響應
  雖然 TBT 可以在實際情況下進行測量，但我們不建議這樣做，因為用戶交互會影響您網頁的 TBT，從而導致您的報告中出現大量差異。如需了解頁面在實際情況中的交互性，您應該測量First Input Delay 首次輸入延遲 (FID)

• 7.FID
  首次輸入延遲 (FID) 是測量加載響應度的一個以用戶為中心的重要指標
  因為該項指標將用戶嘗試與無響應頁面進行交互時的體驗進行了量化，低 FID 有助於讓用戶確信頁面是有效的
  首次輸入延遲 (FID) 指標有助於衡量您的用戶對網站交互性和響應度的第一印象
  FID 測量從用戶第一次與頁面交互（例如當他們單擊鏈接、點按按鈕或使用由 JavaScript 驅動的自定義控件）直到瀏覽器對交互作出響應，並實際能夠開始處理事件處理程序所經過的時間

• 8.CLS
  https://web.dev/cls/)是測量視覺穩定性的一個以用戶為中心的重要指標
  CLS 測量整個頁面生命周期內發生的所有意外布局偏移中最大一連串的布局偏移分數

🌸優化方法

改進FP和FCP

• 加快服務器響應速度
  升級服務器配置
  合理設置緩存
  優化數據庫索引
• 加大服務器帶寬
• 服務器開啟gzip壓縮
• 開啟服務器緩存(redis)
• 避免重定向操作
• 使用dns-prefetch進行DNS進行預解析
• 采用域名分片技術突破同域6個TCP連接限制或者采用HTTP2
• 使用CDN減少網絡跳轉
• 壓縮JS和CSS和圖片等資源
  TerserWebpackPlugin
  purgecss-webpack-plugin
• 減少HTTP請求，合並JS和CSS，合理內嵌JS和CSS

改進SI

1.最小化主線程工作

• 最小化主線程工作
• 腳本
  優化第三方的JS腳本
  對輸入進行防抖處理
  使用web workers
• 樣式和布局
  縮小樣式計算的范圍並降低其復雜性
  避免復雜的布局和布局抖動
• 渲染
  堅持僅合成器的屬性和管理層計數
  簡化繪制的復雜度、減小繪制區域
• 解析HTML和CSS
  提取關鍵CSS
  壓縮CSS
  延遲加載非關鍵的CSS
• 腳本解析和編譯
  通過代碼拆分減少JS的負載
  刪除未使用的JS
• 垃圾收集
  監控網頁的總內存使用情況

2.減少 JavaScript 執行時間

• 減少 JavaScript 執行時間
• 通過代碼分割僅發送用戶需要的代碼
• 壓縮代碼
• 刪除未使用代碼
• 使用PRPL模式緩存你的代碼來減少網絡開銷

3.確保文本在 webfont 加載期間保持可見

• 確保文本在 webfont 加載期間保持可見
• 字體通常是需要一段時間才能加載的大文件。一些瀏覽器在字體加載之前隱藏文本，導致不可見文本 (FOIT) 閃爍。
• 通過包含font-display: swap在您的@font-face風格中，您可以在大多數現代瀏覽器中避免 FOIT**

4.web workers

5.避免強制同步布局和布局抖動

• 改變一個元素的特性或者修改其內容有時不僅影響該元素，有時候會導致級聯的變化，可能影響該元素的子節點、兄弟節點、父節點的改- 變，所以每次進行修改時，瀏覽器都必須重新計算這些改變的影響
  如果我們編寫的代碼不能讓瀏覽器有足夠的時間和空間來進行優化，強制瀏覽器執行大量重新計算，就會造成布局抖動
• 每次修改DOM，瀏覽器必須在讀取任何布局信息之前先重新計算布局，對性能的損耗十分巨大
• 避免布局抖動的一種方法就是使用不會導致瀏覽器重排的方式編寫代碼 比如批量的讀取和寫入等

改進LCP

• 使用 PRPL 模式做到即時加載
  推送(或預加載)最重要的資源 Preload是一個聲明性的獲取請求，它告訴瀏覽器盡快請求資源
  盡快渲染初始路線 內聯首屏JS和CSS推薦其余部分
  預緩存剩余資源 Service Worker
  延遲加載其他路由和非關鍵資源
• 優化關鍵渲染路徑
• 優化您的 CSS
• 優化您的圖像
• 優化網頁字體
• 優化您的JavaScript

改進TTI

• 縮小JavaScript
• 預連接到所需的來源
• 預加載關鍵請求
• 減少第三方代碼的影響
• 最小化關鍵請求深度
• 減少 JavaScript 執行時間
• 最小化主線程工作
• 保持較低的請求數和較小的傳輸大小

如何改進TBT

• 減少第三方代碼的影響
• 減少 JavaScript 執行時間
• 最小化主線程工作
• 保持較低的請求數和較小的傳輸大小

改進FID

• 減少第三方代碼的影響
• 減少 JavaScript 執行時間
• 最小化主線程工作
• 保持較低的請求數和較小的傳輸大小

改進CLS

• 始終在您的圖像和視頻元素上包含尺寸屬性
• 首選轉換動畫，而不是觸發布局偏移的屬性動畫
• 除非是對用戶交互做出響應，否則切勿在現有內容的上方插入內容

🌸Lighthouse優化總結

• Num.1 減少未使用的 JavaScript
  Remove unused JavaScript
  請減少未使用的 JavaScript，並等到需要使用時再加載腳本，以減少網絡活動耗用的字節數
• Num.2 采用新一代格式提供圖片
  Serve images in modern formats
  WebP 和 AVIF 等圖片格式的壓縮效果通常優於 PNG 或 JPEG，因而下載速度更快，消耗的數據流量更少
• Num.3 適當調整圖片大小
  Properly size images
  提供大小合適的圖片可節省移動數據網絡流量並縮短加載用時
• Num.4 推遲加載屏幕外圖片
  Defer offscreen images
  建議您在所有關鍵資源加載完畢后推遲加載屏幕外圖片和處於隱藏狀態的圖片，從而縮短可交互前的耗時
• Num.5 移除阻塞渲染的資源
  Eliminate render-blocking resources
  資源阻止了系統對您網頁的首次渲染。建議以內嵌方式提供關鍵的 JS/CSS，並推遲提供所有非關鍵的 JS/樣式
• Num.6 減少未使用的 CSS
  Remove unused CSS
  請從樣式表中減少未使用的規則，並延遲加載首屏內容未用到的 CSS，以減少網絡活動耗用的字節數
• Num.7 使用視頻格式提供動畫內容
  Use video formats for animated content
  使用大型 GIF 提供動畫內容會導致效率低下。建議您改用 MPEG4/WebM 視頻（來提供動畫）和 PNG/WebP（來提供靜態圖片）以減少網絡活動消耗的字節數
• Num.8 預先連接到必要的來源
  Preconnect to required origins
  建議添加 preconnect 或 dns-prefetch 資源提示，以盡早與重要的第三方來源建立連接
• Num.9 應避免向新型瀏覽器提供舊版JavaScript
  Deploying ES2015+ Code in Production Today
  Polyfill 和 transform 讓舊版瀏覽器能夠使用新的 JavaScript 功能。不過，其中的很多函數對新型瀏覽器而言並非必需。對於打包的 JavaScript，請采用現代腳本部署策略，以便利用 module/nomodule 功能檢測機制來減少傳送到新型瀏覽器的代碼量，同時保留對舊版瀏覽器的支持
• Num.10 確保文本在網頁字體加載期間保持可見狀態
  Ensure text remains visible during webfont load
  利用 font-display 這項 CSS 功能，確保文本在網頁字體加載期間始終對用戶可見
• Num.11 未使用被動式監聽器來提高滾動性能
  Use passive listeners to improve scrolling performance
  建議您將觸摸和滾輪事件監聽器標記為 passive，以提高頁面的滾動性能,passive不會對事件的默認行為說 no
• Num.12 圖片元素沒有明確的width和height
  請為圖片元素設置明確的寬度值和高度值，以減少布局偏移並改善 CLS
• Num.13 注冊“unload”事件監聽器
  Legacy lifecycle APIs to avoid
  unload事件不會可靠地觸發，而且監聽該事件可能會妨礙系統實施“往返緩存”之類的瀏覽器優化策略。建議您改用pagehide或visibilitychange事件
• Num.14 最大限度地減少主線程工作
  Minimize main thread work
  建議您減少為解析、編譯和執行 JS 而花費的時間。您可能會發現，提供較小的 JS 負載有助於實現此目標
• Num.15 采用高效的緩存策略提供靜態資源
  Serve static assets with an efficient cache policy
  延長緩存期限可加快重訪您網頁的速度
• Num.16 縮短 JavaScript 執行用時
  Reduce JavaScript execution time
  建議您減少為解析、編譯和執行 JS 而花費的時間。您可能會發現，提供較小的 JS 負載有助於實現此目標
• Num.17 避免鏈接關鍵請求
  Avoid chaining critical requests
  下面的關鍵請求鏈顯示了以高優先級加載的資源。請考慮縮短鏈長、縮減資源的下載文件大小，或者推遲下載不必要的資源，從而提高網頁加載速度
• Num.18 請保持較低的請求數量和較小的傳輸大小
  Use Lighthouse for performance budgets
  performancebudget
  若要設置頁面資源數量和大小的預算，請添加 budget.json 文件
• Num.19 最大內容渲染時間元素
  Largest Contentful Paint
  這是此視口內渲染的最大內容元素
• Num.20 請避免出現大幅度的布局偏移
  這些 DOM 元素對該網頁的 CLS 影響最大
• Num.21 應避免出現長時間運行的主線程任務
  Are long JavaScript tasks delaying your Time to Interactive?
  列出了主線程中運行時間最長的任務，有助於識別出導致輸入延遲的最主要原因
• Num.22 避免使用未合成的動畫
  Avoid non-composited animations
  未合成的動畫可能會卡頓並增加 CLS
• Num.23 縮減 CSS
  Minify CSS
  縮減 CSS 文件大小可縮減網絡負載規模
• Num.24 縮減 JavaScript
  Minify JavaScript
  如果縮減 JavaScript 文件大小，則既能縮減負載規模，又能縮短腳本解析用時
• Num.25 對圖片進行高效編碼
  Efficiently encode images
  如果圖片經過了優化，則加載速度會更快，且消耗的移動數據網絡流量會更少
• Num.26 啟用文本壓縮
  Enable text compression
  對於文本資源，應先壓縮（gzip、deflate 或 brotli），然后再提供，以最大限度地減少網絡活動消耗的字節總數
• Num.27 初始服務器響應用時較短
  Reduce server response times (TTFB)
  請確保服務器響應主文檔的用時較短，因為這會影響到所有其他請求的響應時間
• Num.28 避免多次網頁重定向
  Avoid multiple page redirects
  重定向會在網頁可加載前引入更多延遲
• Num.29 預加載關鍵請求
  Preload key requests
  建議使用 來優先提取當前在網頁加載后期請求的資源
• Num.30 使用 HTTP/2
  Does not use HTTP/2 for all of its resources
  HTTP/2 提供了許多優於 HTTP/1.1 的益處，包括二進制標頭和多路復用
• Num.31 請移除 JavaScript 軟件包中的重復模塊
  從軟件包中移除重復的大型 JavaScript 模塊可減少網絡傳輸時不必要的流量消耗
• Num.32 預加載 LCP 元素所用圖片
  優化 Largest Contentful Paint 最大內容繪制
  請預加載 Largest Contentful Paint (LCP) 元素所用的圖片，以縮短您的 LCP 用時
• Num.33 避免網絡負載過大
  Avoid enormous network payloads
  網絡負載過大不僅會讓用戶付出真金白銀，還極有可能會延長加載用時
• Num.34 避免 DOM 規模過大
  Avoid an excessive DOM size
  大型 DOM 會增加內存使用量、導致樣式計算用時延長，並產生高昂的布局重排成本
• Num.35 User Timing 標記和測量結果
  User Timing marks and measures
  建議使用 User Timing API 檢測您的應用，從而衡量應用在關鍵用戶體驗中的實際性能
• Num.36 盡量減少第三方使用
  Loading Third-Party JavaScript
  第三方代碼可能會顯著影響加載性能。請限制冗余第三方提供商的數量，並嘗試在頁面完成主要加載后再加載第三方代碼
• Num.37 使用 Facade 延遲加載第三方資源
  Lazy load third-party resources with facades
  您可以延遲加載某些第三方嵌入代碼。不妨考慮使用 Facade 替換這些代碼，直到您需要使用它們為止
• Num.38 Largest Contentful Paint 所對應的圖片未被延遲加載
  The performance effects of too much lazy-loading
  被延遲加載的首屏圖片會在頁面生命周期內的較晚時間呈現，這可能會致使系統延遲渲染最大內容元素
• Num.39 請勿使用 document.write()
  Uses document.write()
  對於連接速度較慢的用戶，通過 document.write() 動態注入的外部腳本可將網頁加載延遲數十秒
• Num.40 具有包含 width 或 initial-scale 的 標記
  Does not have a tag with width or initial-scale
  不僅會針對移動設備屏幕尺寸優化您的應用，還會阻止系統在響應用戶輸入前出現 300 毫秒的延遲

🌸本文參考：

張老師公開課
web-worker
https://crux-compare.netlify.app
https://web.dev
https://developer.mozilla.org/zh-CN/docs/Web/API/performance_property
IntersectionObserver懶加載
https://app.requestmetrics.com
performancebudget
readystatechange_event
readyState

🌸