如何改進 WordPress 中的首次內容繪製 (FCP)

已發表: 2022-10-11

First Contentful Paint (FCP) 分數可指示您的站點渲染所需的時間。分數低意味著您的訪問者可能不得不等待比他們應該等待的時間更長。

幸運的是，您可以採取一些措施來改善這一點。通過優化您網站的資源，您可以確保您的內容快速加載並保持用戶參與度。

在這篇文章中，我們將解釋 FCP 是什麼，為什麼它很重要，以及如何針對這個指標測試您的網站。然後，我們將向您展示如何改善 WordPress 中較差的 FCP 分數。

什麼是首次內容繪製 (FCP)？

First Contentful Paint (FCP) 是衡量瀏覽器在頁面上加載第一個文本或圖像所花費的時間量。簡而言之，這是從加載過程開始到頁面開始顯示內容之間的延遲。

FCP 是 Lighthouse 報告的性能部分中跟踪的六個指標之一。這些指標評估網站的用戶體驗，包括：

最大含量塗料（LCP） ：負載性能的測量。
第一輸入延遲 (FID) ：交互性的測量。
累積佈局偏移 (CLS) ：視覺穩定性的測量。

您應該努力改進所有這些指標，以便為用戶提供最佳體驗。雖然它不是主要的核心網絡至關重要，但 First Contentful Paint是一個補充指標，可以幫助您識別和改進加載問題。

谷歌希望將搜索者引導到提供出色體驗的網站，因此高分不僅是優質用戶體驗的目標，而且可能會提高搜索排名。

FCP 如何影響用戶體驗

當訪問者第一次點擊一個網站時，他們希望它能夠快速加載。如果您的網站太慢，他們可能會離開頁面並從競爭對手那裡找到他們正在尋找的信息。

First Contentful Paint 標誌著訪問者看到頁面上的第一個元素所需的時間。

這很重要，因為即使頁面需要一段時間才能加載所有內容或完全交互，只要訪問者可以看到某種進度，他們可能更有可能多花幾秒鐘來完成。相反，如果他們看到的只是一個空白屏幕，他們可能會完全離開。

FCP評分不佳的潛在原因

根據谷歌的說法，理想的 FCP 分數應該在 1.8 秒以下。如果你的分數很差，這可能是幾個因素的結果：

服務器響應時間慢：如果您的網站具有較高的首字節時間 (TTFB) 分數，這可能會影響 First Contentful Paint。
渲染阻塞 JavaScript 和 CSS ：低效的腳本隊列可能會停止渲染過程，直到處理完繁重的腳本。
首屏與腳本相關的元素：由於 JavaScript 是從上到下加載的，因此避免首屏出現大量 JavaScript 元素很重要。
首屏延遲加載圖片：雖然延遲加載圖片可以提高頁面速度，但是這個過程使用了 JavaScript，可以增加 FCP。
字體加載效率低下：字體可能包含大量文件，會延遲文本的呈現。
文檔對像模型 (DOM) 尺寸過大：DOM 中的節點過多會導致加載效率低下。

如您所見，有幾件事會影響您網站的 First Contentful Paint。大多數性能分析工具將幫助您確定特定原因。這可以更容易地定位問題的根源並實施正確的解決方案。

如何衡量您網站的第一個內容繪製

在您開始實施會影響您的 FCP 分數的措施之前，評估您網站的當前性能非常重要。讓我們看一些您可以使用的不同工具。

PageSpeed 見解

First Contentful Paint 可以在實驗室和現場測量。使用現場工具，您可以跟踪頁面對真實用戶的執行情況。但實驗室工具只是模擬結果。

PageSpeed Insights 是一種工具，可以使用實驗室和現場結果評估您的網站。您只需輸入您網站的 URL 並立即分析其核心 Web Vitals 指標。

在頁面頂部，您將看到您的Core Web Vitals Assessment 。這將指示您是通過還是未通過 LCP、FID、CLS 等測試。

來自 Google PageSpeed 的結果，顯示 LCP、FID 和 CLS 的分數

