什麼是首次內容繪製(FCP)?如何優化FCP？
您網站的首次內容繪製 (FCP)是Google Core Web Vitals中最有意義的指標之一。與其他繪製和加載指標相比，FCP不是關於響應時間的純技術指標。FCP以用戶體驗和他們在網站上首先感知的內容為中心，而不是後台加載的內容。通過優化您網站的First Contentful Paint，您不僅可以加快整體加載時間並提高頁面速度評級，還可以從字面上向訪問者展示他們的請求正在處理中並且加載沒有停止。
什麼是首次內容繪製(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的最佳現場工具：
PageSpeed 洞察力
Chrome 用戶體驗報告
Search Console（速度報告）
Web Vitals JavaScript 庫
此外，也許最好的工具是真實用戶監控(RUM)。這是您跟蹤和觀看真實用戶與您的網站互動的地方。您可以使用上面列出的工具定量跟蹤他們的加載時間，然後您可以直接從他們那裡獲得他們對FCP和您的頁面加載速度的主觀看法。就FCP的最完整視圖及其對訪問者的影響而言，RUM絕對是榜首。然而，它也是最複雜和最難進行的。
實驗室工具
用於FCP檢查的實驗室工具傾向於模擬理想情況下FCP的結果。Google 推薦的這些實驗室工具不是在實際情況下發生延遲、帶寬、網絡擁塞和其他障礙的情況，而是讓您了解您的網站在最佳運行時的表現。
燈塔
Chrome開發者工具
PageSpeed洞察力
此外，當您正在開發尚未投入生產的網站時，不可能在實際條件下對其進行測試。使用實驗室工具還可以幫助您在項目整個開發周期中創建基準和里程碑。
如何優化您的FCP分數
上面的工具可以為您提供網站速度和FCP的概述和分數，當然。但它們以及GT Metrix和Pingdom等其他工具，也讓您深入了解如何優化FCP分數並使其繪製速度更快。我們將概述如何修復首次內容繪製時間的一些最常見步驟，以便您知道如何解決測試和工具拍攝的任何問題。
移除渲染阻塞資源
這可能是降低FCP時間的第一個頁面因素。呈現阻塞資源是您的網頁必須呈現的網站上的文件。其中包括HTML、JavaScript、字體和CSS文件。使它們「呈現阻塞」的是它們優先於頁面上的任何其他內容，在完成之前停止其他任何內容的加載過程。任何圖像、純文本或其他面向用戶的內容都將被擱置，直到重要文件完成。
這種持有導致FCP急劇增加，原因有兩個：
渲染阻塞文件通常很大
渲染阻止文件通常不包含站點內容，只包含結構和格式
通過從關鍵渲染路徑中移除這些資源，您可以為內容豐富的繪畫開闢空間。您可以推遲資源的加載，避免對CSS使用@import（改為對條件CSS使用@media），並確保縮小和組合您的CSS、HTML 和 JavaScript 文件（我們將在本文後面討論）。
在字體加載之前和期間顯示文本
您是否見過這樣的網站，當所有其他內容已經存在時，頁面上的所有文本都會神奇地同時出現？
那是因為瀏覽器隱藏了它。網站的文本內容在準備好閱讀之前不會加載。文本通常只有少量字節的內容。但是在許多站點上，加載時間可能會呈指數級增長。因為字體文件還沒有「準備好」顯示。在擁有極快的FCP時間的所有方法中，繪製您網站的文本內容可能是最好的。
您可以使用各種字體顯示參數，您可以告訴瀏覽器立即使用系統字體加載站點的文本，然後在加載後將其替換為您指定的顯示字體。
文本內容的文件大小很小，通常只有幾個字節，並且通過告訴瀏覽器立即顯示它有可能使您的FCP幾乎不存在。只需將font-display:swap添加 到您擁有的任何 @font-face CSS。僅此一項就可以解決很多首次內容繪製時間問題。
縮小您的 HTML、CSS 和 JavaScript
縮小是從您網站的 HTML、CSS 和 JavaScript 文件中去除無關的字符（例如空格）。雖然間距使人類更容易閱讀和解析，但瀏覽器和伺服器不需要它們。這些空格仍然是占用字節的字符。通過縮小CSS文件之類的內容，您可以減小頁面大小。這提高了頁面速度並縮短了FCP的時間。
如果您是 WordPress 用戶，您的主題或緩存插件中可能已經有一個縮小選項。
取出未使用的CSS
如果您的樣式表中有未被使用的代碼，那麼為什麼要保留它呢？應刪除任何舊的或未使用的代碼，以免每次請求您的網站時都加載它。Chrome DevTools（我們在上面連結到）可以在Coverage選項卡下向 您顯示CSS的哪些部分正在加載但未呈現。
減少首字節時間(TTFB)
本質上，TTFB是將數據的第一個字節傳輸到瀏覽器的時間。FCP 取決於這個指標，所以它越快，你的第一次內容繪製就越快。減少TTFB和加快頁面速度的最佳方法非常簡單：
使用優質主機
通過CDN交付內容
啟用瀏覽器緩存（使用 WordPress，通過WP Rocket等插件）
確保這三個元素得到充分照顧可以顯著降低 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時間的優化都會增加用戶體驗，並減少網站整體加載時間的寶貴秒數和毫秒數。
