如何降低我在 PageSpeed Insights 上的 LCP 分數？

Question

語境：

我最近為一位客戶（我 18 歲）完成了我的第一個項目，最近我一直在努力改進網絡重要因素以提高他們的 SEO。

我遇到的最大問題是我的最大內容繪制太高，這意味着我的所有 URL 在 Search Console 上都被標記為“差”。 我現在已經在這上面花費了幾個小時並閱讀了無數文章，其中 90% 的術語都在我的腦海中。

迄今為止的研究/嘗試：

我壓縮了主頁上的所有圖像，縮短、調整大小和壓縮視頻，我將幾乎所有文件移動到由 CDN 鏈接的縮小版本，我推遲了大部分 CSS，我為所有添加了延遲加載圖像，我確保文本對我的字體保持可見，我優化了我的網絡托管，縮小了我的大部分 CSS/JS...

但我所做的一切似乎都沒有真正提高 LCP 分數。 即使刪除視頻（最大的元素）也幾乎沒有觸及我的分數......

這是指向 Pagespeed Insights 頁面的鏈接：

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fprincestheatre.co.uk%2F&tab=mobile

網站是princestheatre.co.uk 。

我（很可能）只是真的很愚蠢並遺漏了一些明顯的東西，還是我真的需要在這里爭取每一毫秒？

我真的很感激任何幫助，謝謝:)

Answer 1

改進 LCP 很難，所以你並不愚蠢，而且並不總是很明顯。 您是正確的，大多數關於該主題的博客文章只是重新格式化了您在 PageSpeed Insights 上獲得的內容。 我構建了一個基於 PageSpeed Insights 的應用程序，但希望能更清楚地說明要做什么。 我鼓勵您嘗試一下，如果您有具體問題，請通過網站上的聊天應用程序與我聯系。 如果您對如何改進應用程序有任何反饋，我很想知道。

https://waterfaller.dev/?url=https://princestheatre.co.uk

您可以查看桌面和移動結果。 我會查看導致網站速度減慢的主要文件。

但是為了讓您開始，這些報告中不會顯示。

您的 LCP 失敗的原因是您在標簽中既有阻止渲染的樣式表，也有樣式塊。 因此，一開始我會將所有樣式標記放入 或將它們全部放入一個樣式表文件中。 然后你可以處理“關鍵 CSS”，這可能很困難。

或者，如果您想避免使用“關鍵 CSS”，那么我將執行以下操作，

1. 將所有樣式放入 1-3 個樣式表文件中（例如，您是否需要引導圖標和字體都很棒？）
2. 預加載這些樣式表

https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload

這些樣式表“阻止”瀏覽器開始呈現頁面。 所以目標是盡可能快地加載所有需要的 CSS。 您知道如果第一次內容繪制或開始渲染時間下降，這將起作用。

如果它們下降，那么您的 LCP 就會下降。

然后我會弄清楚如何預加載你的字體。 由於您是自托管字體，因此這很容易。 為了方便起見，我將預加載 woff2 字體。

從這里開始解釋為什么瀏覽器不能更快地呈現頁面。 然后重新測試看看。 提示：您需要弄清楚如何延遲加載視頻和圖像。 但我不會從那里開始。

Answer 2

最大內容繪制 (LCP) 指標報告視口內可見的最大圖像或文本塊的渲染時間，相對於頁面首次開始加載的時間。

LCP 沒問題，在桌面的 PSI 中為綠色，要解決移動設備嘗試僅渲染基於文本的內容（沒有滑塊或任何需要 JS 的任何花哨的東西，只需要文本）為您的網站的頂部，您將看到 LCP 中的改進結果為手機。

Answer 3

由於這是您的第一個項目，我建議了解 LCP 是什么，不是什么。 理解它是資本。

Google 的定義：Largest Contentful Paint (LCP) 指標報告相對於頁面首次開始加載時在視口內可見的最大圖像或文本塊的渲染時間。

換句話說，您可以選擇設計自己的方式來選擇內容最多的油漆，從而極大地影響分數。

一個很好的技巧是通過運行燈塔並查看 LCP 來查看頁面上的 LCP 目標是什么。 這就是它在 Lighthouse 中的樣子。

在您知道 LCP 是什么之后，您可以選擇稍微修改設計以選擇默認情況下速度很快的 LCP（文本、小圖像）。 LCP 的危險之一是當您開始在視口的最末端顯示圖片/大文本塊時，它就變成了 LCP。 在這種情況下，引入一個空間將其拉出視口是非常好的（示例）。