如何改進 WordPress 中的 First Contentful Paint (FCP)

First Contentful Paint 簡介

First Contentful Paint 是一個有用的指標，可以監控您的頁面加載速度。 有多種類似的指標可以衡量網站的性能。 FCP 特別關注第一條內容出現在頁面上所花費的時間。 一旦生成了 FCP，用戶就知道剩下的就在路上了。

它類似於 Google 的 Core Web Vitals 中的 Largest Contentful Paint (LCP) 指標。 但是，雖然 LCP 衡量的是網站“主要”內容加載所需的時間，但 FCP 只關注第一部分內容，它可能是也可能不是主要內容。

影響您的 FCP 分數的因素有很多。 JavaScript 文件和優化不佳的 HTML 是性能低下的常見原因，因為處理它們需要大量資源。 此外，渲染阻止腳本會影響您的 FCP 分數，因為它們需要在執行任何其他操作之前進行處理。

您的 FCP 分數很重要，因為它是您整體網站速度的指標。 性能不僅對您的用戶體驗至關重要，而且它也是 Google 等搜索引擎在決定如何對您的網頁進行排名時考慮的一個因素。 性能不佳會導致搜索排名較低。 這意味著如果您不知道如何改進 First Contentful Paint，它可能會影響您網站的知名度。

如何測量 First Contentful Paint

雖然 FCP 為您提供了一個了解用戶感知的窗口，但它仍然是一個可以通過實驗室測試和現場數據客觀衡量的指標。 例如，PageSpeed Insights 是一種工具，可讓您了解真實用戶的體驗（只要您的網站有足夠的流量可以包含在 Chrome 用戶體驗報告中）。

即使您的網站沒有足夠的數據來查看真實的用戶體驗，PageSpeed Insights 仍然可以幫助您在其模擬實驗室測試中收集 FCP 數據。

要使用它，只需輸入您的 URL 並立即獲得結果：

您還可以在移動和桌面視圖之間切換，以查看您的網站在各種設備上的響應情況。

另一個測量 FCP 的有用工具是 WebPageTest，它需要更長的時間，但可以提供更深入的分析。

什麼是好的 FCP 時間？

根據 Chrome，如果您的網站低於 1.8 秒，則其 FCP 分數很高。 當您的 FCP 分數超過三秒時，就會引起關注。

然而，即使您的網站目前的 FCP 分數很高，也總有改進的餘地。

如何改進 WordPress 中的 First Contentful Paint（6 種技巧）

現在您對 FCP 有了更多的了解，讓我們來看看如何通過六種有效的方法改進您網站上的 First Contentful Paint：

1. 使用內容分發網絡 (CDN)
2. 優化和壓縮圖像
3. 消除渲染阻塞資源
4. 減少你的 DOM 大小
5. 改善服務器響應時間
6. 避免過多的頁面重定向

1.使用內容分發網絡（CDN）

內容分發網絡 (CDN) 是提高整體加載時間的簡單方法。 如果沒有，當用戶訪問您的網站時，他們將需要等待必要的數據在您網站的主服務器和他們的位置之間傳輸。 對於地理位置遠離託管服務提供商服務器的用戶，這可能會導致更長的等待時間。

另一方面，CDN 提供分佈在全球各地的服務器網絡。 因此，內容可以從距離每個訪問者物理距離最近的服務器傳送。

CDN 的一個流行示例是 Cloudflare，它在全球擁有超過 275 個數據中心：

借助 Cloudflare，您可以利用其他優化技術，例如無損圖像優化。

通常，CDN 還使用緩存和其他策略來改進 FCP。 例如，您的 CDN 提供商可能會提供縮小和文件壓縮功能來簡化您的網站。 這有助於您減少延遲、改善用戶體驗並減輕主服務器上的負載。

2.優化壓縮圖片

圖片很少是您網站上加載的第一個元素。 但是，如果您經營一個媒體密集型網站，例如作品集或攝影展示，優化和壓縮圖像以提高您的 FCP 分數（和整體性能）就很重要。

優化圖像的一種方法是切換到不同的文件格式。 例如，如果您目前依賴 JPG/JPEG 或 PNG，則可以轉向壓縮效果更好的格式，例如 SVG 或 WebP。

您還應該將圖像調整為適合您需要的最小尺寸，並壓縮它們以進一步減小尺寸。

雖然您可以使用在線工具手動完成所有這些操作，但對於 WordPress 用戶來說，更簡單的方法是使用圖像優化插件。

例如，免費的 Optimole 插件可以自動調整大小、壓縮和轉換您的圖像。 此外，它還可以通過其內置的 CDN 為他們提供服務，一箭雙雕。

