化必知：一文搞懂 LCP（最大內(nèi)容繪制）)
你能所學到的知識點前置知識點視口、渲染阻塞資源、瀏覽器級圖片懶加載LCP 是個啥如何測量 LCP優(yōu)化 LCP 的 10 種方式前置知識點在深入了解 LCP 之前我們先快速過幾個前置概念。視口Viewport視口是指瀏覽器中用于顯示網(wǎng)頁內(nèi)容的可見區(qū)域簡單來說就是用戶屏幕上實際能看到的網(wǎng)頁部分。視口大小取決于用戶設備的屏幕尺寸和瀏覽器窗口的大小——手機上視口較小臺式機上則較大。在開發(fā)中我們可以使用 CSS 視口單位來設置元素尺寸vw視口寬度的百分比vh視口高度的百分比vmin視口寬度和高度中較小值的百分比vmax視口寬度和高度中較大值的百分比通過meta標簽可以控制視口行為metanameviewportcontentwidthdevice-width, initial-scale1.0widthdevice-width頁面寬度與設備屏幕寬度一致initial-scale1.0初始縮放級別為 1渲染阻塞資源某些資源如 CSS、JavaScript會阻塞頁面的首次渲染理解它們對優(yōu)化 LCP 至關重要。這部分內(nèi)容在之前的「瀏覽器之資源獲取優(yōu)先級」文章中有詳細介紹。瀏覽器級圖片懶加載圖片是大多數(shù)網(wǎng)站最常請求的資源類型在 90% 分位點上網(wǎng)站在桌面和移動設備上發(fā)送的圖像超過 5MB。以前實現(xiàn)懶加載有兩種方式使用Intersection Observer API使用scroll、resize或orientationchange事件處理程序現(xiàn)在瀏覽器原生支持懶加載不需要外部庫了imgsrcimage.jpgloadinglazyalt描述loading屬性支持的值lazy推遲加載直到元素離視口足夠近eager瀏覽器默認行為立即加載LCP 是啥LCP 是 Largest Contentful Paint 的縮寫中文名稱叫「最大內(nèi)容繪制」。在大多數(shù)網(wǎng)頁上總有一個元素因為其大小和突出性而格外顯眼——比如很多公司官網(wǎng)首頁的輪播圖或主視覺區(qū)域它就是該頁面的LCP 元素。換句話說LCP 衡量的是網(wǎng)站呈現(xiàn)包含「最大數(shù)量內(nèi)容」的元素所需的時間。LCP 得分越低說明網(wǎng)站運行越流暢用戶體驗越好。需要注意的是LCP 得分與頁面「整體加載時間」可能不同。比如一個頁面需要 3 秒才能完全加載但 LCP 可能只有 2 秒——因為現(xiàn)代網(wǎng)站除了文本和媒體文件外還會加載很多腳本資源。通常情況下LCP 與 FCP 是相關的。FCP 測量的是「第一個帶有任何內(nèi)容的元素繪制所需的時間」。另外需要特別注意在測量 LCP 時SVG 文件和 video 等元素也需要納入考量。如何測量 LCP確定網(wǎng)站上的最大內(nèi)容元素其實不難——等頁面完全加載后大致瀏覽一下那個最突出的「顯眼包」元素就是了。通常情況下它會是一張圖片或一個文本塊。真正的技巧在于測量特定元素加載所需的時間而不是頁面本身。使用 PageSpeed Insights最流行的 LCP 測量工具之一是 Google 的PageSpeed Insights它是一個免費工具可以幫助分析和診斷網(wǎng)頁性能。操作步驟將網(wǎng)站 URL 輸入搜索欄點擊「分析」按鈕分析完成后在「真實用戶的體驗」部分查看 LCP 等指標的詳細信息PageSpeed Insights 從多個用戶收集實際性能數(shù)據(jù)比單次測試更精確每個得分都有百分比展示——例如 89% 的頁面加載在 1.5 秒內(nèi)完成檢查「診斷性能問題」部分獲得改進建議實驗數(shù)據(jù)提供總體得分雖不如真實用戶體驗精確但也能反映大致情況還可以查看 LCP、FCP、CLS 等更多指標點擊「展開視圖」可閱讀簡要解釋重要提示即使網(wǎng)站優(yōu)化得很好加載時間也會因用戶而異——有人網(wǎng)速慢有人離服務器遠。這就是為什么擁有一個平均分數(shù)作為參考至關重要。除了 PageSpeed Insights還可以使用Lighthouse和Search Console對網(wǎng)站做一次全面「體檢」。LCP 得分標準得分范圍評價0 - 2.5 秒優(yōu)秀2.5 - 4 秒良好4 - 7.5 秒需改進超過 7.5 秒不佳理想情況下LCP 得分應低于 2.5 秒。整體加載時間應保持在 3 秒以下超過這個時間點跳出率會顯著增加。LCP 測量的是哪些元素LCP 僅測量頁面能夠在視口內(nèi)加載最大元素的速度。觸發(fā) LCP 記錄的元素包括圖像元素包括 SVG 元素內(nèi)的圖像視頻元素使用url()函數(shù)加載背景圖像的元素塊級元素內(nèi)的文本節(jié)點大小計算規(guī)則對于圖像元素報告可見大小和固有大小中較小的那個對于文本元素僅考慮文本節(jié)點的大小不計算任何邊距margin、填充padding或邊框border優(yōu)化 LCP 的 10 種方式LCP 是網(wǎng)站頁面加載速度的重要指標較差的 LCP 得分會導致用戶體驗不佳。造成 LCP 差的常見原因服務器響應時間和資源加載時間過慢客戶端渲染Client-side rendering阻塞渲染的資源Render-blocking resources下面是 10 種干貨滿滿的優(yōu)化方式 1. 利用 CDN內(nèi)容分發(fā)網(wǎng)絡CDN是提升網(wǎng)站流量管理的優(yōu)秀工具。CDN 通過額外服務器分擔負載訪問者的請求不需要在同一服務器中排隊從而改善 LCP 得分。CDN 還可以與圖像 CDN 等軟件結合實時優(yōu)化和轉(zhuǎn)換圖像大小。推薦Cloudflare 提供全球 120 中心節(jié)點有免費計劃且配置簡單。2. 確保正確的圖像尺寸圖像很可能成為 LCP 的最大元素因此確保網(wǎng)頁使用響應式圖像至關重要。關鍵在于根據(jù)用戶設備提供正確的圖像尺寸——桌面版用大圖移動版用中等尺寸。常見的圖像尺寸規(guī)范縮略圖150 像素正方形中等尺寸最大 300 像素正方形大尺寸最大 1024 像素正方形原始尺寸指原始圖像尺寸圖像報告的是其最小元素尺寸——壓縮圖像報告可見尺寸放大圖像報告原始尺寸。3. 優(yōu)化圖像除了尺寸之外壓縮圖像也是改善加載時間的重要手段。推薦工具TinyPNGImagifyKraken付費優(yōu)化圖像不僅能提高 LCP 得分還能節(jié)省存儲空間、改善 SEO 性能。4. 提高服務器響應時間頁面加載時間與 Web 服務器的響應時間密切相關。用戶瀏覽器請求和服務器響應之間的往返時間RTT是影響加載速度的主要因素。改善方法實施服務器端緩存通常在托管配置中可用升級服務器規(guī)格更好的 CPU 和更大的存儲容量優(yōu)化應用程序代碼如數(shù)據(jù)庫查詢優(yōu)化刪除非關鍵 CSS5. 實施緩存緩存是指將頁面的靜態(tài)資源存儲在臨時存儲中通過減少初始呈現(xiàn)過程中的數(shù)據(jù)傳輸量來實現(xiàn)更快的頁面加載。兩種主要緩存方式瀏覽器緩存訪問者將緩存存儲在本地再次訪問時無需重新下載。服務器端緩存將預先制作的網(wǎng)頁版本存儲在原始服務器中用戶再次訪問時無需從數(shù)據(jù)庫重新構建。推薦工具LiteSpeed具有先進的緩存功能、動態(tài)內(nèi)容優(yōu)化和 HTTP 負載均衡器。6. 修復延遲加載問題延遲加載是一種推遲非關鍵資源加載的技術專注于先加載視口上方的內(nèi)容。首屏內(nèi)容如 Logo立即顯示視口外的元素如視頻縮略圖用占位圖替代直到用戶滾動到它們。?? 潛在問題延遲加載有時會惡化 LCP 得分。解決方案對可能成為 LCP 元素的主圖使用loadingeager使其立即渲染在首屏上方的圖像上禁用延遲加載7. 縮小 JS、CSS 和 HTML 文件文件縮小通過減少代碼行數(shù)來減小文件大小。CSS、JavaScript 和 HTML 代碼中常常包含大量不必要的空格積累起來會嚴重影響性能。8. 消除阻塞渲染的 JavaScript 和 CSS第一步識別關鍵資源使用 Chrome DevTools 中的Coverage 選項卡來識別非關鍵的 CSS 和 JS 文件。綠色關鍵首次繪制必需的樣式頁面核心功能的關鍵代碼紅色非關鍵不立即可見內(nèi)容的樣式未使用的代碼減少阻塞渲染的 JS將關鍵代碼從阻塞渲染的 URL 移到 HTML 頁面的內(nèi)聯(lián) script 標簽中非關鍵代碼保留在 URL 中使用async或defer屬性標記減少阻塞渲染的 CSS類似于 JS 的處理方式將關鍵 CSS 內(nèi)聯(lián)到 HTML 中總結LCP 是衡量用戶體驗的核心性能指標之一直接關系到用戶對網(wǎng)站的第一印象。通過本文介紹的 10 種優(yōu)化方式——從 CDN 加速、圖像優(yōu)化、服務器響應提速到緩存策略、延遲加載修復和代碼精簡——我們可以系統(tǒng)地改善 LCP 得分讓網(wǎng)站跑得更快、用戶體驗更絲滑。記住LCP 低于 2.5 秒是優(yōu)秀的目標整體加載時間控制在 3 秒以內(nèi)才能有效降低跳出率。 前端性能優(yōu)化必知：一文搞懂 LCP（最大內(nèi)容繪制）
你能所學到的知識點前置知識點視口、渲染阻塞資源、瀏覽器級圖片懶加載LCP 是個啥如何測量 LCP優(yōu)化 LCP 的 10 種方式前置知識點在深入了解 LCP 之前我們先快速過幾個前置概念。視口Viewport視口是指瀏覽器中用于顯示網(wǎng)頁內(nèi)容的可見區(qū)域簡單來說就是用戶屏幕上實際能看到的網(wǎng)頁部分。視口大小取決于用戶設備的屏幕尺寸和瀏覽器窗口的大小——手機上視口較小臺式機上則較大。在開發(fā)中我們可以使用 CSS 視口單位來設置元素尺寸vw視口寬度的百分比vh視口高度的百分比vmin視口寬度和高度中較小值的百分比vmax視口寬度和高度中較大值的百分比通過meta標簽可以控制視口行為metanameviewportcontentwidthdevice-width, initial-scale1.0widthdevice-width頁面寬度與設備屏幕寬度一致initial-scale1.0初始縮放級別為 1渲染阻塞資源某些資源如 CSS、JavaScript會阻塞頁面的首次渲染理解它們對優(yōu)化 LCP 至關重要。這部分內(nèi)容在之前的「瀏覽器之資源獲取優(yōu)先級」文章中有詳細介紹。瀏覽器級圖片懶加載圖片是大多數(shù)網(wǎng)站最常請求的資源類型在 90% 分位點上網(wǎng)站在桌面和移動設備上發(fā)送的圖像超過 5MB。以前實現(xiàn)懶加載有兩種方式使用Intersection Observer API使用scroll、resize或orientationchange事件處理程序現(xiàn)在瀏覽器原生支持懶加載不需要外部庫了imgsrcimage.jpgloadinglazyalt描述loading屬性支持的值lazy推遲加載直到元素離視口足夠近eager瀏覽器默認行為立即加載LCP 是啥LCP 是 Largest Contentful Paint 的縮寫中文名稱叫「最大內(nèi)容繪制」。在大多數(shù)網(wǎng)頁上總有一個元素因為其大小和突出性而格外顯眼——比如很多公司官網(wǎng)首頁的輪播圖或主視覺區(qū)域它就是該頁面的LCP 元素。換句話說LCP 衡量的是網(wǎng)站呈現(xiàn)包含「最大數(shù)量內(nèi)容」的元素所需的時間。LCP 得分越低說明網(wǎng)站運行越流暢用戶體驗越好。需要注意的是LCP 得分與頁面「整體加載時間」可能不同。比如一個頁面需要 3 秒才能完全加載但 LCP 可能只有 2 秒——因為現(xiàn)代網(wǎng)站除了文本和媒體文件外還會加載很多腳本資源。通常情況下LCP 與 FCP 是相關的。FCP 測量的是「第一個帶有任何內(nèi)容的元素繪制所需的時間」。另外需要特別注意在測量 LCP 時SVG 文件和 video 等元素也需要納入考量。如何測量 LCP確定網(wǎng)站上的最大內(nèi)容元素其實不難——等頁面完全加載后大致瀏覽一下那個最突出的「顯眼包」元素就是了。通常情況下它會是一張圖片或一個文本塊。真正的技巧在于測量特定元素加載所需的時間而不是頁面本身。使用 PageSpeed Insights最流行的 LCP 測量工具之一是 Google 的PageSpeed Insights它是一個免費工具可以幫助分析和診斷網(wǎng)頁性能。操作步驟將網(wǎng)站 URL 輸入搜索欄點擊「分析」按鈕分析完成后在「真實用戶的體驗」部分查看 LCP 等指標的詳細信息PageSpeed Insights 從多個用戶收集實際性能數(shù)據(jù)比單次測試更精確每個得分都有百分比展示——例如 89% 的頁面加載在 1.5 秒內(nèi)完成檢查「診斷性能問題」部分獲得改進建議實驗數(shù)據(jù)提供總體得分雖不如真實用戶體驗精確但也能反映大致情況還可以查看 LCP、FCP、CLS 等更多指標點擊「展開視圖」可閱讀簡要解釋重要提示即使網(wǎng)站優(yōu)化得很好加載時間也會因用戶而異——有人網(wǎng)速慢有人離服務器遠。這就是為什么擁有一個平均分數(shù)作為參考至關重要。除了 PageSpeed Insights還可以使用Lighthouse和Search Console對網(wǎng)站做一次全面「體檢」。LCP 得分標準得分范圍評價0 - 2.5 秒優(yōu)秀2.5 - 4 秒良好4 - 7.5 秒需改進超過 7.5 秒不佳理想情況下LCP 得分應低于 2.5 秒。整體加載時間應保持在 3 秒以下超過這個時間點跳出率會顯著增加。LCP 測量的是哪些元素LCP 僅測量頁面能夠在視口內(nèi)加載最大元素的速度。觸發(fā) LCP 記錄的元素包括圖像元素包括 SVG 元素內(nèi)的圖像視頻元素使用url()函數(shù)加載背景圖像的元素塊級元素內(nèi)的文本節(jié)點大小計算規(guī)則對于圖像元素報告可見大小和固有大小中較小的那個對于文本元素僅考慮文本節(jié)點的大小不計算任何邊距margin、填充padding或邊框border優(yōu)化 LCP 的 10 種方式LCP 是網(wǎng)站頁面加載速度的重要指標較差的 LCP 得分會導致用戶體驗不佳。造成 LCP 差的常見原因服務器響應時間和資源加載時間過慢客戶端渲染Client-side rendering阻塞渲染的資源Render-blocking resources下面是 10 種干貨滿滿的優(yōu)化方式 1. 利用 CDN內(nèi)容分發(fā)網(wǎng)絡CDN是提升網(wǎng)站流量管理的優(yōu)秀工具。CDN 通過額外服務器分擔負載訪問者的請求不需要在同一服務器中排隊從而改善 LCP 得分。CDN 還可以與圖像 CDN 等軟件結合實時優(yōu)化和轉(zhuǎn)換圖像大小。推薦Cloudflare 提供全球 120 中心節(jié)點有免費計劃且配置簡單。2. 確保正確的圖像尺寸圖像很可能成為 LCP 的最大元素因此確保網(wǎng)頁使用響應式圖像至關重要。關鍵在于根據(jù)用戶設備提供正確的圖像尺寸——桌面版用大圖移動版用中等尺寸。常見的圖像尺寸規(guī)范縮略圖150 像素正方形中等尺寸最大 300 像素正方形大尺寸最大 1024 像素正方形原始尺寸指原始圖像尺寸圖像報告的是其最小元素尺寸——壓縮圖像報告可見尺寸放大圖像報告原始尺寸。3. 優(yōu)化圖像除了尺寸之外壓縮圖像也是改善加載時間的重要手段。推薦工具TinyPNGImagifyKraken付費優(yōu)化圖像不僅能提高 LCP 得分還能節(jié)省存儲空間、改善 SEO 性能。4. 提高服務器響應時間頁面加載時間與 Web 服務器的響應時間密切相關。用戶瀏覽器請求和服務器響應之間的往返時間RTT是影響加載速度的主要因素。改善方法實施服務器端緩存通常在托管配置中可用升級服務器規(guī)格更好的 CPU 和更大的存儲容量優(yōu)化應用程序代碼如數(shù)據(jù)庫查詢優(yōu)化刪除非關鍵 CSS5. 實施緩存緩存是指將頁面的靜態(tài)資源存儲在臨時存儲中通過減少初始呈現(xiàn)過程中的數(shù)據(jù)傳輸量來實現(xiàn)更快的頁面加載。兩種主要緩存方式瀏覽器緩存訪問者將緩存存儲在本地再次訪問時無需重新下載。服務器端緩存將預先制作的網(wǎng)頁版本存儲在原始服務器中用戶再次訪問時無需從數(shù)據(jù)庫重新構建。推薦工具LiteSpeed具有先進的緩存功能、動態(tài)內(nèi)容優(yōu)化和 HTTP 負載均衡器。6. 修復延遲加載問題延遲加載是一種推遲非關鍵資源加載的技術專注于先加載視口上方的內(nèi)容。首屏內(nèi)容如 Logo立即顯示視口外的元素如視頻縮略圖用占位圖替代直到用戶滾動到它們。?? 潛在問題延遲加載有時會惡化 LCP 得分。解決方案對可能成為 LCP 元素的主圖使用loadingeager使其立即渲染在首屏上方的圖像上禁用延遲加載7. 縮小 JS、CSS 和 HTML 文件文件縮小通過減少代碼行數(shù)來減小文件大小。CSS、JavaScript 和 HTML 代碼中常常包含大量不必要的空格積累起來會嚴重影響性能。8. 消除阻塞渲染的 JavaScript 和 CSS第一步識別關鍵資源使用 Chrome DevTools 中的Coverage 選項卡來識別非關鍵的 CSS 和 JS 文件。綠色關鍵首次繪制必需的樣式頁面核心功能的關鍵代碼紅色非關鍵不立即可見內(nèi)容的樣式未使用的代碼減少阻塞渲染的 JS將關鍵代碼從阻塞渲染的 URL 移到 HTML 頁面的內(nèi)聯(lián) script 標簽中非關鍵代碼保留在 URL 中使用async或defer屬性標記減少阻塞渲染的 CSS類似于 JS 的處理方式將關鍵 CSS 內(nèi)聯(lián)到 HTML 中總結LCP 是衡量用戶體驗的核心性能指標之一直接關系到用戶對網(wǎng)站的第一印象。通過本文介紹的 10 種優(yōu)化方式——從 CDN 加速、圖像優(yōu)化、服務器響應提速到緩存策略、延遲加載修復和代碼精簡——我們可以系統(tǒng)地改善 LCP 得分讓網(wǎng)站跑得更快、用戶體驗更絲滑。記住LCP 低于 2.5 秒是優(yōu)秀的目標整體加載時間控制在 3 秒以內(nèi)才能有效降低跳出率。