您將在Other Notable Metrics下找到您的 First Contentful Paint 分數。如果它是 1.8 秒或更短，您將獲得“良好”評級。任何超過 1.8 秒的分數都需要一些改進。

這些結果將自動設置為Mobile 。您可以單擊桌面查看這些設備的 FCP 分數。

如果您看到 FCP 部分的評級為“差”或“需要改進”，則需要實施一些優化方法。

燈塔

Lighthouse 是一個實驗室工具，可以審核任何網頁的可訪問性、Core Web Vitals 等。該軟件會將您的 FCP 時間與其他網站進行比較。

要使用 Lighthouse，請在 Google Chrome 瀏覽器中右鍵單擊要分析的頁面，然後選擇Inspect 。

在 Chrome DevTools 窗口中，找到雙箭頭圖標。然後，從出現的下拉菜單中選擇Lighthouse 。

接下來，您可以選擇要包含在 Lighthouse 報告中的元素。完成後，單擊分析頁面加載。

Lighthouse 處理您的網站後，您將看到整體性能得分。在此下方，您將找到您的第一個 Contentful Paint。

如果您在此部分旁邊看到一個綠色圓圈，則您的 FCP 分數很高。如果您得到一個黃色正方形或紅色三角形，則您的內容渲染時間太長。

GTmetrix

另一個可以用來測量 FCP 的免費工具是 GTmetrix。使用 Lighthouse 數據和審計，GTmetrix 提供對您網站性能的詳細分析。

首先，將您的 URL 粘貼到搜索欄中，然後單擊Test your site 。

然後，您可以在Speed Visualization圖表中查看您的 First Contentful Paint 分數。

如果您的 FCP 太慢，它將在Top Issues下。在此 FCP 審核中，您可以看到特定資源如何影響您的分數。

通過確定問題的原因，您可以實施正確的解決方案。此外，GTmetrix 將提供建議來幫助您提高 FCP 分數。

如何減少 WordPress 中的首次內容繪製時間

如果您的網站的 FCP 分數較差，請不要擔心 — 您可以採取多種措施來提高性能。讓我們看一些改進這個指標的有效方法。

1.安裝核心網絡生命力優化插件

您可以使用許多不同的 WordPress 插件來提高您的 First Contentful Paint 分數。儘管您可以安裝不同的工具來縮小站點文件或擺脫渲染阻塞資源，但最好找到一個一體化的 Core Web Vitals 插件。

Jetpack Boost 是一款免費工具，可以通過多種方式優化您網站的性能。該插件由 WordPress.com 背後的公司 Automattic 開發，只需單擊幾下即可幫助您提高 Core Web Vitals 分數。

首先，安裝並激活 Jetpack Boost。然後，您將在桌面和移動設備上收到對您的頁面速度的自動評估。

它還將為您提供一些性能優化選項。通過啟用這些設置，您可以輕鬆優化 CSS、延遲非必要的 JavaScript 並實現延遲圖像加載。

然後，您可以運行另一個速度測試，看看您的性能得分是否有所提高。如您所見，使用 Jetpack 可能是在 WordPress 中改進 First Contentful Paint 的最快和最簡單的方法之一。

2.減少服務器響應時間

服務器響應時間或第一個字節時間 (TTFB)，是服務器將第一個信息字節發送回瀏覽器所需的時間。這測量了請求開始和響應開始之間的延遲。

First Contentful Paint 依賴於 TTFB。以下是 FCP 和 TTFB 在加載過程中如何協同工作的示例：

FCP = TTFB + 渲染時間

這意味著減少服務器響應時間可能是改進 WordPress 中的 First Contentful Paint 的有效方法。最簡單的方法之一是找到優質的網絡託管服務。

通常，最好選擇專門為 WordPress 配置的主機。 WordPress 託管服務可以優化您的動態內容並提高您的服務器響應時間。反過來，這可能會提高您的 FCP 分數。

