什麼是首次輸入延遲 (FID)？以及如何為此優化您的網站？

為訪問者提供快速體驗對您網站的成功至關重要。但是，有多種方法可以衡量它的表現如何。其中之一是首次輸入延遲 (FID)，它測量用戶首次與您的網站互動到他們的瀏覽器響應該操作之間的時間量（以毫秒 (ms) 為單位）。

 

什麼是首次輸入延遲 (FID)？

正如我們提到的，FID（有時也稱為「輸入延遲」）是對訪問者與您的網站互動和瀏覽器響應之間發生的時間的度量，以毫秒為單位。這是Chrome用戶體驗報告 中包含的重要指標。此外，它還是Core Web Vitals之一。這些是Google用來確定您網站的UX品質（進而確定其頁面排名）的指標。

 

在這種情況下，輸入或互動可以指範圍廣泛的動作。例如，它可能包括單擊連結、按下按鈕或選擇複選框。但是，當用戶滾動或放大頁面時，FID不適用，因為這些不需要在他們的瀏覽器和您的網站之間進行新的響應。

 

一些不同的因素會影響這個指標。用戶設備的速度和處理能力可能會產生影響。你無法控制。但是，您可以控制網頁的大小和複雜性。更具體地說，您可以控制您的網站使用了多少JavaScript。例如，如果您有許多以隨機順序加載的圖像或腳本，則可能會減慢整個過程並延遲用戶的響應。

 

即使您的網站具有可靠的FCP和LCP，首次輸入延遲也可能足夠長以導致它們反彈。他們可能會覺得您的網站反應遲鈍且速度緩慢。

 

簡而言之，FID用於確定頁面加載時的響應程度。也許很明顯，這個過程越快越好。因此，了解如何衡量您網站的FID以及如何提高分數非常重要。

 

如何測量FID

在開始優化FID分數之前，了解它目前的情況至關重要。理想情況下，為了提供可靠的用戶體驗 (UX)，您需要FID分數低於100 ms。

 

100毫秒或更少的分數被認為是好的，而100到300毫秒之間的分數有改進的空間。超過300 ms的FID分數很差。

 

要衡量您的FID，您可以使用Google PageSpeed Insights：

 

這是 Google 提供的免費工具，可通過多種方式測試您網站的性能。有了它，您可以觀察各種關鍵指標，包括FID。

 

請注意，FID有時可能難以衡量。那是因為它需要用戶輸入。但是，只要您最近在您的網站上有用戶互動，您就應該能夠通過PageSpeed Insights找到這個指標。

 

首先，在文本欄位中輸入您網站的URL，然後單擊「分析」按鈕。該工具完成對您的頁面的分析後，它將為您提供結果並為您的網站提供總體評分：

 

您可以在Field Data部分下找到First Input Delay (FID)指標。在稍低的「機會」部分下，您可以找到優化頁面和分數的建議。

 

我們還想指出，Google 將這些分數表示為欄位數據。這意味著訊息基於實際用戶互動，而不是模擬測試（稱為 實驗室數據或通過實驗室工具找到）。FID是非常主觀的，並且與用戶的真實互動密切相關，因此確保您使用的是現場數據很重要。模擬只能說明這麼多。

 

如何優化您的FID分數

現在您已了解FID分數是什麼以及如何衡量它，是時候看看如何實際改進它了。以下是一些可用於降低首次輸入延遲時間的提示和策略。

 

優化和縮小您的CSS和JavaScript程式碼

優化FID分數的最佳方法之一是壓縮和優化CSS和JavaScript程式碼。這樣做可以減小文件大小，進而提高響應能力。通過去除不必要的字符、空格和換行符，您可以減小文件大小，從而提高頁面速度並減少瀏覽器必須處理的進程數量。因此，您的FID較低。

 

一種快速而簡單的方法是使用線上工具，例如Minify Code。複製完整大小的程式碼，將其貼上到網站，網站將其縮小，然後將結果複製/貼上回網站。

 

您還可以使用程式碼編輯器手動縮小程式碼，儘管這可能會更複雜一些。但是，如果您有使用程式碼的經驗，則此方法可以為您提供更多控制權。

 

另一種策略是使用插件，例如Autooptimize或W3 Total Cache（或任何數量的其他插件）。

 

如果您沒有程式碼經驗並希望在您的網站上自動實施此修改，這對於WordPress用戶來說可能是一個可行的解決方案。此外，這些插件都提供了各種以優化為重點的功能，例如圖像和內容緩存。

 

