在 WordPress 中改進 FCP 的 8 種可行方法

本文將介紹幾種簡單的方法，您可以在 WordPress 中改進 FCP 或 First Contentful Paint。 通過改進此性能指標，您的 WordPress 網站將擁有更好的用戶體驗，在 Google 上的排名更高，並且加載速度明顯更快。 首先，讓我們快速了解一下 FCP 是什麼，然後討論幾種在 WordPress 網站上改進該指標的簡單方法。

什麼是 FCP？

FCP，也稱為 First Contentful Paint，是通過 Chrome 用戶體驗報告從真實用戶那裡收集的統計數據。 這是真實世界用戶體驗的更現實的衡量標準之一。 它旨在衡量個人訪問者和用戶如何看待網站的性能。 這也是谷歌將開始在其網站愉悅活動中使用的眾多速度統計數據之一，旨在為消費者在所有網站上提供更好的用戶體驗。

First Contentful Paint 是為最終用戶呈現視覺內容的第一個實例。 在此示例中，FCP 出現在第二幀中，它是為用戶呈現的第一個內容元素。 擁有更快的 FCP 可確保用戶在所有內容加載之前都留在您的網站上，因為此內容加載的感知時間要快得多。

正如我們在詳盡說明 FCP 和 LCP 是什麼的文章中所述，您應該了解這會根據網站和特定頁面而變化。 因此，您的 FCP 可以是一頁上的一件事，另一頁上的另一件事。 這給優化過程增加了一點複雜性，但是只要您了解 FCP 是什麼並按照本文中討論的方法進行操作，就可以開始了。

請記住，Google 將於 2021 年 3 月開始將這些指標用作重要的排名指標，因此在此之前弄清楚您的 First Contentful Paint 符合您的最大利益。

測試和理解第一個內容油漆

了解和測試您的 First Contentful Paint 指標非常容易。 您只需要使用 Google pagespeed 工具即可。 只需輸入您的 URL，第一個指標就會在幾秒鐘內告訴您網站加載的速度。

關於 FCP 在 1 秒內加載的網站被歸類為快速，在 3 秒內 FCP 加載的網站被稱為中等，而具有 3 秒或更長時間的 First Contentful Paint 的網站被稱為慢。 正如你所看到的，這裡沒有太多的迴旋餘地，你肯定需要一個速度快於 3 秒的 FCP 才能在 Google 上獲得良好的排名。

好消息是，在 WordPress 上改進您的 First Contentful Paint 有幾種可行的方法，可以立即和持久地進行改進。 這些解決方案中的大多數都涉及為您自動執行優化過程的插件，從而使 WordPress 上的 FCP 優化變得更加容易。

因此，在介紹完 FCP 之後，讓我們了解如何改進這個指標。 即使您擁有良好的 FCP，即使提高幾毫秒也可以提高您的用戶體驗，並直接導致 WordPress 網站上的轉化次數增加和跳出率降低。

專注於第一個字節的時間

要減少 FCP 時間並提高此分數，您可以做的第一件也是最可行的事情是專注於您的 Time To First Byte。 許多網站的 TTFB 非常慢，或者說瀏覽器接收第一口網頁內容所花費的時間。 TTFB 是獲取 HTTP 請求、處理該請求以及 HTTP 請求本身的響應時間所花費的時間的總和。

通俗地說，如果您的網站連接到服務器的時間比平均時間長，那麼最終用戶的內容渲染和下載速度就會變慢，從而導致 FCP 變慢。

FCP 是第一個出現的指標，因此它幾乎與 TTFB 直接相關。 您可以在 WordPress 網站上提高首字節時間的兩種主要方法，直接增加您的 First Contentful Paint 分數是選擇快速的 WordPress 主機和使用高質量的 CDN。

如果您有一個快速的 WordPress 主機，數據發送到訪問者瀏覽器的速度比正常速度快得多，從而增加了 TTFB。 如果您的用戶從相對於服務器位置而言地理位置較遠的位置加載網站，則使用具有物理上更靠近最終用戶的單個節點的 CDN 將嚴重增加您的 TFB 並導致更好的 First Contentful Paint 分數。

在推薦好的 WordPress 主機和 CDN 時，我們總是說這應該是一個集成的解決方案。 您不應該尋找單獨的 CDN 和單獨的 WordPress 主機，而應該尋找在其服務中包含 CDN 的非常快速的 WordPress 主機。 這不僅可以為您節省資金，而且它的複雜性會大大降低，並且由於集成可能更快。

所以，你可以做的第一件事來改善你的 FCP 是看一個好的主機。 具有集成 CDN（Cloudflare 企業，包括自動平台優化）的最佳主機是 Rocket.net。

這是我們用來每月為近 100,000 名訪問者提供博客服務的 WordPress 主機，由於它與高級 CDN 和閃電般快速的硬件以及整頁緩存的集成，TTFB 非常低，這意味著我們的 FCP 不受限制。

消除渲染阻塞資源

您可以做的下一個可操作的事情是盡量減少 FCP 時間，即消除渲染阻塞資源。 渲染阻塞資源是網站的元素，通常是 CSS 和 JavaScript，它們在網頁的渲染過程中被調用。

因為這些阻塞渲染過程，瀏覽器需要等待真正向訪問者顯示 DOM 元素，下載渲染阻塞資源，解析它，然後繼續渲染整個頁面。

如果您假設這種渲染阻塞也阻塞了 First Contentful 元素，那麼這是正確的。 並且這些資源阻塞渲染過程的時間越長，渲染 First Contentful 元素所需的時間就越長，從而導致更高的 FCP 時間分數。