讓服務器靠近您的受眾也很有幫助。因此，當您評估網絡主機時，您需要檢查其服務器位置。如果您的受眾分佈在地理上，您可能還需要投資 WordPress CDN，以便訪問者可以從離他們更近的服務器訪問您的網站。

選擇新的託管服務提供商後，您可以輕鬆遷移 WordPress 網站。然後，您可以享受更快的加載速度、更短的服務器響應時間和改進的 FCP。

3.消除渲染阻塞資源

當有人試圖訪問您的網站時，頁面上的所有元素都必須呈現。在此過程中，您網站的代碼從上到下下載。在您的內容出現之前，瀏覽器需要閱讀整個腳本隊列。

不幸的是，可能存在阻止頁面加載的渲染阻塞資源。在這種情況下，必須呈現不必要的 HTML、CSS 或 JavaScript 文件，這會阻止瀏覽器加載重要內容。

這些文件通常很大並且不包含重要信息。當在隊列頂部處理渲染阻塞資源時，您的圖像、文本或其他基本視覺元素可能需要更長的時間才能出現。可以想像，這會對您的 FCP 以及 LCP 和總阻塞時間 (TBT) 產生負面影響。

使用 PageSpeed Insights，您可以輕鬆檢查這是否是您網站的問題。在“機會”部分中，查找“消除渲染阻塞資源”警報。

要解決此問題，您可以使用 Jetpack Boost 插件來優化 CSS、延遲非必要的 JavaScript 和延遲離屏圖像。這將改善您的文件結構以加快加載速度。

如果要手動編輯腳本，可以安裝 Async JavaScript 插件。

此工具使您能夠將異步或延遲屬性添加到特定文件，但過程可能有點複雜。使用 Jetpack Boost，您無需使用代碼即可輕鬆優化站點文件。

4.優化你的CSS結構

當你編寫代碼時，你可能會包含空格，以便人們可以很容易地理解它。問題是這些額外的字符會佔用更多的磁盤空間。另外，瀏覽器不需要空格來處理編碼。

CSS 優化涉及從 CSS 文件中取出多餘的空格和字符。通過消除不必要的信息，您可以減小頁面的大小。這可以使瀏覽器更容易閱讀它，從而提高你的 FCP 分數。

Jetpack Boost 讓您通過一個簡單的步驟完成此操作。通過啟用優化 CSS 加載設置，該插件將縮小您的文件以僅加載關鍵 CSS。

使用 Jetpack Boost，您還可以通過單擊按鈕為頁面生成關鍵路徑 CSS。這是顯示首屏內容所需的最少 CSS 編碼量。

手動創建關鍵路徑 CSS 可能是一項艱鉅的任務，但您可以使用 Pegasaas 之類的工具來自動化該過程。只需輸入您網站的 URL，您就可以訪問此代碼。

然後，您可以在 HTML 的 <head> 部分中添加此 CSS。如果正確完成，這將立即呈現首屏內容，而無需異步樣式表。

5. 避免在首屏出現依賴 JavaScript 的元素

即使在優化了 JavaScript 之後，它的加載時間仍然比 HTML 更長。由於 FCP 測量第一個元素在頁面上呈現所花費的時間，因此確保這些元素不是大量 JavaScript 非常重要。

在構建您的網站時，您需要避免讓您的佈局依賴於 JavaScript。為了改進 First Contentful Paint，許多人選擇延遲或消除 JavaScript。如果您的第一個元素依賴於繁重的腳本，您的頁面將不會很快加載。

下面是一些應該被移到首屏的 JavaScript 元素：

重動畫
滑塊
社交媒體小部件
谷歌廣告

由於 JavaScript 代碼是從上到下執行的，因此將這些元素向下移動到頁面下方可能是有益的。如果它們低於首屏，訪問者可以更快地看到您的內容。

6.避免在首屏延遲加載圖片

加快網站速度的最佳方法之一是對圖像實施延遲加載。本質上，這涉及在圖像出現在屏幕上時對其進行處理。如果有人正在查看頁面頂部，則無需加載其下方的任何圖像。

