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