將較長的JavaScript任務分解為較小的任務

長任務往往會阻塞主線程，並可能導致JavaScript膨脹，從而損害網站的響應能力。為了防止這種情況發生並在此過程中提高FID分數，您可以嘗試將這些任務分解為更小的異步任務。

 

解決此問題的最有效方法之一是程式碼拆分。簡而言之，這是一種用於僅分解和加載較小且必要的程式碼片段的技術，而不是一次加載一個大文件。您可以使用諸如Webpack 之類的工具來執行此操作。

 

減少第三方程式碼和非關鍵腳本的影響

如果您有太多的第三方腳本，可能會延遲您網站自身數據的執行。因此，為了優化您的FID分數，減少第三方程式碼的影響並刪除任何非關鍵的第三方腳本也是一個明智的想法。並推遲那些您無法刪除的內容。

 

在決定哪些腳本最重要時，問問自己哪些腳本在網站的 UX 中扮演著重要角色。例如，也許您可以刪除或延遲一些不是很必要的廣告或彈出窗口。您的用戶 是否需要首先看到電子郵件選擇，或者您可以將其推遲到他們以某種方式與網站互動之後？

 

您還可以查看PageSpeed Insights 報告的「機會」部分，了解有關減少未使用的JavaScript和CSS的更多訊息：

 

如果您單擊以展開這些部分中的任何一個，它將列出可能阻塞主線程的特定文件和任務。您還可以使用 Chrome DevTools查找未使用的JavaScript和 CSS。

 

在許多情況下，這些「阻止渲染」的資源會阻止頁面快速加載，這也會影響您的 FID。刪除和/或推遲它們不僅可以提高網站的互動性，還可以提高感知的響應能力和速度。

 

首次輸入延遲 (FID) 常見問題

在這一點上，您可能對FID是什麼、它在您網站的UX上的重要性以及如何改進它有了深入的了解。考慮到這一點，我們確實希望確保我們已經涵蓋了所有關鍵點。因此，讓我們回顧一些有關FID的常見問題。

 

FID如何適應我網站的整體性能？

 

從本質上講，FID衡量訪問者與您的網站的首次互動。它既是一個定量指標，也是一個感知指標，因為它會影響用戶對您網站的第一印象。您可以客觀地看到網站何時對用戶輸入做出響應，但基於用戶與網站的互動，您也可以看到他們認為它何時響應。

 

FID測量用戶進行的第一次互動與瀏覽器響應該操作所需的時間之間的時間。換句話說，該指標評估您的網站在仍在加載時的響應程度。速度越快，訪問者的體驗就越好。

 

此外，作為核心Web要素（與最大內容繪製 (LCP)和累積布局偏移 (CLS) 一起），FID在 Google 如何對您的網站進行排名方面發揮著重要作用。因此，除了您的用戶體驗，它還會影響您網站的搜尋引擎優化 (SEO)。許多改進FID的相同策略也會顯著降低您網站的整體性能。

 

如何測量我的FID？

有幾種不同的方法可以衡量您的FID分數。最快和最簡單的方法是通過 Google PageSpeed Insights 運行您的網站。該報告將詳細介紹一系列重要指標，包括 FID。它還將提供一些有關如何提高分數的建議。

 

此外，您可以使用其他一些工具來訪問您的FID分數。它們包括Chrome 用戶體驗報告、Google Search Console 的核心 Web Vitals 報告和Web Vitals JavaScript 庫。您可能還會發現GT Metrix和Pingdom 的速度測試等工具很有用。

 

如何提高我的FID分數？

 

改進您的FID有助於提高您網站的用戶體驗和 SEO 排名。通常，較差的FID分數可歸因於多種因素，包括：

 

重度 JavaScript

 

未使用的腳本

 

長JavaScript任務

 

長腳本文件

 

為了提高您的分數，您可以採取幾個步驟。其中包括縮小您網站的程式碼、刪除或延遲未使用的第三方腳本，以及將長JavaScript任務（和CSS文件）分解為較小的任務。

 

結論

您只有一次機會給您網站的訪問者留下積極的第一印象。這就是為什麼確保抓住一切機會優化FID分數很重要的原因。必須確保訪問者的第一次互動是快速的。

 

請記住，理想的FID分數是100毫秒或更小。如果您需要改進並縮短時間，上面討論的幾種策略（例如推遲未使用的 JavaScript、優化您的CSS和JavaScript程式碼，以及推遲/刪除渲染阻塞資源）無疑會縮短您的時間他們需要。