如何優化最大的內容繪畫並在谷歌中排名更高

如何衡量您網站的最大內容繪畫

運行免費的網站速度測試以找出答案。 您的 LCP 速度將立即顯示。

速度測試的結果會告訴您是否：

• 達到 LCP 閾值。
• 您需要優化任何其他 Core Web Vital。

如何計算最大的內容繪畫？

谷歌查看體驗的第 75 個百分位數——這意味著 25% 的真實網站訪問者體驗到 3.09 秒或更高的 LCP 加載時間，而 75% 的用戶的 LCP 低於 3.09 秒。

在此示例中，真實用戶 LCP 顯示為 3.09 秒。

我的核心網絡生命數據的實驗室測試結果是什麼？

通過此特定的網絡速度測試，您還將看到在受控測試環境中收集的實驗室指標。 雖然這些指標不會直接影響 Google 排名，但這些數據有兩個優點：

1. 一旦您改進網站，指標就會更新，而 Google 的實時數據需要 28 天才能完全更新。
2. 除了指標之外，您還可以獲得詳細的報告，這可以幫助您優化網站。

此外，PageSpeed Insights 還提供實驗室數據，但請記住，它報告的數據有時可能會產生誤導，因為它使用模擬節流來模擬較慢的網絡連接。

您如何找到最大的內容繪畫元素？

當您使用 DebugBear 運行頁面速度測試時，LCP 元素會在測試結果中突出顯示。

有時，LCP 元素可能是一個大圖像，而其他時候，它可能是一大部分文本。

無論您的 LCP 元素是圖像還是一段文本，在您的頁面開始呈現之前，LCP 內容都不會出現。

例如，在下面的頁面上，背景圖像負責最大的繪製。

相反，此頁面的 LCP 是一段文本。

要改進您網站的 Largest Contentful Paint (LCP)，您需要確保負責 LCP 的 HTML 元素快速出現。

如何改進最大的內容繪畫

要改進 LCP，您需要：

1. 找出使 LCP 元素出現所需的資源。
2. 查看如何更快地加載這些資源（或根本不加載）。

例如，如果 LCP 元素是照片，您可以減小圖像的文件大小。

運行 DebugBear 速度測試後，您可以單擊每個性能指標以查看有關如何優化它的更多信息。

影響 LCP 的常見資源有：

• 渲染阻塞資源。
• 未優化的圖像。
• 過時的圖像格式。
• 未優化的字體。

如何減少渲染阻塞資源

渲染阻塞資源是在瀏覽器開始在屏幕上繪製頁面內容之前需要下載的文件。 CSS 樣式表通常是渲染阻塞的，許多腳本標籤也是如此。

要減少渲染阻塞資源對性能的影響，您可以：

1. 確定哪些資源是渲染阻塞的。
2. 查看資源是否必要。
3. 查看資源是否需要阻止呈現。
4. 查看資源是否可以更快地加載起來，例如使用壓縮。

簡單方法：在 DebugBear 請求瀑布中，對渲染阻塞資源的請求標有“阻塞”標籤。

如何確定和加快 LCP 圖像請求的優先級

在本節中，我們將利用圖像上新的“fetchpriority”屬性來幫助訪問者的瀏覽器快速識別應首先加載的圖像。

在 LCP 元素上使用此屬性。

為什麼？

僅查看 HTML 時，瀏覽器通常無法立即分辨出哪些圖像是重要的。 一張圖片可能最終成為大背景圖片，而另一張圖片可能只是網站頁腳的一小部分。

因此，所有圖像最初都被認為是低優先級，直到頁面被渲染並且瀏覽器知道圖像出現在哪裡。

但是，這可能意味著瀏覽器很晚才開始下載 LCP 圖像。

新的 Priority Hints 網絡標准允許網站所有者提供更多信息，以幫助瀏覽器確定圖像和其他資源的優先級。

在下面的示例中，我們可以看到瀏覽器花費了大量時間等待，如灰色條所示。

我們會選擇這個 LCP 圖像來添加“fetchpriority”屬性。

如何為圖像添加“FetchPriority”屬性

只需將 fetchpriority=”high” 屬性添加到 HTML img 標籤，瀏覽器就會優先考慮盡快下載該圖像。

<img src="photo.jpg" fetchpriority="high" />

如何適當地使用現代圖像格式和大小圖像

高分辨率圖像的文件通常很大，這意味著它們需要很長時間才能下載。

在下面的速度測試結果中，您可以通過查看深藍色陰影區域看到這一點。 每行表示到達瀏覽器的圖像塊。

有兩種減小圖像尺寸的方法：

1. 確保圖像分辨率盡可能低。 考慮根據用戶設備的大小以不同的分辨率提供圖像。
2. 使用像 WebP 這樣的現代圖像格式，它可以以較小的文件大小存儲相同質量的圖像。

如何優化字體加載時間

如果 LCP 元素是一個 HTML 標題或段落，那麼為這塊文本快速加載字體很重要。

實現此目的的一種方法是使用可以告訴瀏覽器提前加載字體的預加載標籤。

font-display: swap CSS 規則還可以確保加速渲染，因為瀏覽器會立即使用默認字體渲染文本，然後再切換到網絡字體。

監控您的網站以保持 LCP 快速

持續監控您的網站不僅可以讓您驗證您的 LCP 優化是否有效，還可以確保您在 LCP 變得更糟時收到警報。

DebugBear 可以隨時間監控 Core Web Vitals 和其他站點速度指標。 除了運行基於實驗室的深入測試外，該產品還跟踪來自 Google 的真實用戶指標。

通過 14 天免費試用試用 DebugBear。