為訪問者提供快速載入體驗對您網站的成功至關重要。但是，有多種方法可以衡量它的表現如何。其中之一是首次輸入延遲 (FID)，它測量使用者首次與您的網站互動到他們的瀏覽器響應該操作之間的時間量（以毫秒 (ms) 為單位）。
在這篇文章中，我們將解釋FID是什麼以及如何測量它。我們還將討論怎樣才算好的FID分數，並與您進一步瞭解如何優化FID分數。最後，我們將總結一些常見問題。
什麼是首次輸入延遲 (FID)？
正如我們提到的，首次輸入延遲FID，英文全稱為First Input Delay（有時也稱為“Input Latency”）是對訪問者與您的網站互動和瀏覽器響應之間發生的時間的度量，以毫秒為單位。這是Chrome使用者體驗報告中包含的重要指標。此外，它還是Core Web Vitals之一。這些是Google用來確定您網站的UX質量（進而確定其頁面排名）的指標。
在這種情況下，輸入或互動可以指範圍廣泛的動作。例如，它可能包括單擊連結、按下按鈕或選擇覈取方塊。但是，當使用者滾動或放大頁面時，FID不適用，因為這些不需要在他們的瀏覽器和您的網站之間進行新的響應。
一些不同的因素會影響這個指標。使用者裝置的速度和處理能力可能會產生影響。你無法控制。但是，您可以控制網頁的大小和複雜性。更具體地說，您可以控制您的網站使用了多少JavaScript。例如，如果您有許多以隨機順序載入的影象或指令碼，則可能會減慢整個過程並延遲使用者的響應。
即使您的站點具有可靠的FCP和LCP，首次輸入延遲也可能足夠長以導致跳出率提高。他們可能會覺得您的網站反應遲鈍且速度緩慢。
簡而言之，FID用於確定頁面載入時的響應程度。也許很明顯，這個過程越快越好。因此，瞭解如何衡量您網站的FID以及如何提高分數非常重要。
如何測量FID
在開始優化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（優化建議）”部分下，您可以找到優化頁面和分數的建議。
我們還想指出，Google將這些分數表示為實測資料。這意味著資訊基於實際使用者互動，而不是模擬測試（稱為實驗室資料或通過實驗室工具找到）。FID是非常主觀的，並且與使用者的真實互動密切相關，因此確保您使用的是實測資料很重要。模擬只能說明這麼多。
如何優化您的FID分數
現在您已瞭解FID分數是什麼以及如何衡量它，是時候看看如何實際改進它了。以下是一些可用於降低首次輸入延遲時間的提示和策略。
優化、極簡化CSS和JavaScript程式碼
優化FID分數的最佳方法之一是壓縮和優化CSS和JavaScript程式碼。這樣做可以減小檔案大小，進而提高響應能力。通過去除不必要的字元、空格和換行符，您可以減小檔案大小，從而提高頁面速度並減少瀏覽器必須處理的程序數量。因此，您的FID較低。
你可以藉助工具幫助你極簡化您的程式碼。一種快速而簡單的方法是使用線上工具，例如Minify Code（類似的線上工具有非常多）。複製完整大小的程式碼，將其貼上到站點，站點將其縮小，然後將結果複製/貼上回站點。
您還可以使用程式碼編輯器手動縮小程式碼，儘管這可能會更復雜一些。但是，如果您有使用程式碼的經驗，則此方法可以為您提供更多控制權。
另一種策略是使用外掛，例如Autooptimize或W3 Total Cache。
如果您沒有程式碼經驗並希望在您的網站上自動實施此修改，這對於WordPress使用者來說可能是一個可行的解決方案。此外，這些外掛都提供了各種以優化為重點的功能，例如影象和內容快取。
將較長的JavaScript任務分解為較小的任務
長任務往往會阻塞主執行緒，並可能導致JavaScript體積膨脹，從而損害站點的響應能力。為了防止這種情況發生並在此過程中提高FID分數，您可以嘗試將這些任務分解為更小的非同步任務。
解決此問題的最有效方法之一是程式碼拆分。簡而言之，這是一種用於僅分解和載入較小且必要的程式碼片段的技術，而不是一次載入一個大檔案。您可以使用諸如Webpack之類的工具來執行此操作。
WordPress主題往往帶有自己的JS庫，使用者可能沒有專業知識或許可權來拆分程式碼並自行優化。
減少第三方程式碼和非關鍵指令碼的影響
如果您有太多的第三方指令碼，可能會延遲您網站自身資料的執行。因此，為了優化您的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的Core Web Vitals報告和Web Vitals JavaScript庫。您可能還會發現GT Metrix和Pingdom等速度測試工具很有用。
如何提高我的網站FID分數？
改進您的FID有助於提高您網站的使用者體驗和SEO排名。通常，較差的FID分數可歸因於多種因素，包括：
- 臃腫的JavaScript
- 未使用的指令碼
- 長JavaScript任務
- 長指令碼檔案
為了提高您的分數，您可以採取幾個步驟。其中包括縮小您網站的程式碼、刪除或延遲未使用的第三方指令碼，以及將長JavaScript（和CSS檔案）任務分解為較小的任務。
小結
您只有一次機會給您網站的訪問者留下積極的第一印象。這就是為什麼確保抓住一切機會優化FID分數很重要的原因。必須確保訪問者的第一次互動是快速的。
請記住，理想的FID分數是100毫秒或更小。如果您需要改進並縮短時間，我們上面討論的幾種策略（例如推遲未使用的JavaScript、優化您的CSS和JavaScript程式碼，以及推遲/刪除渲染阻塞資源），無疑會縮短他們需要載入的時間。
評論留言