此工具還可以讓您快速提供高質量的圖像，無論訪問者使用什麼設備訪問您的網站。 您可以使用延遲加載和調整圖像大小等功能來進一步完善您的圖像。

3.消除渲染阻塞資源

渲染阻塞資源會阻止您的內容快速加載，因為瀏覽器需要首先處理它們——即使它們對於加載您網站的初始內容並不重要。 因此，它們會降低您的 FCP 分數。 這可以包括 HTML 代碼、CSS 樣式表和 JavaScript 文件。

如果您想知道如何改進 First Contentful Paint，有幾種方法可以消除渲染阻塞資源。 如果您對開發感到滿意並且發現頁面上未使用的代碼，您可以繼續刪除它。 您還可以使用 <script> 和 <style> 標記識別您的關鍵資源並將它們“嵌入”到您的頁面中。

此外，可以延遲 JavaScript，因此您的內容在等待瀏覽器處理這些文件時不會延遲。 另外，您可以生成關鍵 CSS 以在“首屏”（用戶立即看到的部分）顯示內容。 如果您不是開發人員，像 Jetpack 這樣的工具可以幫助您進行其中的一些更改。

4. 減少你的 DOM 大小

加載網頁時，您的瀏覽器會創建一個文檔對像模型 (DOM)。 這是構成頁面的所有對象的表示。

如果頁面上的 DOM 節點（HTML 標記）過多，或者它們嵌套得太深，瀏覽器處理頁面的時間就會變長。 這可能會導致加載速度變慢和 FCP 分數不佳。

因此，您可以通過減小 DOM 大小來改進 FCP。 您可以手動執行此操作，方法是刪除不必要的 <div> 標記、將長頁面拆分為較小的頁面以及限制存檔或主頁上的帖子數量。

最重要的是，您可以使用像 Optimole 這樣的優化插件延遲加載 HTML 元素。 延遲加載是一種延遲加載內容直到需要的技術。 瀏覽器可以專注於交付那些立即可見的元素，而不是一次處理所有內容。

選擇一個優化的主題還可以幫助減少您的 DOM 大小，因為許多主題（和頁面構建器）使用了太多的 <div> 標籤。 如果您正在尋找新主題，我們建議您查看 Neve，它速度快、輕量級且僅使用高質量代碼。

5. 提高服務器響應時間

服務器響應時間也稱為首字節時間 (TTFB)。 該指標測量從用戶發出請求到服務器發送第一個信息字節之間所花費的時間。

有很多方法可以改善您的服務器響應時間（以及您的 FCP 分數）。

首先，選擇優質的託管服務提供商很重要。 最好尋找專門針對 WordPress 網站的主機，並註意其服務器的位置。 理想情況下，您的主機應該擁有靠近您的主要受眾的服務器。

如果您想提高主機的性能，您可以從我們以數據為後盾的速度最快的 WordPress 主機集合中選擇一個提供商。

但是，如果您的託管服務提供商不提供方便的服務器，您始終可以選擇 CDN，我們之前在討論如何改進 First Contentful Paint 時談到了這一點。

緩存是減少響應時間的好方法。 一些主機提供內置緩存。 或者，您可以安裝緩存插件，例如 WP Rocket 或 WP Fastest Cache。

6.避免過多的頁面重定向

當您訪問一個立即將您重定向到另一個站點的頁面時，您的瀏覽器必須向新位置發出另一個 HTTP 請求。 這可能會導致 FCP 分數不佳，因為它會延遲網頁的加載。

您頁面上的重定向越多，您的 FCP 分數可能就越差。 另外，過多的頁面重定向會嚴重破壞您的用戶體驗。

如果問題發生在整個站點，您可能需要研究如何管理從 www 到非 www（或相反）和/或從 HTTP 到 HTTPS 的重定向。

例如，如果您從http://www.yoursite.com重定向到http://yoursite.com然後再重定向到https://yoursite.com ，一步完成會更有效。

如果重定向僅影響單個頁面上的 FCP，您可能需要查看為該頁面創建的所有重定向。

您可以手動管理重定向，儘管這可能很耗時。 通常最好選擇像重定向這樣的 WordPress 插件：

安裝後，您可以使用此工具輕鬆快速地管理重定向。

今天改善您網站的 FCP 時間

在復雜或內容繁多的網站上，可能很難保持快速加載時間。 幸運的是，通過定位關鍵指標，例如 First Contentful Paint (FCP)，您可以評估和改進訪問者查看您的內容所花費的時間。

回顧一下，以下是改進 WordPress 中的 First Contentful Paint 的方法：

有關加速網站的其他一些方法，請查看我們收集的加速 WordPress 的不同方法。

您對在 WordPress 中改進 FCP 有任何疑問嗎？ 在下面的評論部分讓我們知道！