建站
咨詢
售后
建站咨詢
新聞中心
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,黃島企業(yè)網(wǎng)站建設,黃島品牌網(wǎng)站建設,網(wǎng)站定制,黃島網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,黃島網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
首次內容繪制 (FCP) 是Google Core Web Vitals中最有意義的指標之一。與其他繪制和加載指標相比，F(xiàn)CP不是關于響應時間的純技術指標。FCP以用戶體驗和他們在網(wǎng)站上首先感知的內容為中心，而不是后臺加載的內容。通過優(yōu)化您網(wǎng)站的First Contentful Paint，您不僅可以加快整體加載時間并提高頁面速度評級，還可以從字面上向訪問者展示他們的請求正在處理中并且加載沒有停止。
在本教程中，我們將深入探討什么是First Contentful Paint，如何衡量和優(yōu)化它，并回答一些關于FCP的常見問題，以便您可以確保您的網(wǎng)站盡可能高效和可用。
什么是首次內容繪制 (FCP)？
網(wǎng)站的首次內容繪制是瀏覽器在您的頁面上呈現(xiàn)第一個DOM元素的時間。這包括圖像、畫布元素（非白色）或文本。通俗地說，F(xiàn)CP是指用戶可以看到頁面的某些部分發(fā)生變化。通常，這是作為標題欄或背景圖像出現(xiàn)的。此元素可能不是從服務器呈現(xiàn)或加載的第一個元素，但它是用戶可以看到的第一個元素，因此它對您網(wǎng)站的UX至關重要。
網(wǎng)站在iframe 中包含的任何內容都不會被FCP考慮在內。也不是非內容繪畫，例如背景顏色的變化。那是First Paint，而不是 First Contentful Paint。
FCP是一個有趣的指標。雖然您可以定量衡量它，但它也相對主觀。擁有快速的首次內容繪制很重要，因為它會使用戶感覺到您的網(wǎng)站正在快速加載。不管是不是真的。您的站點的首次交互延遲（用戶可以與站點互動的時間）可能比競爭對手長得多，但由于您的FCP更快，因此在用戶看來它可能更快。
也就是說，F(xiàn)CP并不是要欺騙您的用戶。較低的FCP時間通常是頁面速度的良好指標，優(yōu)化它的方法也會影響其他頁面速度指標（例如最大內容繪制）。
如何測量FCP
盡管FCP由于用戶感知而很重要，但它是一個可以衡量和評分的可量化指標。盡管如此，您可以使用這些工具來指示FCP在現(xiàn)場（對真實用戶）與實驗室（用于測試目的的模擬頁面加載）的影響。
什么是好的FCP評分？
在您深入研究用于檢查FCP的各種工具之前，您需要了解什么才是好的FCP分數(shù)。從Google關于確定指標分數(shù)的文檔中，我們可以看到他們將FCP時間分為三類——好、需要改進和差——并討論了他們如何實現(xiàn)Lighthouse工具使用的百分位評分。
- 好– 在 0 秒到 1.8 秒之間
- 需要改進– 在 1.8 秒到 3 秒之間
- 差– 超過 3 秒
下面，我們列出了各種工具，您可以使用這些工具查看您的網(wǎng)站屬于這些類別中的哪些類別。
現(xiàn)場工具
現(xiàn)場工具是您可以用來跟蹤頁面對用戶的顯示方式的工具。真實用戶。這些工具不依賴于API和關于您網(wǎng)站的假設。它們直接在您的服務器上實時運行，以便您盡可能獲得最準確和最新的信息。
Google在https://web.dev上的FCP文檔顯示這些是確定FCP的最佳現(xiàn)場工具：
- PageSpeed Insights
- Chrome用戶體驗報告
- Search Console（速度報告）
- Web Vitals JavaScript 庫
此外，也許最好的工具是真實用戶監(jiān)控 (RUM)。這是您跟蹤和觀看真實用戶與您的網(wǎng)站互動的地方。您可以使用上面列出的工具定量跟蹤他們的加載時間，然后您可以直接從他們那里獲得他們對FCP和您的頁面加載速度的主觀看法。就FCP的最完整視圖及其對訪問者的影響而言，RUM絕對是榜首。然而，它也是最復雜和最難進行的。
實驗室工具
用于FCP檢測的實驗室工具傾向于模擬理想情況下 FCP 的結果。Google推薦的這些實驗室工具不是在實際情況下發(fā)生延遲、帶寬、網(wǎng)絡擁塞和其他障礙的情況，而是讓您了解您的網(wǎng)站在最佳運行時的表現(xiàn)。
- Lighthouse
- Chrome開發(fā)者工具
- PageSpeed Insights
此外，當您正在開發(fā)尚未投入生產的網(wǎng)站時，不可能在實際條件下對其進行測試。使用實驗室工具還可以幫助您在項目整個開發(fā)周期中創(chuàng)建基準和里程碑。
如何優(yōu)化網(wǎng)站FCP分數(shù)
上面的工具可以為您提供網(wǎng)站速度和FCP的概述和分數(shù)，當然。但它們——以及GT Metrix和Pingdom等其他網(wǎng)站測速工具——也讓您深入了解如何優(yōu)化FCP分數(shù)并使其繪制速度更快。我們將概述如何修復首次內容繪制時間的一些最常見步驟，以便您知道如何解決測試和工具拍攝的任何問題。
移除渲染阻塞資源
這可能是降低FCP時間的第一個頁面因素。呈現(xiàn)阻塞資源是您的網(wǎng)頁必須呈現(xiàn)的網(wǎng)站上的文件。其中包括HTML、JavaScript、字體和CSS 文件。使它們“呈現(xiàn)阻塞”的是它們優(yōu)先于頁面上的任何其他內容，在完成之前停止其他任何內容的加載過程。任何圖像、純文本或其他面向用戶的內容都將被擱置，直到重要文件完成。
這種持有導致FCP急劇增加，原因有兩個：
- 渲染阻塞文件通常很大
- 渲染阻塞文件通常不包含站點內容，只包含結構和格式
通過從關鍵渲染路徑中移除這些資源，您可以為內容豐富的繪畫開辟空間。您可以延遲資源的加載，避免對CSS使用@import（改為對條件CSS使用@media），并確保極簡化和合并您的CSS、HTML和JavaScript文件（我們將在本文后面討論）。
WordPress用戶可以使用緩存插件（如WP Rocket）中找到一些渲染阻止選項，啟用這些選項也有助于減少FCP時間?；蛘邊⒖既绾我瞥枞秩镜腏avaScript和CSS進一步對WordPress進行優(yōu)化。
在字體加載之前和期間顯示文本
您是否見過這樣的網(wǎng)站，當所有其他內容已經(jīng)存在時，頁面上的所有文本都會神奇地同時出現(xiàn)？
那是因為瀏覽器隱藏了它。網(wǎng)站的文本內容在準備好閱讀之前不會加載。文本通常只有少量字節(jié)的內容。但是在許多站點上，加載時間可能會呈指數(shù)級增長。因為字體文件還沒有“準備好”顯示。在擁有極快的 FCP 時間的所有方法中，繪制您網(wǎng)站的文本內容可能是最好的。
您可以使用各種字體顯示參數(shù)，您可以告訴瀏覽器立即使用系統(tǒng)字體加載站點的文本，然后在加載后將其替換為您指定的顯示字體。
文本內容的文件大小很小，通常只有幾個字節(jié)，并且通過告訴瀏覽器立即顯示它有可能使您的FCP幾乎不存在。只需將font-display:swap添加 到您擁有的任何@font-face CSS。僅此一項就可以解決很多首次內容繪制時間問題。
極簡化HTML、CSS和 avaScript
極簡化是從您網(wǎng)站的HTML、CSS和JavaScript文件中去除無關的字符（例如空格）。雖然間距使人類更容易閱讀和解析，但瀏覽器和服務器不需要它們。這些空格仍然是占用字節(jié)的字符。通過縮小 CSS 文件之類的內容，您可以減小頁面大小。這提高了頁面速度并縮短了 FCP 的時間。
“WordPress網(wǎng)站CSS、JavaScript和HTML文件瘦身壓縮教程”深入講解如何進行執(zhí)行極簡化操作。
移除未使用的CSS
如果您的樣式表中有未被使用的代碼，那么為什么要保留它呢？應刪除任何舊的或未使用的代碼，以免每次請求您的網(wǎng)站時都加載它。Chrome DevTools（我們在上面鏈接到）可以在Coverage選項卡下向 您顯示CSS的哪些部分正在加載但未呈現(xiàn)。
移除WordPress未使用的CSS，對于一般站長來說，最好的方式是通過插件來實現(xiàn)！
減少首字節(jié)時間 (TTFB)
本質上，TTFB 是將數(shù)據(jù)的第一個字節(jié)傳輸?shù)綖g覽器的時間。FCP取決于這個指標，所以它越快，你的First Contentful Paint就越快。減少TTFB和加快頁面速度的最佳方法非常簡單：
- 使用優(yōu)質服務器主機
- 通過CDN交付內容
- 啟用瀏覽器緩存（使用WP Rocket等插件）
確保這三個元素得到充分照顧可以顯著降低TTFB，進而降低您的FCP。
保持你的DOM尺寸小
這可能是一個噱頭。但通常情況下，快速進行首次內容繪制的最大限制因素之一是DOM過大。你試圖立即做太多事情。谷歌表示“最佳Doom規(guī)模應小于32個元素和少于60個子/父元素。”
為了給訪問者留下深刻印象，我們中的許多人將主頁和登錄頁面過度復雜化。但是，這些添加的元素會使DOM膨脹并導致更高的FCP時間。您可以通過減少使用的CSS選擇器的數(shù)量來幫助實現(xiàn)這一點，也許使用比ID或特殊媒體查詢更多的基于類的CSS。偽選擇器也會使事情復雜化并增加DOM的大小。
除此之外，您還可以減少選擇器適用的元素數(shù)量。加載和應用樣式5元素所需的時間比10元素少。對于較舊和過時的瀏覽器尤其如此，盡管我們盡了最大努力，人們仍然每天都在使用。
使用SVG或WebP圖像
這可能不會影響每個人的網(wǎng)站，這就是為什么我們將其最后列入列表的原因。圖像通常不是首先繪制到頁面上的東西，尤其是在文本或附加框架上，但顯著降低重要/突出圖像（例如您的站點徽標）的文件大小可能有助于FCP。
雖然.gif、.jpg和 .png是您使用的最常見的圖像文件，但如果將它們轉換為.webp或.svg文件，您將節(jié)省大量時間。有時文件大小在 字節(jié)范圍內而不是 千字節(jié)，您的圖像將在眨眼間加載。如果您是 WordPress 用戶，5.8版內置了.webp支持，此前我們也撰寫過關于WordPress使用SVG圖像的文章。
最有可能的是，與FCP相比，這種方法對您的最大內容繪制 (LCP) 的影響更大，但足夠小的SVG徽標肯定會成為您的用戶首先看到的東西。
影響網(wǎng)站FCP分數(shù)是方方面面的，如果你著迷于WordPress網(wǎng)站速度優(yōu)化，建議你閱讀“如何做到Google PageSpeed Insights測試滿分”一文。
FCP常見問題
FCP如何適應我網(wǎng)站的整體性能？
作為網(wǎng)站性能的直接指標，不是很多。FCP是一種以用戶為中心的感知指標，并不一定代表網(wǎng)站性能。正如我們在文章前面提到的，兩個網(wǎng)站的加載時間可能完全相同，但FCP時間較短的網(wǎng)站可能會被 視為更快。這種看法會影響用戶體驗，如果不是整體網(wǎng)站性能。
然而，為了將整體網(wǎng)站性能提升到更高水平，F(xiàn)irst Contentful Paint是一個很好的衡量標準。您為降低FCP而采取的任何操作也會降低您的整體頁面速度。所以你幾乎可以把它當作你整體表現(xiàn)的一個信號。
較低的FCP時間通常不會與較高的整體加載時間一致，因此如果您需要使用單一指標來查看您的立場，F(xiàn)CP可以成為一個很好的路標。您還可以將其與LCP或最大的內容繪制配對，以更全面地了解用戶在訪問您的網(wǎng)站的前幾秒鐘看到的內容。
First Paint和First Contentful Paint有什么區(qū)別？
盡管這兩個術語有時可以互換使用，但從技術上講，它們是兩個不同的指標。正如我們所討論的，F(xiàn)irst Contentful Paint是當瀏覽器呈現(xiàn)頁面上的第一個DOM元素時。您可以將其視為頁面上任何可用（如果不是交互式）內容。例如，背景圖像、文本或標題菜單div。
然而，F(xiàn)irst Paint是瀏覽器呈現(xiàn)信息的第一個字節(jié)時，無論它是否是內容。背景顏色的變化（不是背景圖片的加載）并不令人滿意。用戶不能將其作為內容消費，因此不是FCP的示例。
First Paint可以與您的First Contentful Paint完全相同。但是您的FCP可能與您的First Paint不同。
小結
FCP是您網(wǎng)站的絕對重要指標。Google將頁面速度視為頁面排名最重要的方面之一。用戶將頁面速度視為他們是否留在您的網(wǎng)站上的決定因素之一。擁有較低的First Contentful Paint可以讓用戶留在您的網(wǎng)站上，并幫助他們首先找到您的網(wǎng)站。盡管FCP通常是一個難以確定和掌握的指標，但任何減少FCP時間的優(yōu)化都會增加用戶體驗，并減少網(wǎng)站整體加載時間的寶貴秒數(shù)和毫秒數(shù)。
網(wǎng)頁標題：什么是FCP以及如何針對您的網(wǎng)站優(yōu)化
轉載來于：http://m.fisionsoft.com.cn/article/cciijis.html
