建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
太谷網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司于2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。
為訪(fǎng)問(wèn)者提供快速加載體驗(yàn)對(duì)您網(wǎng)站的成功至關(guān)重要。但是，有多種方法可以衡量它的表現(xiàn)如何。其中之一是首次輸入延遲 (FID)，它測(cè)量用戶(hù)首次與您的網(wǎng)站交互到他們的瀏覽器響應(yīng)該操作之間的時(shí)間量（以毫秒 (ms) 為單位）。
在這篇文章中，我們將解釋FID是什么以及如何測(cè)量它。我們還將討論怎樣才算好的FID分?jǐn)?shù)，并與您進(jìn)一步了解如何優(yōu)化FID分?jǐn)?shù)。最后，我們將總結(jié)一些常見(jiàn)問(wèn)題。
什么是首次輸入延遲 (FID)？
正如我們提到的，首次輸入延遲FID，英文全稱(chēng)為First Input Delay（有時(shí)也稱(chēng)為“Input Latency”）是對(duì)訪(fǎng)問(wèn)者與您的網(wǎng)站交互和瀏覽器響應(yīng)之間發(fā)生的時(shí)間的度量，以毫秒為單位。這是Chrome用戶(hù)體驗(yàn)報(bào)告中包含的重要指標(biāo)。此外，它還是Core Web Vitals之一。這些是Google用來(lái)確定您網(wǎng)站的UX質(zhì)量（進(jìn)而確定其頁(yè)面排名）的指標(biāo)。
在這種情況下，輸入或交互可以指范圍廣泛的動(dòng)作。例如，它可能包括單擊鏈接、按下按鈕或選擇復(fù)選框。但是，當(dāng)用戶(hù)滾動(dòng)或放大頁(yè)面時(shí)，F(xiàn)ID不適用，因?yàn)檫@些不需要在他們的瀏覽器和您的網(wǎng)站之間進(jìn)行新的響應(yīng)。
一些不同的因素會(huì)影響這個(gè)指標(biāo)。用戶(hù)設(shè)備的速度和處理能力可能會(huì)產(chǎn)生影響。你無(wú)法控制。但是，您可以控制網(wǎng)頁(yè)的大小和復(fù)雜性。更具體地說(shuō)，您可以控制您的網(wǎng)站使用了多少JavaScript。例如，如果您有許多以隨機(jī)順序加載的圖像或腳本，則可能會(huì)減慢整個(gè)過(guò)程并延遲用戶(hù)的響應(yīng)。
即使您的站點(diǎn)具有可靠的FCP和LCP，首次輸入延遲也可能足夠長(zhǎng)以導(dǎo)致跳出率提高。他們可能會(huì)覺(jué)得您的網(wǎng)站反應(yīng)遲鈍且速度緩慢。
簡(jiǎn)而言之，F(xiàn)ID用于確定頁(yè)面加載時(shí)的響應(yīng)程度。也許很明顯，這個(gè)過(guò)程越快越好。因此，了解如何衡量您網(wǎng)站的FID以及如何提高分?jǐn)?shù)非常重要。
如何測(cè)量FID
在開(kāi)始優(yōu)化FID分?jǐn)?shù)之前，了解它目前的情況至關(guān)重要。理想情況下，為了提供可靠的用戶(hù)體驗(yàn) (UX)，您需要FID分?jǐn)?shù)低于100ms。
100毫秒或更少的分?jǐn)?shù)被認(rèn)為是好的，而100到300毫秒之間的分?jǐn)?shù)有改進(jìn)的空間。超過(guò)300ms 的FID分?jǐn)?shù)很差。
要衡量您的FID，您可以使用Google PageSpeed Insights：
這是Google提供的免費(fèi)工具，可通過(guò)多種方式測(cè)試您網(wǎng)站的性能。有了它，您可以觀察各種關(guān)鍵指標(biāo)，包括FID。
請(qǐng)注意，F(xiàn)ID有時(shí)可能難以衡量。那是因?yàn)樗枰脩?hù)輸入。但是，只要您最近在您的網(wǎng)站上有用戶(hù)互動(dòng)，您就應(yīng)該能夠通過(guò)PageSpeed Insights找到此指標(biāo)。
首先，在文本字段中輸入您站點(diǎn)的URL，然后單擊“Analyze（分析）”按鈕。該工具完成對(duì)您的頁(yè)面的分析后，它將為您提供結(jié)果并為您的網(wǎng)站提供總體評(píng)分：
您可以在Field Data（實(shí)測(cè)數(shù)據(jù)）部分下找到First Input Delay (FID)指標(biāo)。在稍低的“Opportunities（優(yōu)化建議）”部分下，您可以找到優(yōu)化頁(yè)面和分?jǐn)?shù)的建議。
我們還想指出，Google將這些分?jǐn)?shù)表示為實(shí)測(cè)數(shù)據(jù)。這意味著信息基于實(shí)際用戶(hù)交互，而不是模擬測(cè)試（稱(chēng)為實(shí)驗(yàn)室數(shù)據(jù)或通過(guò)實(shí)驗(yàn)室工具找到）。FID是非常主觀的，并且與用戶(hù)的真實(shí)交互密切相關(guān)，因此確保您使用的是實(shí)測(cè)數(shù)據(jù)很重要。模擬只能說(shuō)明這么多。
如何優(yōu)化您的FID分?jǐn)?shù)
現(xiàn)在您已了解FID分?jǐn)?shù)是什么以及如何衡量它，是時(shí)候看看如何實(shí)際改進(jìn)它了。以下是一些可用于降低首次輸入延遲時(shí)間的提示和策略。
優(yōu)化、極簡(jiǎn)化CSS和JavaScript代碼
優(yōu)化FID分?jǐn)?shù)的最佳方法之一是壓縮和優(yōu)化CSS和JavaScript代碼。這樣做可以減小文件大小，進(jìn)而提高響應(yīng)能力。通過(guò)去除不必要的字符、空格和換行符，您可以減小文件大小，從而提高頁(yè)面速度并減少瀏覽器必須處理的進(jìn)程數(shù)量。因此，您的FID較低。
你可以借助工具幫助你極簡(jiǎn)化您的代碼。一種快速而簡(jiǎn)單的方法是使用在線(xiàn)工具，例如Minify Code（類(lèi)似的在線(xiàn)工具有非常多）。復(fù)制完整大小的代碼，將其粘貼到站點(diǎn)，站點(diǎn)將其縮小，然后將結(jié)果復(fù)制/粘貼回站點(diǎn)。
您還可以使用代碼編輯器手動(dòng)縮小代碼，盡管這可能會(huì)更復(fù)雜一些。但是，如果您有使用代碼的經(jīng)驗(yàn)，則此方法可以為您提供更多控制權(quán)。
另一種策略是使用插件，例如Autooptimize或W3 Total Cache。
如果您沒(méi)有代碼經(jīng)驗(yàn)并希望在您的網(wǎng)站上自動(dòng)實(shí)施此修改，這對(duì)于WordPress用戶(hù)來(lái)說(shuō)可能是一個(gè)可行的解決方案。此外，這些插件都提供了各種以?xún)?yōu)化為重點(diǎn)的功能，例如圖像和內(nèi)容緩存。
將較長(zhǎng)的JavaScript任務(wù)分解為較小的任務(wù)
長(zhǎng)任務(wù)往往會(huì)阻塞主線(xiàn)程，并可能導(dǎo)致JavaScript體積膨脹，從而損害站點(diǎn)的響應(yīng)能力。為了防止這種情況發(fā)生并在此過(guò)程中提高FID分?jǐn)?shù)，您可以嘗試將這些任務(wù)分解為更小的異步任務(wù)。
解決此問(wèn)題的最有效方法之一是代碼拆分。簡(jiǎn)而言之，這是一種用于僅分解和加載較小且必要的代碼片段的技術(shù)，而不是一次加載一個(gè)大文件。您可以使用諸如Webpack之類(lèi)的工具來(lái)執(zhí)行此操作。
WordPress主題往往帶有自己的JS庫(kù)，用戶(hù)可能沒(méi)有專(zhuān)業(yè)知識(shí)或權(quán)限來(lái)拆分代碼并自行優(yōu)化。
減少第三方代碼和非關(guān)鍵腳本的影響
如果您有太多的第三方腳本，可能會(huì)延遲您網(wǎng)站自身數(shù)據(jù)的執(zhí)行。因此，為了優(yōu)化您的FID分?jǐn)?shù)，減少第三方代碼的影響并刪除任何非關(guān)鍵的第三方腳本也是一個(gè)明智的想法。并推遲那些您無(wú)法刪除的內(nèi)容。
在決定哪些腳本最重要時(shí)，問(wèn)問(wèn)自己哪些腳本在網(wǎng)站的UX中扮演著重要角色。例如，也許您可??以刪除或延遲一些不是很必要的廣告或彈出窗口。您的用戶(hù) 是否需要首先看到電子郵件選擇，或者您可以將其推遲到他們以某種方式與網(wǎng)站交互之后？
您還可以查看PageSpeed Insights報(bào)告的“優(yōu)化建議”部分，了解有關(guān)減少未使用的JavaScript和CSS的更多信息：
如果您單擊以展開(kāi)這些部分中的任何一個(gè)，它將列出可能阻塞主線(xiàn)程的特定文件和任務(wù)。您還可以使用Chrome DevTools查找未使用的JavaScript和CSS。
在許多情況下，這些“阻塞渲染”的資源會(huì)阻止頁(yè)面快速加載，這也會(huì)影響您的FID。刪除和/或推遲它們不僅可以提高站點(diǎn)的交互性，還可以提高感知的響應(yīng)能力和速度。
推薦閱讀：如何移除阻塞渲染的JavaScript和CSS
首次輸入延遲 (FID) 常見(jiàn)問(wèn)題
在這一點(diǎn)上，您可能對(duì)FID是什么、它在您網(wǎng)站的UX上的重要性以及如何改進(jìn)它有了深入的了解。考慮到這一點(diǎn)，我們確實(shí)希望確保我們已經(jīng)涵蓋了所有關(guān)鍵點(diǎn)。因此，讓我們回顧一些有關(guān)FID的常見(jiàn)問(wèn)題。
FID如何影響我網(wǎng)站的性能？
從本質(zhì)上講，F(xiàn)ID衡量訪(fǎng)問(wèn)者與您的網(wǎng)站的首次互動(dòng)。它既是一個(gè)定量指標(biāo)，也是一個(gè)感知指標(biāo)，因?yàn)樗鼤?huì)影響用戶(hù)對(duì)您網(wǎng)站的第一印象。您可以客觀地看到站點(diǎn)何時(shí)對(duì)用戶(hù)輸入做出響應(yīng)，但基于用戶(hù)與站點(diǎn)的交互，您也可以看到他們認(rèn)為它何時(shí)響應(yīng)。
FID 測(cè)量用戶(hù)進(jìn)行的第一次交互與瀏覽器響應(yīng)該操作所需的時(shí)間之間的時(shí)間。換句話(huà)說(shuō)，該指標(biāo)評(píng)估您的網(wǎng)站在仍在加載時(shí)的響應(yīng)程度。速度越快，訪(fǎng)問(wèn)者的體驗(yàn)就越好。
此外，作為核心Web要素（與最大內(nèi)容繪制 (LCP)和累積布局偏移 (CLS) 一起），F(xiàn)ID 在 Google 如何對(duì)您的網(wǎng)站進(jìn)行排名方面發(fā)揮著重要作用。因此，除了您的用戶(hù)體驗(yàn)，它還會(huì)影響您網(wǎng)站的搜索引擎優(yōu)化 (SEO)。許多改進(jìn)FID的相同策略也會(huì)顯著降低您網(wǎng)站的整體性能。
如何測(cè)量我的FID？
有幾種不同的方法可以衡量您的FID分?jǐn)?shù)。最快和最簡(jiǎn)單的方法是通過(guò)Google PageSpeed Insights運(yùn)行您的網(wǎng)站。該報(bào)告將詳細(xì)介紹一系列重要指標(biāo)，包括FID。它還將提供一些有關(guān)如何提高分?jǐn)?shù)的建議。
此外，您可以使用其他一些工具來(lái)訪(fǎng)問(wèn)您的FID分?jǐn)?shù)。它們包括Chrome用戶(hù)體驗(yàn)報(bào)告、Google Search Console的Core Web Vitals報(bào)告和Web Vitals JavaScript庫(kù)。您可能還會(huì)發(fā)現(xiàn)GT Metrix和Pingdom等速度測(cè)試工具很有用。
如何提高我的網(wǎng)站FID分?jǐn)?shù)？
改進(jìn)您的FID有助于提高您網(wǎng)站的用戶(hù)體驗(yàn)和SEO排名。通常，較差的FID分?jǐn)?shù)可歸因于多種因素，包括：
- 臃腫的JavaScript
- 未使用的腳本
- 長(zhǎng)JavaScript任務(wù)
- 長(zhǎng)腳本文件
為了提高您的分?jǐn)?shù)，您可以采取幾個(gè)步驟。其中包括縮小您網(wǎng)站的代碼、刪除或延遲未使用的第三方腳本，以及將長(zhǎng)JavaScript（和CSS文件）任務(wù)分解為較小的任務(wù)。
小結(jié)
您只有一次機(jī)會(huì)給您網(wǎng)站的訪(fǎng)問(wèn)者留下積極的第一印象。這就是為什么確保抓住一切機(jī)會(huì)優(yōu)化FID分?jǐn)?shù)很重要的原因。必須確保訪(fǎng)問(wèn)者的第一次互動(dòng)是快速的。
請(qǐng)記住，理想的FID分?jǐn)?shù)是100毫秒或更小。如果您需要改進(jìn)并縮短時(shí)間，我們上面討論的幾種策略（例如推遲未使用的JavaScript、優(yōu)化您的CSS和JavaScript代碼，以及推遲/刪除渲染阻塞資源），無(wú)疑會(huì)縮短他們需要加載的時(shí)間。
網(wǎng)站題目：什么是首次輸入延遲(FID)以及如何有針對(duì)性地優(yōu)化
標(biāo)題路徑：http://fisionsoft.com.cn/article/coosgdi.html