儘管延遲加載圖像有很多好處，但實際上它們可能會損害 First Contentful Paint。延遲加載實現了一個延遲加載圖像的腳本。由於它使用 JavaScript，它可能會延遲您的 FCP 分數。

使用 Jetpack Boost 時，您可以指定要從延遲加載中排除哪些圖像。對於首屏圖像，您可以添加 CSS 類 skip-lazy。

您還可以應用 jetpack_lazy_images_blocked_classes 過濾器。這將通知 Jetpack 避免對具有特定類的任何圖像應用延遲加載。

以下是該代碼在實踐中的樣子：

 function mysite_customize_lazy_images( $blocked_classes ) {    $blocked_classes[] = 'my-header-image-classname';    return $blocked_classes; } add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

禁用站點徽標的延遲加載也是一個好主意。通過這樣做，您的徽標將呈現得更快，從而鼓勵用戶留在頁面上。

7.優化和壓縮圖片

通常，圖像不是在頁面上呈現的第一個元素。因此，您可能不必優化圖像來改進 FCP。儘管如此，您仍需要考慮執行此步驟以減少加載時間並減輕服務器資源的壓力。

首先，您可以將文件格式切換為 SVG 或 WebP。您的網站可能使用 JPG、PNG 或 GIF 圖像文件。通過使用具有更好壓縮率的格式，您可能會減少 First Contentful Paint。

您還可以使用圖像壓縮插件。使用 TinyPNG 之類的工具，您可以在將 JPEG、PNG 和 WebP 圖像上傳到 WordPress 時自動優化它們。

如果某些圖像不需要高質量的分辨率，您可以內聯它們。這對於徽標、圖標和橫幅圖像等首屏圖像很有用。當您內聯這些元素時，瀏覽器將不會使用盡可能多的請求來下載它們。

要內聯圖像，您必須將其轉換為 Base64 或 SVG 格式。 Base64 圖像工具可以自動將 JPG、PNG、GIF、WebP、SVG 和 BMP 文件轉換為 Base64 文件。

然後，您可以將 Base64 圖像添加到您的網站。這是您可以使用的 HTML 代碼：

 <img src="data:image/jpeg;base64,/uj/…[content]..." width="100" height="50" alt="this is a base64 image">

對於 CSS，以下是插入 Base64 文件的方法：

 .custom-class {    background: url('data:image/jpeg;base64,/9j/…[content]...'); }

如果您使用的是 SVG 文件，則可以在 HTML 中內聯圖像：

 <body>  <!-- Insert SVG code here, and the image will show up! -->    <svg xmlns="http://www.w3.org/2000/svg">        <circle cx='50' cy='25' r='20'/>    </svg> </body>

請記住，內聯圖像可以增加它們的大小以及整體頁面大小。此外，您的內容交付網絡 (CDN) 無法交付這些圖像。

8. 利用服務器級緩存

一旦有人點擊您的網站，他們的瀏覽器就會從您的服務器請求數據。然後，服務器處理請求並發回相關資源。

使用服務器級緩存，您的服務器會臨時存儲這些文件以供重複使用。在同一用戶第二次發送請求後，您的服務器將發送保存的網頁副本。

通過使用緩存，您的服務器不必每次都從頭開始生成內容。這可以有效地減輕服務器的壓力，使用戶能夠更快地查看內容。

要開始使用服務器級緩存，您可以安裝像 WP Super Cache 這樣的緩存插件。然後，您的服務器將交付生成的靜態 HTML 文件，而不是處理 PHP 腳本。

另外，您可以在 WP Super Cache 設置中輕鬆設置緩存。您所要做的就是選擇Caching On 。

這可能是減少服務器處理時間的最簡單方法之一。通過緩存，您可以確保重複訪問者獲得快速而愉快的體驗。

9. 使用內容交付網絡 (CDN)

提高 FCP 分數的另一種方法是使用內容交付網絡 (CDN)。 CDN 是一個服務器網絡，可以遠距離傳送在線內容。當有人訪問您的網站時，CDN 會從離他們最近的服務器傳送您的內容。