消除渲染阻塞資源的最佳方法是使用名為 Asset Cleanup 的第三方插件來延遲和異步加載 JavaScript 和 CSS。 您甚至可以禁用網頁上不使用的各種腳本，從而最大限度地減少未使用的 CSS，這是我們在本文後面討論的內容。

內聯關鍵 CSS

此外，內聯關鍵 CSS 允許您將主 CSS 樣式表的加載推遲到渲染過程結束。 這可以通過資產清理來完成，但我們也建議結合 WP Rocket，它是一個緩存和優化插件。 它有一個自動的關鍵 CSS 生成器，它在移除渲染阻塞資源方面效果很好。

消除了未使用的 CSS

接下來，正如我們提到的那樣，將消除未使用的 CSS。 如果您在網頁上加載未使用的樣式，這些可能會阻塞渲染，但它們只會使您的頁面更重，從而導致傳輸更多數據，從而導致 FCP 變慢。

擺脫這些未使用的 CSS 樣式表是最小化傳輸數據量的好方法，為在您的網站上繪製關鍵的 First Contentful 元素掃清了道路。 這以有益的方式直接影響 FC 分數。

為此，沒有自動化軟件，但有一個插件可以幫助您從單個頁面和頁面範圍中刪除 CSS。 這就是我們上面提到的資產清理，它允許您打開和關閉樣式和腳本。

然後，您可以測試您網站的前端，看看是否有任何問題，如果沒有，您已經刪除了未使用的 CSS，從而加快了網站的加載速度，並獲得了更好的 FCP 分數。

刪除首屏的腳本元素（如 JS 廣告）

就您網站的實際構成而言，刪除首屏基於腳本的元素是改進 WordPress 網站的首次內容繪製的可靠方法。 JavaScript 可以盡可能地優化，但是由於它的結構，它的渲染總是比直接的 HTML 和內聯關鍵 CSS 慢。

因此，如果您有任何被視為網頁的第一個內容繪製的 JavaScript（基本上位於首屏或加載給訪問者的初始視口中的任何內容），您肯定希望擺脫它並替換它使用純 HTML。

這通常是使用基於 JavaScript 的廣告加載在首屏的內容網站的問題。 這些腳本也可能對您的累積佈局轉變產生重大負面影響。

由於 HTML 和 CSS 技術的本質，通過用更快的加載 HTML 替換它們，您將大大改進 First Contentful Paint。

禁用折疊上方的延遲加載（瘋狂，我知道）

繼續清除任何基於 JavaScript 的元素，如果您延遲加載顯示在首屏上方的任何圖像，您將需要實際禁用此功能。

延遲加載圖像是提高 WordPress 網站性能的好方法，但它們實際上對 First Contentful Paint 有負面影響，因為它們利用 JavaScript 庫來啟用該功能。

因此，請禁用在首屏加載的圖像的延遲加載，但要確保它們得到適當的優化。 這將包括將它們轉換為 WebP 格式（使用 ShortPixel），以及將它們完全壓縮到盡可能小，同時保持清晰度。

內聯圖像（SVG 或 Base64）

如果您想更瘋狂地優化圖像，對於沒有主要分辨率要求的較小圖像，您可以繼續並內聯它們。 如果您有一個特定的徽標或更小的圖像加載到首屏，這很好。 通過將它們轉換為 SVG 或 base 64 格式，您可以內聯圖像，減少下載它們的額外 HTTP 請求，從而改進您的 FCP。

請記住，此建議可能僅對特定用例有用，並且如果您有基於 HTTP2 的服務器，或者您嘗試排列的圖像非常重，最好保持原樣。

但是，利用 SVG 和 base 64 徽標、搜索圖標、社交媒體圖標和背景，可能對您的 First Contentful Paint、提高您的 WordPress 網站在 Google 上的得分以及您的排名和用戶體驗有益。

關注 DOM 大小

您可以做的最後一件主要事情是關注您的 DOM 大小。 DOM 或文檔對像模型是一種樹狀結構，本質上是指頁面上的每個元素。

因此，正文中的任何 div、span 包裝器、段落、標題、金屬鏈接等都將被視為 DOM 元素。 頁面上的元素越多，渲染時間越長，First Contentful Paint 的速度就越慢。

因此，通過減少 DOM 元素的數量，您將擁有一個更快的網站加載速度。 這可以通過使用放置在其中的任何元素來完全重建盡可能精簡的頁面，或者通過使用新的主題或頁面構建器來完成。

例如，Elementor 將其元素包裝在數十個不必要的 div 中，因此切換到具有較低代碼膨脹的頁面構建器可以最大限度地減少頁面上 DOM 元素的數量，從而減少數據傳輸，從而加快渲染時間，從而在 Google 上獲得更好的 First Contentful Paint 分數。

結論

因為 First Contentful Paint 源自您在 WordPress 網站上的真實用戶體驗，所以您不能用性能不佳的資產滑冰。 相反，您需要解決您的第一個問題並正面處理油漆分數，將這六種方法納入您的優化中，從而獲得更好的用戶體驗、更高的排名位置和更低的跳出率。

您可以使用許多其他方法來提高 WordPress 網站的整體性能，這也將有利於您的 First Contentful Paint，但是這六種方法是在 WordPress 網站上增加您的第一次寺廟繪畫的最佳方法。 如果您有任何其他優化建議，請隨時將它們留在下面的評論部分。