日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),黃島企業(yè)網(wǎng)站建設(shè),黃島品牌網(wǎng)站建設(shè),網(wǎng)站定制,黃島網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,黃島網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

首次內(nèi)容繪制 (FCP) 是Google Core Web Vitals中最有意義的指標(biāo)之一。與其他繪制和加載指標(biāo)相比，F(xiàn)CP不是關(guān)于響應(yīng)時(shí)間的純技術(shù)指標(biāo)。FCP以用戶體驗(yàn)和他們?cè)诰W(wǎng)站上首先感知的內(nèi)容為中心，而不是后臺(tái)加載的內(nèi)容。通過優(yōu)化您網(wǎng)站的First Contentful Paint，您不僅可以加快整體加載時(shí)間并提高頁面速度評(píng)級(jí)，還可以從字面上向訪問者展示他們的請(qǐng)求正在處理中并且加載沒有停止。

在本教程中，我們將深入探討什么是First Contentful Paint，如何衡量和優(yōu)化它，并回答一些關(guān)于FCP的常見問題，以便您可以確保您的網(wǎng)站盡可能高效和可用。

什么是首次內(nèi)容繪制 (FCP)？

網(wǎng)站的首次內(nèi)容繪制是瀏覽器在您的頁面上呈現(xiàn)第一個(gè)DOM元素的時(shí)間。這包括圖像、畫布元素（非白色）或文本。通俗地說，F(xiàn)CP是指用戶可以看到頁面的某些部分發(fā)生變化。通常，這是作為標(biāo)題欄或背景圖像出現(xiàn)的。此元素可能不是從服務(wù)器呈現(xiàn)或加載的第一個(gè)元素，但它是用戶可以看到的第一個(gè)元素，因此它對(duì)您網(wǎng)站的UX至關(guān)重要。

網(wǎng)站在iframe 中包含的任何內(nèi)容都不會(huì)被FCP考慮在內(nèi)。也不是非內(nèi)容繪畫，例如背景顏色的變化。那是First Paint，而不是 First  Contentful Paint。

FCP是一個(gè)有趣的指標(biāo)。雖然您可以定量衡量它，但它也相對(duì)主觀。擁有快速的首次內(nèi)容繪制很重要，因?yàn)樗鼤?huì)使用戶感覺到您的網(wǎng)站正在快速加載。不管是不是真的。您的站點(diǎn)的首次交互延遲（用戶可以與站點(diǎn)互動(dòng)的時(shí)間）可能比競(jìng)爭(zhēng)對(duì)手長(zhǎng)得多，但由于您的FCP更快，因此在用戶看來它可能更快。

也就是說，F(xiàn)CP并不是要欺騙您的用戶。較低的FCP時(shí)間通常是頁面速度的良好指標(biāo)，優(yōu)化它的方法也會(huì)影響其他頁面速度指標(biāo)（例如最大內(nèi)容繪制）。

如何測(cè)量FCP

盡管FCP由于用戶感知而很重要，但它是一個(gè)可以衡量和評(píng)分的可量化指標(biāo)。盡管如此，您可以使用這些工具來指示FCP在現(xiàn)場(chǎng)（對(duì)真實(shí)用戶）與實(shí)驗(yàn)室（用于測(cè)試目的的模擬頁面加載）的影響。

什么是好的FCP評(píng)分？

在您深入研究用于檢查FCP的各種工具之前，您需要了解什么才是好的FCP分?jǐn)?shù)。從Google關(guān)于確定指標(biāo)分?jǐn)?shù)的文檔中，我們可以看到他們將FCP時(shí)間分為三類——好、需要改進(jìn)和差——并討論了他們?nèi)绾螌?shí)現(xiàn)Lighthouse工具使用的百分位評(píng)分。

• 好– 在 0 秒到 1.8 秒之間
• 需要改進(jìn)– 在 1.8 秒到 3 秒之間
• 差– 超過 3 秒

下面，我們列出了各種工具，您可以使用這些工具查看您的網(wǎng)站屬于這些類別中的哪些類別。

現(xiàn)場(chǎng)工具

現(xiàn)場(chǎng)工具是您可以用來跟蹤頁面對(duì)用戶的顯示方式的工具。真實(shí)用戶。這些工具不依賴于API和關(guān)于您網(wǎng)站的假設(shè)。它們直接在您的服務(wù)器上實(shí)時(shí)運(yùn)行，以便您盡可能獲得最準(zhǔn)確和最新的信息。