通過實施 CDN，您可以縮短服務器與訪問者之間的距離。因此，這些訪問者可以體驗到更快的加載時間。

幸運的是，Jetpack 附帶了一個免費的內置 WordPress CDN。激活後，您可以轉到Jetpack → 設置 → 性能和速度並啟用站點加速器。

這可以有效地加快圖像和靜態文件的交付。無論他們身在何處，訪問者都可以毫無延遲地訪問您的內容。

10. 減少你的 DOM 大小

文檔對像模型 (DOM) 是表示 Web 文檔的結構和內容的接口。如果您的網站上的頁面過於復雜，它可能會增加您的 DOM 大小。這可能會損害您的表現，包括您的 First Contentful Paint。

如果您的 DOM 大小過大，Lighthouse 會通知您。通常，只有在 body 元素的節點數超過 800 個時才會收到警告。如果有超過 1,400 個節點，您將收到一條錯誤消息。

如果您自己編輯 DOM，您需要確保只創建必要的節點並刪除非必要的節點。如果您有 WordPress 網站，這些任務將由主題、插件、核心軟件和頁面構建器完成。

以下是一些減少 WordPress 中 DOM 大小的替代方法：

將長頁面分成較小的頁面
減少存檔和主頁中的帖子數量
避免使用不必要的 <div> 標籤
使用更少的 CSS 選擇器

選擇優化的 WordPress 主題也是有益的。使用像二十二十二這樣的快速輕量級選項可以幫助您減小 DOM 大小。

11. 確保在 webfont 加載期間文本保持可見

通常，字體具有需要很長時間才能加載的大文件。在某些情況下，瀏覽器會延遲渲染文本，直到字體完全加載。這被稱為不可見文本閃現 (FOIT)。

為防止這種情況發生，您可以暫時顯示系統字體。這包括在@font-face 樣式中包含一個字體顯示：交換。

這就是它的樣子：

 @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2'); font-display: swap; }

或者，您可能想要從 Google 字體導入字體。在這種情況下，您可以將 &display=swap 參數應用於您的 Google 字體鏈接：

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

您的網站不會顯示不可見的文本，而是顯示無樣式文本 (FOUT) 的 Flash。這可以使您的網站立即顯示內容，從而改進 First Contentful Paint。

關於 First Contentful Paint 的常見問題解答 (FAQ)

讓我們看一下關於 First Contentful Paint 的一些常見問題。

如何衡量我的 WordPress 網站的 FCP 分數？

您可以使用幾種不同的工具來衡量您的 First Contentful Paint。使用 PageSpeed Insights、Lighthouse 或 GTmetrix，您將能夠確定您的 FCP 分數並解決特定問題。

什麼是好的 FCP 分數？

一個好的 FCP 分數應該是 1.8 秒或更短。 1.8 到 3 秒之間的指標可能需要改進。任何超過 3 秒的時間都需要立即關注。

如何輕鬆優化我的 FCP 分數？

提高 FCP 分數的最簡單方法之一是使用 Jetpack Boost 插件。這個免費工具可以在一個地方優化您的 Core Web Vitals。

首先，安裝並激活 Jetpack Boost。然後，單擊Jetpack開始升級您網站的性能。

在這裡，您可以優化 CSS 加載、延遲非必要的 JavaScript 並使用延遲圖像加載。通過簡單地啟用每個功能，您可以自動改進 WordPress 中的 First Contentful Paint。

立即顯示您的在線內容

通過改進您的 First Contentful Paint，您可以確保您的內容更快地為訪問者加載。如果沒有此措施，您可能會體驗到更高的跳出率。

要衡量您的 FCP，您可以使用 PageSpeed Insights 分析您的網站。如果你的分數很差，你可以使用 Jetpack Boost 來優化你的腳本和圖像文件。此外，您可以使用該插件啟用延遲加載並使用 CDN。

實施這些措施後，您的訪問者可以開始體驗更快的加載時間。這意味著跳出率更低，觀眾參與度更高！