- 最大內容繪製 (LCP) 衡量最大的折疊上方元素加載到頁面上所需的時間。
- 減少您網站的 LCP 有助於用戶更快地查看您網站上的基本內容。
- PageSpeed Insights 中的“診斷”部分會顯示哪個元素觸發 LCP 指標。
DevTools 中的“性能”面板也可以做同樣的工作。
要改善頁面的 LCP 時間，您必須優化該元素的加載時間。下面有五種有效的方法來可以來改善您的 LCP 指數 ，修正之後當然也有助於改善FCP、CLS 和 TTI這些分數。
如何改善您的 LCP 時間
3. 更快的服務器響應時間；
4. 有限和優化的客戶端渲染；
5. 預加載和預連接。
1. 圖像優化
圖像優化是一組技術，可以改善所有負載指標並減少佈局偏移 (CLS)。圖片壓縮更是重要的一環。壓縮意味著應用不同的算法來刪除或分組圖像的各個部分，使其在此過程中變得更小。而有兩種類型的壓縮 - 有損和無損。
- 有損壓縮會從文件中刪除部分數據，從而導致質量較低的輕量級圖像。JPEG 和 GIF 是有損圖像類型的示例。
- 無損壓縮保持大致相同的圖像質量，即它不會刪除任何數據。它產生沉重、高質量的圖像。RAW 和 PNG 是無損圖像類型。
現在已經有很多很棒的工具可以完成這項工作，像是 imagemin 或是 Optimizilla。Tenten 也提供可調整的圖像質量作為我們圖像優化堆棧的一部分。
另外，隨著您網站的發展，可能會添加越來越多的圖片。您將需要一個能夠自動將圖像優化到所需級別的工具。
選擇正確的格式
關於圖像格式之間進行選擇棘手的事情是尋找質量和速度之間的平衡。高質量的圖像很重但看起來很棒。低分辨率的看起來很糟但加載速度更快。
在某些情況下，需要高像素圖像才能在競爭中脫穎而出，像是攝影和時尚網站。對於新聞網站和個人部落格等，低像素則完全沒問題。這是可以用作指南的快速規則。
- 將 SVG 用於由簡單幾何形狀（如徽標）組成的圖像；
- 犧牲速度同時保持質量時，請使用 PNG；
- 在質量和 UX 之間取得最佳平衡，使用 WebP，同時保留原始格式作為備。因為 WebP 沒有 100% 的瀏覽器支持。也是我們 Tenten.co 使用的策略。
不要忘記在選擇圖像類型後嘗試壓縮圖片。
使用 srcset 屬性
處理圖像時的一個典型錯誤是為所有設備的尺寸提供同一張很大的圖像。大圖像在較小的設備上看起來不錯，但瀏覽速度非常慢。
更好的方法是提供不同的圖像大小，讓瀏覽器根據設備決定使用哪一個。為此，請使用 srcset 屬性並指定要提供的圖像的不同寬度。下面是一個例子：
如您所見，對於 srcset，我們使用 w 而不是 px。如果您希望圖像版本為 600px 寬，則必須編寫 600w。同樣，這種方法將圖像大小的選擇外包給瀏覽器。您只需提供選項。
Airbnb 的網站採用了這種方法：
在決定正確的圖片尺寸時，請使用 Google Analytics（分析）來計算通過桌面或移動設備訪問您網站的受眾群體的百分比。“設備”報告還包含有關訪問者使用的特定設備的深入信息。
您還應該使用 DevTools 檢查圖像在不同視口上的外觀。
當需要更改圖像大小時，請使用 Smart Resize 批量調整大小。
WordPress 用戶注意事項：從 4.4 版開始，WP 會自動創建不同版本的圖像。它還添加了srcset屬性。如果您是 WordPress 用戶，您只需要 提供正確的圖像尺寸。
預加載 hero 圖片
最後一個技巧是關於優化瀏覽器發現 hero 圖像的速度。hero 圖像通常是折疊元素上方最有意義的，因此更快地加載它們對於用戶體驗至關重要。
福布斯網站預載了首頁最大的首屏圖片：
這種技術告訴瀏覽器在呈現頁面時優先考慮該特定圖像。預加載可以顯著改善 LCP，尤其是在加載了以下內容的英雄圖像的頁面上：
- JavaScript;
- CSS 中的 background-image 屬性。
由於瀏覽器發現這些圖像較晚，因此使用 link rel=preload可以提高實際和感知性能。如果您使用 JS 或 CSS 加載英雄圖像，請查看Addy Osmani 的有關預加載圖像的教程。
2. CSS 和 JavaScript 優化
在瀏覽器呈現頁面之前，它必須加載、解析和執行在解析 HTML 時找到的所有 CSS 和 JavaScript 文件。這就是默認情況下 CSS 和 JavaScript 都阻止渲染的原因。如果不加以優化，它們會減慢頁面加載速度，從而損害您的 LCP。以下是優化它們的方法:
- 縮小和壓縮代碼文件
縮小從代碼文件中刪除不必要的部分，如註釋、空格和換行符。它可以減少中小型文件大小。另一方面，壓縮通過應用不同的算法來減少文件中的數據量。它通常會大大減少文件大小。
在性能方面，這兩種技術都是必須的。一些託管公司和CDN 提供商默認應用這些技術。值得檢查一下它們是否已在您的網站上實施。
您可以使用 DevTools 中的“網絡”選項卡並分析文件的響應標頭以查看是否是這種情況：
大多數縮小文件的名稱中都有 “.min”。壓縮文件有一個內容編碼響應頭，通常帶有 gzip 或 br 值。
如果您網站的文件沒有被縮小或壓縮，我建議您立即開始。詢問您的託管公司和 CDN 提供商是否可以為您執行此操作。如果不能，有很多縮小和壓縮工具。
實施關鍵 CSS
實施關鍵 CSS 是一個三步過程，包括：
- 在不同視口上查找折疊內容上方的樣式的 CSS；
2. 將該 CSS 直接放置（內聯）到頁面的head標籤中；
3. 推遲 CSS 的其餘部分。
您可以首先使用 DevTools 中的“Coverage”面板來計算頁面上每個 CSS 文件的使用量。
您可以按類型排列資源並瀏覽每個 CSS 和 JS 文件。
顯然，頁面上未使用的 CSS 並不重要。在這一點上，值得嘗試刪除或減少這個未使用的 CSS，因為它會減慢渲染速度。這就是我們為 Tenten構建減少未使用的 CSS 功能的原因。
接下來，要提取關鍵 CSS，您需要手動檢查代碼或使用工具。這項工作的兩個很好的選擇是criticalCSS和critical。
提取後，將關鍵 CSS 內聯到頁面的 head 標記中。
最後，異步加載其餘的 CSS。Google 建議使用 link rel="preload" , as="style"，一個空的onload處理程序，並將樣式表的鏈接嵌套在noscript元素中。
另外，不要忘記考慮不同的視口。桌面和移動用戶在折疊內容上方看不到相同的內容。要充分利用此技術，您需要根據設備類型使用不同的關鍵 CSS。
同樣，Tenten會為您網站上的每個頁面執行所有這些操作。
提供更小的 JavaScript 負載
JavaScript 是整個網絡加載時間緩慢的主要原因之一。像圖像一樣，如果您想要出色的性能，就必須優化網站的 JavaScript。
對於 LCP，拆分 JavaScript 包是提高分數的好方法。這個想法是只發送初始路由所需的代碼。未包含在初始捆綁包中的所有內容都應稍後提供。這樣一來，需要一次解析和編譯的 JavaScript 就更少了。該工作有些流行工具的WebPack，匯總和browserify。有關代碼拆分的更多信息，請查看web.dev 的這篇文章。
3. 更快的服務器響應時間
減少伺服器響應時間是 PageSpeed Insights 中最常見的建議之一。
以下是您可以採取的一些步驟來解決此問題：
升級您的託管計劃。如果您使用的是便宜的共享託管計劃，則需要升級。不可能有一個快速的網站和一個緩慢的主機服務器；
優化您的服務器。許多因素都會影響服務器的性能，尤其是在流量激增時。使用Katie Hempenius 的本教程來評估、穩定、改進和監控您的服務器；
減少站點對第 3 方插件、工具和庫的依賴。它們增加了必須在服務器或瀏覽器上執行的代碼量。這會增加資源消耗並損害諸如 Time to First Byte、First Contentful Paint 和 LCP 等指標；
最大限度地利用緩存。緩存是出色 Web 性能的支柱。許多資產可以緩存數月甚至一年（徽標、導航圖標、媒體文件）。另外，如果你的HTML 是靜態的，你可以緩存它，這可以顯著減少 TTFB；
使用 CDN。CDN 縮短了訪問者與他們想要訪問的內容之間的距離。為了讓您的工作盡可能簡單，請使用內置 CDN 的緩存工具；
使用服務工作者。Service Worker 通過避免常見元素的重複來減少 HTML 負載的大小。安裝後，服務工作者從服務器請求最少的數據並將其轉換為完整的 HTML 文檔。查看Philip Walton 的本教程以了解更多詳細信息。
4. 有限和優化的客戶端渲染
客戶端呈現 (CSR) 是指使用 JavaScript 直接在瀏覽器中呈現頁面。這種方法將任務（數據獲取、路由等）從服務器卸載到客戶端。起初，CSR 可能是一個完美的解決方案，但是隨著您添加更多的 JavaScript，它變得越來越難以維護。
如果您已經實現了 CSR，則在優化 JavaScript 時需要特別小心。代碼拆分、壓縮和縮小是必須的。此外，使用 HTTP/2 服務器推送 和鏈接 rel=preload可以幫助更快地交付關鍵資源。
最後，您可以嘗試將 CSR 與預渲染相結合，或者在混合中添加服務器端渲染。您在此處採用的方法取決於您網站的技術堆棧。重要的是要了解您在客戶端上投入了多少工作以及這如何影響性能。
5. 使用 rel=preload , rel=preconnect和rel=dns-prefetch
這三個屬性通過將瀏覽器指向需要首先處理的資源和連接來幫助瀏覽器。
首先，對瀏覽器應優先考慮的資源使用rel=preload。通常，這些位於首屏圖像、視頻、關鍵 CSS 或字體之上。就像在head標籤中添加幾行一樣簡單，如下所示：
預加載字體時，像as=”font”、type=”font/woff2”和crossorigin 可以幫助瀏覽器在渲染過程中對資源進行優先級排序。作為獎勵，預加載字體還有助於它們滿足 FCP，從而減少佈局偏移。
Forbes.com使用這種技術來減少他們的字體加載時間：
接下來，rel=preconnect告訴瀏覽器您打算立即建立與域的連接。這減少了到重要域的往返。同樣，實現這一點非常簡單：
但是在預連接時要非常小心。僅僅因為您可以預連接到域並不意味著您應該。只為你需要連接到域這樣做的時候了。將它用於不需要的主機會阻止所有其他 DNS 請求，導致弊大於利。
最後，為了節省 DNS 查找不那麼重要的連接的時間，請使用rel=dns-prefetch。
預取也可以用作預連接的後備。
所有這些技術對於提高網站的性能指標都非常有用。如果你還沒有實現它們。在選擇要預加載的資源和要預連接的主機時要小心。
減少 WordPress 網站上的 LCP
上面列出的技術有助於改進所有站點上的 LCP，包括那些建立在 WordPress (WP) 上的站點。但是，另外兩個提示也可以幫助優化 WP 站點上的此指標：
選擇一個輕量級的主題。太繁瑣的主題會顯著增加加載時間並損害您的 Core Web Vitals，包括 LCP。這就是為什麼你應該仔細選擇你的主題。有關更多詳細信息，請查看Kinsta 的這項研究；
不要使用太多插件。雖然插件提供了有用的功能，但它們中的大多數也有性能成本。它們增加了必須執行的代碼量，導致更高的資源消耗。仔細研究每個插件並在添加後監控您網站的性能。
使用 WP 網站時，這兩個技巧都是必須的。將它們與上面列出的技術結合起來，您應該會看到 LCP 的重大改進。
用於監控核心 Web Vitals 的其他工具和最佳實踐
即使您沒有任何 LCP 問題，定期查看現場數據以檢測潛在問題也是一個好主意。
現場數據由 Chrome 用戶體驗報告 (CrUX) 收集。這些數據顯示了真實用戶如何體驗您的網站。您可以在 PageSpeed Insights 中直接在總分下方找到字段數據：
由於 Google 會評估一個頁面過去 28 天的 Core Web Vitals，因此您應該至少每月測試一次重要頁面。
如果 PageSpeed Insights 由於缺少數據而未顯示此部分，您可以使用不同的工具訪問 CrUX 數據集：
- Chrome UX Report API - 需要一些 JavaScript 和 JSON 經驗；
- BigQuery - 需要 Google Cloud 項目和 SQL 技能；
- Google Search Console 中的 Core Web Vitals 報告- 非常適合初學者，對營銷人員、SEO 和網站管理員很有用。
您選擇哪種工具取決於您的偏好。重要的是要注意您網站的 LCP 以及其他 Core Web Vitals 的任何潛在問題。
同樣，請確保至少每月檢查一次 Core Web Vitals 報告。有時問題會在意想不到的地方突然出現，並且很長一段時間都沒有被發現。
了解和塑造下一個常態下的消費者行為
消費者的信念和行為正在快速變化。為了跟上 — 甚至影響/ 適應這些變化，公司必須利用深入的消費者洞察力，更新自己過去公司經營，銷售，或是行銷的方法，利用更新，更快的工具去搭配你的客戶洞察，並快速反應。這才是疫情過後的新常態 (new normalization) 後公司成長的不二法門。