Google在https://web.dev上的FCP文檔顯示這些是確定FCP的最佳現(xiàn)場(chǎng)工具：

• PageSpeed Insights
• Chrome用戶體驗(yàn)報(bào)告
• Search Console（速度報(bào)告）
• Web Vitals JavaScript 庫(kù)

此外，也許最好的工具是真實(shí)用戶監(jiān)控 (RUM)。這是您跟蹤和觀看真實(shí)用戶與您的網(wǎng)站互動(dòng)的地方。您可以使用上面列出的工具定量跟蹤他們的加載時(shí)間，然后您可以直接從他們那里獲得他們對(duì)FCP和您的頁面加載速度的主觀看法。就FCP的最完整視圖及其對(duì)訪問者的影響而言，RUM絕對(duì)是榜首。然而，它也是最復(fù)雜和最難進(jìn)行的。

實(shí)驗(yàn)室工具

用于FCP檢測(cè)的實(shí)驗(yàn)室工具傾向于模擬理想情況下 FCP 的結(jié)果。Google推薦的這些實(shí)驗(yàn)室工具不是在實(shí)際情況下發(fā)生延遲、帶寬、網(wǎng)絡(luò)擁塞和其他障礙的情況，而是讓您了解您的網(wǎng)站在最佳運(yùn)行時(shí)的表現(xiàn)。

• Lighthouse
• Chrome開發(fā)者工具
• PageSpeed Insights

此外，當(dāng)您正在開發(fā)尚未投入生產(chǎn)的網(wǎng)站時(shí)，不可能在實(shí)際條件下對(duì)其進(jìn)行測(cè)試。使用實(shí)驗(yàn)室工具還可以幫助您在項(xiàng)目整個(gè)開發(fā)周期中創(chuàng)建基準(zhǔn)和里程碑。

如何優(yōu)化網(wǎng)站FCP分?jǐn)?shù)

上面的工具可以為您提供網(wǎng)站速度和FCP的概述和分?jǐn)?shù)，當(dāng)然。但它們——以及GT Metrix和Pingdom等其他網(wǎng)站測(cè)速工具——也讓您深入了解如何優(yōu)化FCP分?jǐn)?shù)并使其繪制速度更快。我們將概述如何修復(fù)首次內(nèi)容繪制時(shí)間的一些最常見步驟，以便您知道如何解決測(cè)試和工具拍攝的任何問題。

移除渲染阻塞資源

這可能是降低FCP時(shí)間的第一個(gè)頁面因素。呈現(xiàn)阻塞資源是您的網(wǎng)頁必須呈現(xiàn)的網(wǎng)站上的文件。其中包括HTML、JavaScript、字體和CSS 文件。使它們“呈現(xiàn)阻塞”的是它們優(yōu)先于頁面上的任何其他內(nèi)容，在完成之前停止其他任何內(nèi)容的加載過程。任何圖像、純文本或其他面向用戶的內(nèi)容都將被擱置，直到重要文件完成。

這種持有導(dǎo)致FCP急劇增加，原因有兩個(gè)：

• 渲染阻塞文件通常很大
• 渲染阻塞文件通常不包含站點(diǎn)內(nèi)容，只包含結(jié)構(gòu)和格式

通過從關(guān)鍵渲染路徑中移除這些資源，您可以為內(nèi)容豐富的繪畫開辟空間。您可以延遲資源的加載，避免對(duì)CSS使用@import（改為對(duì)條件CSS使用@media），并確保極簡(jiǎn)化和合并您的CSS、HTML和JavaScript文件（我們將在本文后面討論）。

WordPress用戶可以使用緩存插件（如WP Rocket）中找到一些渲染阻止選項(xiàng)，啟用這些選項(xiàng)也有助于減少FCP時(shí)間?；蛘邊⒖既绾我瞥枞秩镜腏avaScript和CSS進(jìn)一步對(duì)WordPress進(jìn)行優(yōu)化。

在字體加載之前和期間顯示文本

您是否見過這樣的網(wǎng)站，當(dāng)所有其他內(nèi)容已經(jīng)存在時(shí)，頁面上的所有文本都會(huì)神奇地同時(shí)出現(xiàn)？

