您網站的首次內容繪製 (FCP) 是 Google 的 Core Web Vitals 中最有意義的指標之一。與其他繪製和載入指標相比，FCP 不是關於響應時間的純技術指標。FCP 以用戶體驗和他們在網站上首先感知的內容為中心，而不是後台載入的內容。通過優化您網站的 First Contentful Paint，您不僅可以加快整體載入時間並提高頁面速度評級，還可以從字面上向訪問者展示他們的請求正在被處理並且載入沒有停止。
在本文中，我們將深入探討什麼是 First Contentful Paint、如何衡量和優化它，並回答有關 FCP 的一些常見問題，以便您確保您的網站儘可能高效和可用是。
什麼是首次內容繪製 (FCP)？
您網站的首次內容繪製是瀏覽器在您的頁面上呈現第一個 DOM 元素的時間。這包括圖像、畫布元素（非白色）或文本。通俗地說，FCP 是指用戶可以看到頁面的某些部分發生變化。通常，這是作為標題欄或背景圖像出現的。此元素可能不是從伺服器呈現或載入的第一個元素，但它是用戶可以看到的第一個元素，因此它對您網站的UX至關重要。
您的網站在 iframe 中包含的任何內容都不會被 FCP 考慮在內。也不是非內容繪畫，例如背景顏色的變化。那是First Paint，而不是First Contentful Paint。
FCP 是一個有趣的指標。雖然您可以定量衡量它，但它也相對主觀。擁有快速的首次內容繪製很重要，因為它會讓用戶感覺到您的網站正在快速載入。不管是不是真的。您的站點的首次交互延遲（用戶可以與站點互動的時間）可能比競爭對手長得多，但由於您的 FCP 更快，因此在用戶看來它可能更快。
也就是說，FCP 不是要欺騙您的用戶。較低的 FCP 時間通常是頁面速度的良好指標，優化它的方法也會影響其他頁面速度指標（例如最大內容繪製）。
如何測量 FCP
儘管 FCP 由於用戶感知而很重要，但它是一個可以衡量和評分的可量化指標。儘管如此，您可以使用這些工具來指示 FCP 在現場（對真實用戶）與實驗室（出於測試目的的模擬頁面載入）的影響。
什麼是好的 FCP 分數？
在您深入研究用於檢查 FCP 的各種工具之前，您需要知道什麼才是好的 FCP 分數。從 Google 關於確定指標分數的文檔中，我們可以看到他們將 FCP 時間分為三個類別（良好、需要改進和較差），並討論了他們如何實現Lighthouse 工具使用的百分位評分。
- 好 – 在 0 秒到 1.8 秒之間
- 需要改進 – 在 1.8 秒到 3 秒之間
- 差 – 超過 3 秒
下面，我們列出了各種工具，您可以使用這些工具查看您的網站屬於這些類別中的哪些類別。
現場工具
現場工具是您可以用來跟蹤頁面向用戶顯示的方式的工具。真實用戶。這些工具不依賴於 API 和關於您網站的假設。它們直接在您的伺服器上實時運行，以便您儘可能獲得最準確和最新的信息。
Google 在https://web.dev 上的FCP 文檔顯示這些是確定 FCP的最佳現場工具：
此外，也許最好的工具是真實用戶監控 (RUM)。這是您跟蹤和觀看真實用戶與您的網站互動的地方。您可以使用上面列出的工具定量跟蹤他們的載入時間，然後您可以直接從他們那裡獲得他們對 FCP 和您的頁面載入速度的主觀看法。就 FCP 的最完整視圖及其對訪問者的影響而言，RUM 絕對是榜首。然而，它也是最複雜和最難進行的。
實驗室工具
用於 FCP 檢查的實驗室工具傾向於模擬理想情況下 FCP 的結果。Google 推薦的這些實驗室工具不是在出現延遲、帶寬、網路擁塞和其他障礙的實際情況下，而是提供了一個查看您的站點在最佳運行時的狀態。
此外，當您正在開發一個尚未投入生產的網站時，不可能在實際條件下對其進行測試。使用實驗室工具還可以幫助您在項目整個開發周期中創建基準和里程碑。
如何優化您的 FCP 分數
上面的工具可以為您提供網站速度和 FCP 的概述和分數，當然。但它們——以及GT Metrix和Pingdom等其他工具——也讓您深入了解如何優化 FCP 分數並使其繪製速度更快。我們將概述如何修復首次內容繪製時間的一些最常見步驟，以便您知道如何解決測試和工具拍攝的任何問題。
移除渲染阻塞資源
這可能是降低 FCP 時間的第一個頁面因素。呈現阻塞資源是您的頁面必須呈現的網站上的文件。其中包括 HTML、JavaScript、字體和 CSS 文件。使它們「呈現阻塞」的是它們優先於頁面上的任何其他內容，在完成之前停止其他任何內容的載入過程。任何圖像、純文本或其他面向用戶的內容都將被擱置，直到重要文件完成。
這種持有導致 FCP 急劇增加，原因有兩個：
- 渲染阻塞文件通常很大
- 渲染阻塞文件通常不包含站點內容，只包含結構和格式
通過從關鍵渲染路徑中移除這些資源，您可以為內容豐富的繪畫開闢空間。您可以推遲資源的載入，避免對 CSS 使用 @import（對條件 CSS 使用 @media），並確保縮小和組合您的 CSS、HTML 和 JavaScript 文件（我們將在本文後面討論）。
此外，Divi 用戶可以利用我們的關鍵 CSS 系統，該系統會自動刪除每個渲染阻塞 CSS 請求。最重要的是，該主題具有提速選項，可以極大地幫助解決此問題。它不僅緩存 Google 字體並在標題中內嵌列印它們（避免 @import），Divi 還允許您選擇刪除 WordPress 的本機和（可能）未使用的 emoji，它們佔用 FCP 的資源，切換 jQuery 延遲和延遲Gutenberg 塊編輯器樣式表首先呈現並阻止其他資源。
沒有 Divi 的 WordPress 用戶也可能會在他們的緩存插件（如WP Rocket ）中找到一些渲染阻止選項，啟用這些選項也有助於減少 FCP 時間。
在字體載入之前和期間顯示文本
您是否見過這樣的網站，當所有其他內容已經存在時，頁面上的所有文本都會神奇地同時出現？
那是因為瀏覽器隱藏了它。網站的文本內容在準備好閱讀之前不會載入。文本通常只有少量位元組的內容。但是在許多站點上，載入時間可能會呈指數級增長。因為字體文件還沒有「準備好」顯示。在擁有極快的 FCP 時間的所有方法中，繪製您網站的文本內容可能是最好的方法。
您可以使用各種字體顯示參數，您可以告訴瀏覽器立即使用系統字體載入站點文本，然後在載入後將其替換為您指定的顯示字體。
文本內容的文件大小很小，通常只有幾個位元組，並且通過告訴瀏覽器立即顯示它有可能使您的 FCP 幾乎不存在。只需將 font-display:swap 添加到您擁有的任何 @font-face CSS。僅此一項就可以解決很多首次內容繪製時間問題。
Divi 默認執行此操作，因此我們的成員無需進行任何更改。您的站點將自動從系統字體切換，而不是在文件完全載入之前隱藏您的頁面內容。
縮小您的 HTML、CSS 和 JavaScript
縮小是從您網站的 HTML、CSS 和 JavaScript 文件中去除無關的字元（例如空格）。雖然間距使人類更容易閱讀和解析，但瀏覽器和伺服器不需要它們。這些空格仍然是佔用位元組的字元。通過縮小 CSS 文件之類的內容，您可以減小頁面大小。這提高了頁面速度並縮短了 FCP 的時間。
如果您是 WordPress 用戶，您的主題或緩存插件中可能已經有一個縮小選項。對於Divi用戶，這已經為您處理好了。Divi 將自動將其縮小版本的腳本排入隊列。啟用這些後，您的 FCP 將下降。
取出未使用的 CSS
如果您的樣式表中有未被使用的代碼，那麼為什麼要保留它呢？應刪除任何舊的或未使用的代碼，以免每次請求您的網站時都載入它。Chrome DevTools（我們在上面鏈接到）可以在 Coverage 選項卡下顯示 CSS 的哪些部分正在載入但未呈現。
此外，Divi用戶應該注意，我們已經徹底改革了我們的主題處理 CSS 和這種樣式膨脹的方式。我們大規模的 Divi 性能更新使 CSS 動態地分類為小的、縮小的文件，這些文件基於您在頁面上選擇的模塊。最重要的是，我們確定 CSS 的哪些部分載入到摺疊上方並首先渲染它。這會降低您的 FCP。
因此，我們不僅自動縮小了您的 CSS，我們還將其切成小塊以供您的瀏覽器使用，並優先考慮那些增加 FCP 和整體頁面載入時間的內容。
減少首位元組時間 (TTFB)
本質上，TTFB 是將數據的第一個位元組傳輸到瀏覽器的時間。FCP 取決於這個指標，所以它越快，你的第一次內容繪製就越快。減少 TTFB 和加快頁面速度的最佳方法非常簡單：
確保這三個要素得到充分照顧可以顯著降低 TTFB，進而降低您的 FCP。
保持你的 DOM 尺寸小
這可能是一個噱頭。但通常情況下，擁有快速的「首次內容繪製」的最大限制因素之一是 DOM 過大。你試圖立即做太多事情。谷歌表示「最佳位置是樹部門 <32 個元素和少於 60 個子/父元素。」
為了給訪問者留下深刻印象，我們中的許多人將主頁和登錄頁面過度複雜化。但是，這些添加的元素會使 DOM 膨脹並導致更高的 FCP 時間。您可以通過減少使用的 CSS 選擇器的數量來幫助實現這一點，也許使用比 ID 或特殊媒體查詢更多的基於類的 CSS。偽選擇器也會使事情複雜化並增加 DOM 的大小。
除此之外，您還可以減少選擇器適用的元素數量。載入和應用樣式 5 元素所需的時間比 10 元素少。對於較舊和過時的瀏覽器尤其如此，儘管我們盡了最大努力，人們仍然每天都在使用。
使用 SVG 或 WebP 圖像
這可能不會影響每個人的網站，這就是為什麼我們將其最後列入列表的原因。圖像通常不是首先繪製到頁面上的東西，尤其是在文本或附加框架上，但顯著降低重要/突出圖像（例如您的站點徽標）的文件大小可能有助於 FCP。
雖然 .gif、.jpg 和 .png 是您使用的最常見的圖像文件，但如果將它們交換為 .webp 或 .svg 文件，您將節省大量時間。有時文件大小在位元組範圍內而不是千位元組，您的圖像將在眨眼間載入。如果您是 WordPress 用戶，5.8 版內置了.webp 支持，我們有一個關於如何在我們的存檔中使用SVG 圖像的概要。
最有可能的是，與 FCP 相比，這種方法對您的最大內容繪製 (LCP) 的影響更大，但足夠小的 SVG 徽標肯定會成為您的用戶首先看到的東西。
First Contentful Paint (FCP) 常見問題
FCP 如何適應我網站的整體性能？
作為網站性能的直接指標，不是很多。FCP 是一種以用戶為中心的感知指標，並不一定代表網站性能。正如我們在文章前面提到的，兩個網站的載入時間可能完全相同，但 FCP 時間較短的網站可能會被視為更快。這種看法會影響用戶體驗，如果不是整體網站性能。
然而，為了將整體網站性能提升到更高水平，First Contentful Paint 是一個很好的衡量標準。您為降低 FCP 而採取的任何操作也會降低您的整體頁面速度。所以你幾乎可以把它當作你整體表現的一個信號。
較低的 FCP 時間通常不會與較高的整體載入時間一致，因此如果您需要使用單一指標來查看您的立場，FCP 可以成為一個很好的路標。您還可以將其與 LCP 或最大的內容繪製配對，以更全面地了解用戶在訪問您的網站的前幾秒鐘看到的內容。
First Paint 和 First Contentful Paint 有什麼區別？
儘管這兩個術語有時可以互換使用，但從技術上講，它們是兩個不同的指標。正如我們所討論的，First Contentful Paint 是當瀏覽器呈現頁面上的第一個 DOM 元素時。您可以將其視為頁面上任何可用（如果不是互動式）內容。例如，背景圖像、文本或標題菜單 div。
然而，First Paint 是瀏覽器呈現信息的第一個位元組時，無論它是否內容豐富。背景顏色的變化（不是背景圖像的載入）並不令人滿意。用戶不能將其作為內容消費，因此不是 FCP 的示例。
First Paint 可以與您的 First Contentful Paint 完全相同。但是您的 FCP 可能與您的 First Paint 不同。
結論
FCP 是您網站的絕對重要指標。Google 將頁面速度視為頁面排名最重要的方面之一。用戶將頁面速度視為他們是否留在您網站上的決定因素之一。擁有較低的 First Contentful Paint 可以讓用戶留在您的網站上，並幫助他們首先找到您的網站。儘管 FCP 通常是一個難以確定和掌握的指標，但任何減少 FCP 時間的優化都會增加用戶體驗，並減少網站整體載入時間的寶貴秒數和毫秒數。
擁有快速的 First Contentful Paint 的最佳策略是什麼？