為訪問者提供快速體驗對您網站的成功至關重要。但是，有多種方法可以衡量它的表現如何。其中之一是首次輸入延遲 (FID)，它測量用戶首次與您的網站交互到他們的瀏覽器響應該操作之間的時間量（以毫秒 (ms) 為單位）。
在這篇文章中，我們將解釋 FID 是什麼以及如何測量它。我們還將討論什麼是好的 FID 分數，並引導您了解如何優化您的分數。最後，我們將總結一些常見問題。讓我們開始吧！
什麼是首次輸入延遲 (FID)？
正如我們提到的，FID（有時也稱為「輸入延遲」）是對訪問者與您的網站交互和瀏覽器響應之間發生的時間的度量，以毫秒為單位。這是Chrome 用戶體驗報告 中包含的重要指標。此外，它還是Core Web Vitals 之一。這些是 Google 用來確定您網站的 UX 質量（進而確定其頁面排名）的指標。
在這種情況下，輸入或交互可以指範圍廣泛的動作。例如，它可能包括單擊鏈接、按下按鈕或選擇複選框。但是，當用戶滾動或放大頁面時，FID 不適用，因為這些不需要在他們的瀏覽器和您的網站之間進行新的響應。
一些不同的因素會影響這個指標。用戶設備的速度和處理能力可能會產生影響。你無法控制。但是，您可以控制網頁的大小和複雜性。更具體地說，您可以控制您的網站使用了多少 JavaScript。例如，如果您有許多以隨機順序載入的圖像或腳本，則可能會減慢整個過程並延遲用戶的響應。
即使您的站點具有可靠的FCP和LCP，首次輸入延遲也可能足夠長以導致它們反彈。他們可能會覺得您的網站反應遲鈍且速度緩慢。
簡而言之，FID 用於確定頁面載入時的響應程度。也許很明顯，這個過程越快越好。因此，了解如何衡量您網站的 FID 以及如何提高分數非常重要。
如何測量 FID
在開始優化您的 FID 分數之前，了解它目前的情況至關重要。理想情況下，為了提供可靠的用戶體驗 (UX)，您需要FID 分數低於 100 毫秒。
100 毫秒或更少的分數被認為是好的，而 100 到 300 毫秒之間的分數有改進的空間。超過 300 毫秒的 FID 分數是很差的。
要衡量您的 FID，您可以使用Google PageSpeed Insights：
這是 Google 提供的免費工具，可通過多種方式測試您網站的性能。有了它，您可以觀察各種關鍵指標，包括 FID。
請注意，FID 有時可能難以衡量。那是因為它需要用戶輸入。但是，只要您最近在您的網站上有用戶互動，您就應該能夠通過 PageSpeed Insights 找到該指標。
首先，在文本欄位中輸入您站點的 URL，然後單擊「分析」按鈕。該工具完成對您的頁面的分析後，它將為您提供結果並為您的網站提供總體評分：
您可以在 Field Data 部分下找到 First Input Delay (FID) 指標。在稍低的「機會」部分下，您可以找到優化頁面和分數的建議。
我們還想指出，谷歌將這些分數表示為現場數據。這意味著信息基於實際用戶交互，而不是模擬測試（稱為實驗室數據或通過實驗室工具找到）。FID 是非常主觀的，並且與用戶的真實交互密切相關，因此確保您使用的是現場數據很重要。模擬只能說明這麼多。
如何優化您的 FID 分數
現在您已了解 FID 分數是什麼以及如何衡量它，是時候看看如何實際改進它了。以下是一些可用於降低首次輸入延遲時間的提示和策略。
優化和縮小您的 CSS 和 JavaScript 代碼
優化 FID 分數的最佳方法之一是壓縮和優化 CSS 和 JavaScript 代碼。這樣做可以減小文件大小，進而提高響應能力。通過去除不必要的字元、空格和換行符，您可以減小文件大小，從而提高頁面速度並減少瀏覽器必須處理的進程數量。因此，您的 FID 較低。
Divi用戶也應該知道，主題從一開始就會自動縮小 HTML、JavaScript 和 CSS。只需激活主題即可壓縮所有這些代碼，以便您的 FID 處於比以前更好的位置。
如果您不是 Divi 用戶，您有幾個選項可以縮小您的代碼。一種快速而簡單的方法是使用在線工具，例如Minify Code。複製完整大小的代碼，將其粘貼到站點，站點將其縮小，然後將結果複製/粘貼回站點。
您還可以使用代碼編輯器手動縮小代碼，儘管這可能會更複雜一些。但是，如果您有使用代碼的經驗，則此方法可以為您提供更多控制權。
另一種策略是使用插件，例如Autooptimize或W3 Total Cache（或任何數量的其他插件）。
如果您沒有代碼經驗並希望在您的網站上自動實施此修改，這對於 WordPress 用戶來說可能是一個可行的解決方案。此外，這些插件都提供了各種以優化為重點的功能，例如圖像和內容緩存。
將較長的 JavaScript 任務分解為較小的任務
長任務往往會阻塞主線程，並可能導致 JavaScript 膨脹，從而損害站點的響應能力。為了防止這種情況發生並在此過程中提高 FID 分數，您可以嘗試將這些任務分解為更小的非同步任務。
解決此問題的最有效方法之一是代碼拆分。簡而言之，這是一種用於僅分解和載入較小且必要的代碼段的技術，而不是一次載入一個大文件。您可以使用諸如Webpack 之類的工具來執行此操作。
Divi 用戶在這方面也受益匪淺，因為重大的性能更新將主題大型 JavaScript 庫分開，僅在需要時載入它們。這應該會減少幾乎所有 Divi 站點上的 FID。WordPress 主題往往帶有自己的 JS 庫，用戶可能不具備拆分代碼並自行優化的專業知識或許可權。我們想讓 Divi 解決這個問題。
減少第三方代碼和非關鍵腳本的影響
如果您有太多的第三方腳本，它可能會延遲您網站自身數據的執行。因此，為了優化您的 FID 分數，減少第三方代碼的影響並刪除任何非關鍵的第三方腳本也是一個明智的想法。並推遲那些您無法刪除的內容。
在決定哪些腳本最重要時，問問自己哪些腳本在網站的 UX 中扮演重要角色。例如，也許您可以刪除或延遲一些不是很必要的廣告或彈出窗口。您的用戶是否需要首先看到電子郵件選擇，或者您可以將其推遲到他們以某種方式與網站交互之後？
您還可以查看 PageSpeed Insights 報告的「機會」部分，了解有關減少未使用的 JavaScript 和 CSS 的更多信息：
如果您單擊以展開這些部分中的任何一個，它將列出可能阻塞主線程的特定文件和任務。您還可以使用 Chrome DevTools查找未使用的 JavaScript 和 CSS。
在許多情況下，這些「阻止渲染」的資源會阻止頁面快速載入，這也會影響您的 FID。刪除和/或推遲它們不僅可以提高站點的交互性，還可以提高感知的響應能力和速度。
Divi 具有用於推遲像這樣的非關鍵腳本的切換。在主題選項中，您可以選擇延遲 jQuery 腳本並採用內嵌 CSS 延遲，當與主題的關鍵 CSS 功能結合使用時，將刪除所有阻止渲染的 CSS。您還可以切換 Google Fonts 和 Gutenberg 編輯器樣式表延遲。所有這些都被視為「渲染阻塞」，因此Elegant Themes 成員幾乎會立即看到 FID 分數的提高。
首次輸入延遲 (FID) 常見問題
在這一點上，您可能對 FID 是什麼、它在您網站的用戶體驗中的重要性以及如何改進它有了深入的了解。考慮到這一點，我們確實希望確保我們已經涵蓋了所有關鍵點。因此，讓我們回顧一些有關 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 代碼，以及推遲/刪除渲染阻塞資源）無疑會縮短您的時間他們需要。
您對 FID 有任何疑問嗎？在下面的評論部分讓我們知道！