那是因?yàn)闉g覽器隱藏了它。網(wǎng)站的文本內(nèi)容在準(zhǔn)備好閱讀之前不會(huì)加載。文本通常只有少量字節(jié)的內(nèi)容。但是在許多站點(diǎn)上，加載時(shí)間可能會(huì)呈指數(shù)級(jí)增長(zhǎng)。因?yàn)樽煮w文件還沒有“準(zhǔn)備好”顯示。在擁有極快的 FCP 時(shí)間的所有方法中，繪制您網(wǎng)站的文本內(nèi)容可能是最好的。

您可以使用各種字體顯示參數(shù)，您可以告訴瀏覽器立即使用系統(tǒng)字體加載站點(diǎn)的文本，然后在加載后將其替換為您指定的顯示字體。

文本內(nèi)容的文件大小很小，通常只有幾個(gè)字節(jié)，并且通過告訴瀏覽器立即顯示它有可能使您的FCP幾乎不存在。只需將font-display:swap添加 到您擁有的任何@font-face CSS。僅此一項(xiàng)就可以解決很多首次內(nèi)容繪制時(shí)間問題。

極簡(jiǎn)化HTML、CSS和 avaScript

極簡(jiǎn)化是從您網(wǎng)站的HTML、CSS和JavaScript文件中去除無關(guān)的字符（例如空格）。雖然間距使人類更容易閱讀和解析，但瀏覽器和服務(wù)器不需要它們。這些空格仍然是占用字節(jié)的字符。通過縮小 CSS 文件之類的內(nèi)容，您可以減小頁面大小。這提高了頁面速度并縮短了 FCP 的時(shí)間。

“WordPress網(wǎng)站CSS、JavaScript和HTML文件瘦身壓縮教程”深入講解如何進(jìn)行執(zhí)行極簡(jiǎn)化操作。

移除未使用的CSS

如果您的樣式表中有未被使用的代碼，那么為什么要保留它呢？應(yīng)刪除任何舊的或未使用的代碼，以免每次請(qǐng)求您的網(wǎng)站時(shí)都加載它。Chrome DevTools（我們?cè)谏厦骀溄拥剑┛梢栽?em>Coverage選項(xiàng)卡下向 您顯示CSS的哪些部分正在加載但未呈現(xiàn)。

移除WordPress未使用的CSS，對(duì)于一般站長(zhǎng)來說，最好的方式是通過插件來實(shí)現(xiàn)！

減少首字節(jié)時(shí)間 (TTFB)

本質(zhì)上，TTFB 是將數(shù)據(jù)的第一個(gè)字節(jié)傳輸?shù)綖g覽器的時(shí)間。FCP取決于這個(gè)指標(biāo)，所以它越快，你的First Contentful Paint就越快。減少TTFB和加快頁面速度的最佳方法非常簡(jiǎn)單：

• 使用優(yōu)質(zhì)服務(wù)器主機(jī)
• 通過CDN交付內(nèi)容
• 啟用瀏覽器緩存（使用WP Rocket等插件）

確保這三個(gè)元素得到充分照顧可以顯著降低TTFB，進(jìn)而降低您的FCP。

保持你的DOM尺寸小

這可能是一個(gè)噱頭。但通常情況下，快速進(jìn)行首次內(nèi)容繪制的最大限制因素之一是DOM過大。你試圖立即做太多事情。谷歌表示“最佳Doom規(guī)模應(yīng)小于32個(gè)元素和少于60個(gè)子/父元素。”

為了給訪問者留下深刻印象，我們中的許多人將主頁和登錄頁面過度復(fù)雜化。但是，這些添加的元素會(huì)使DOM膨脹并導(dǎo)致更高的FCP時(shí)間。您可以通過減少使用的CSS選擇器的數(shù)量來幫助實(shí)現(xiàn)這一點(diǎn)，也許使用比ID或特殊媒體查詢更多的基于類的CSS。偽選擇器也會(huì)使事情復(fù)雜化并增加DOM的大小。

除此之外，您還可以減少選擇器適用的元素?cái)?shù)量。加載和應(yīng)用樣式5元素所需的時(shí)間比10元素少。對(duì)于較舊和過時(shí)的瀏覽器尤其如此，盡管我們盡了最大努力，人們?nèi)匀幻刻於荚谑褂谩?/p>

使用SVG或WebP圖像

這可能不會(huì)影響每個(gè)人的網(wǎng)站，這就是為什么我們將其最后列入列表的原因。圖像通常不是首先繪制到頁面上的東西，尤其是在文本或附加框架上，但顯著降低重要/突出圖像（例如您的站點(diǎn)徽標(biāo)）的文件大小可能有助于FCP。

雖然.gif、.jpg和 .png是您使用的最常見的圖像文件，但如果將它們轉(zhuǎn)換為.webp或.svg文件，您將節(jié)省大量時(shí)間。有時(shí)文件大小在 字節(jié)范圍內(nèi)而不是 千字節(jié)，您的圖像將在眨眼間加載。如果您是 WordPress 用戶，5.8版內(nèi)置了.webp支持，此前我們也撰寫過關(guān)于WordPress使用SVG圖像的文章。

最有可能的是，與FCP相比，這種方法對(duì)您的最大內(nèi)容繪制 (LCP) 的影響更大，但足夠小的SVG徽標(biāo)肯定會(huì)成為您的用戶首先看到的東西。

影響網(wǎng)站FCP分?jǐn)?shù)是方方面面的，如果你著迷于WordPress網(wǎng)站速度優(yōu)化，建議你閱讀“如何做到Google PageSpeed Insights測(cè)試滿分”一文。

FCP常見問題

FCP如何適應(yīng)我網(wǎng)站的整體性能？

作為網(wǎng)站性能的直接指標(biāo)，不是很多。FCP是一種以用戶為中心的感知指標(biāo)，并不一定代表網(wǎng)站性能。正如我們?cè)谖恼虑懊嫣岬降模瑑蓚€(gè)網(wǎng)站的加載時(shí)間可能完全相同，但FCP時(shí)間較短的網(wǎng)站可能會(huì)被 視為更快。這種看法會(huì)影響用戶體驗(yàn)，如果不是整體網(wǎng)站性能。

然而，為了將整體網(wǎng)站性能提升到更高水平，F(xiàn)irst Contentful Paint是一個(gè)很好的衡量標(biāo)準(zhǔn)。您為降低FCP而采取的任何操作也會(huì)降低您的整體頁面速度。所以你幾乎可以把它當(dāng)作你整體表現(xiàn)的一個(gè)信號(hào)。

較低的FCP時(shí)間通常不會(huì)與較高的整體加載時(shí)間一致，因此如果您需要使用單一指標(biāo)來查看您的立場(chǎng)，F(xiàn)CP可以成為一個(gè)很好的路標(biāo)。您還可以將其與LCP或最大的內(nèi)容繪制配對(duì)，以更全面地了解用戶在訪問您的網(wǎng)站的前幾秒鐘看到的內(nèi)容。

First Paint和First Contentful Paint有什么區(qū)別？

盡管這兩個(gè)術(shù)語有時(shí)可以互換使用，但從技術(shù)上講，它們是兩個(gè)不同的指標(biāo)。正如我們所討論的，F(xiàn)irst Contentful Paint是當(dāng)瀏覽器呈現(xiàn)頁面上的第一個(gè)DOM元素時(shí)。您可以將其視為頁面上任何可用（如果不是交互式）內(nèi)容。例如，背景圖像、文本或標(biāo)題菜單div。

然而，F(xiàn)irst Paint是瀏覽器呈現(xiàn)信息的第一個(gè)字節(jié)時(shí)，無論它是否是內(nèi)容。背景顏色的變化（不是背景圖片的加載）并不令人滿意。用戶不能將其作為內(nèi)容消費(fèi)，因此不是FCP的示例。

First Paint可以與您的First Contentful Paint完全相同。但是您的FCP可能與您的First Paint不同。

小結(jié)

FCP是您網(wǎng)站的絕對(duì)重要指標(biāo)。Google將頁面速度視為頁面排名最重要的方面之一。用戶將頁面速度視為他們是否留在您的網(wǎng)站上的決定因素之一。擁有較低的First Contentful Paint可以讓用戶留在您的網(wǎng)站上，并幫助他們首先找到您的網(wǎng)站。盡管FCP通常是一個(gè)難以確定和掌握的指標(biāo)，但任何減少FCP時(shí)間的優(yōu)化都會(huì)增加用戶體驗(yàn)，并減少網(wǎng)站整體加載時(shí)間的寶貴秒數(shù)和毫秒數(shù)。

網(wǎng)站名稱：什么是FCP以及如何針對(duì)您的網(wǎng)站優(yōu)化
新聞來源：http://www.5511xx.com/article/cciijis.html