首次輸入延遲 (FID) 是從用戶首次與頁面交互到頁面響應的時間。它衡量響應能力，是 Google 用于衡量頁面體驗的三個核心 Web Vitals 指標之一。

? ? ? ? ?

交互示例包括：

? ? ? ? ?

l單擊鏈接或按鈕。

l在空白字段中輸入文本。

l選擇下拉菜單。

l單擊復選框。

l某些事件（例如滾動或縮放）不計算在內。

? ? ? ? ?

讓我們看看您的 FID 應該有多快以及如何改進它。

什么是好的 FID 值？ ?

良好的 FID 值應小于 100 毫秒，并且應基于 Chrome 用戶體驗報告 (CrUX) 數(shù)據(jù)。這是來自您網(wǎng)站上并選擇共享此信息的 Chrome 實際用戶的數(shù)據(jù)。您需要 75% 的交互在 100 毫秒內做出響應。

? ? ? ? ?

您的頁面可能會被歸類為以下類別之一：

? ? ? ? ?

良好：<=100 毫秒

需要改進：>100 毫秒且 <=300 毫秒

較差：>300 毫秒

? ? ? ? ?

FID數(shù)據(jù)

截至 2023 年 4 月，95.3% 的網(wǎng)站處于良好的 FID 范圍內。這是整個網(wǎng)站的平均值。正如我們提到的，您需要 75% 的交互在 100 毫秒內做出響應才能在此處顯示良好。

? ? ? ? ?

大多數(shù)網(wǎng)站上的大部分頁面都通過了 FID 的 CWV 檢查。我不認為這確實是衡量響應能力的最佳方法，Google 將于 2024 年 3 月用 Interaction to Next Paint (INP) 取代 FID。INP 不是只查看第一個輸入，而是查看所有輸入的延遲。用戶進行的交互。

? ? ? ? ?

當我們對 Core Web Vitals 進行一項研究時，我們發(fā)現(xiàn)幾乎沒有人需要擔心桌面連接上的 FID，也很少有人需要擔心移動設備上的 FID。

? ? ? ? ?

很少有站點需要擔心 FID。

? ? ? ? ?

? ? ? ? ?

我們的研究中的頁面數(shù)據(jù)也一樣。FID 似乎并不是大多數(shù)頁面所關心的問題。

如何測量 FID ?

唯一重要的 FID 數(shù)字來自Chrome 用戶體驗報告 (CrUX)，該數(shù)據(jù)來自選擇共享其數(shù)據(jù)的 Chrome 真實用戶。?

? ? ? ? ?

這稱為現(xiàn)場數(shù)據(jù)，可以讓您更好地了解不同網(wǎng)絡條件、設備、緩存等情況下的真實 FID 性能。這也是 Google 實際衡量Core Web Vitals的依據(jù)。?

? ? ? ? ?

為了獲得一致、可重復的測試，還可以使用在相同條件下進行測試的實驗室數(shù)據(jù)。FID 在實驗室測試中不可用，因為測試工具不會單擊任何內容。但是，您可以使用總阻塞時間 (TBT) 作為替代指標。通過改進被阻止的流程，您也將改進您的 FID。?

測量單個 URL 的 FID ?

Pagespeed Insights會提取您無法在 CrUX 數(shù)據(jù)集中查詢的頁面級字段數(shù)據(jù)。它還為您提供原始數(shù)據(jù)，以便您可以將頁面性能與整個站點進行比較，并基于 Google Lighthouse運行實驗室測試，為您提供 TBT。

測量多個 URL 或整個網(wǎng)站的 FID ?

您可以在 Google Search Console 中獲取 CrUX 數(shù)據(jù)，這些數(shù)據(jù)分為良好、需要改進和較差的類別。

? ? ? ? ?

? ? ? ? ?

單擊其中一個問題即可查看受影響的頁面組的詳細信息。這些組是具有相似值且可能使用相同模板的頁面。您在模板中進行一次更改，該更改將在組中的各個頁面上得到修復。

? ? ? ? ?

如果您想要大規(guī)模的實驗室數(shù)據(jù)和現(xiàn)場數(shù)據(jù)，獲得這些數(shù)據(jù)的唯一方法是通過 PageSpeed Insights API。您可以通過 Ahrefs 的站點審核輕松連接到它，并獲取詳細說明您的績效的報告。對于擁有Ahrefs 網(wǎng)站管理員工具(AWT) 帳戶的經(jīng)過驗證的網(wǎng)站來說，這是免費的。

? ? ? ? ?

? ? ? ? ?

請注意，顯示的 Core Web Vitals 數(shù)據(jù)將由您在設置期間為爬網(wǎng)選擇的用戶代理確定。如果您從移動設備抓取，您將從 API 獲取移動 CWV 值。

是什么原因導致延遲？ ?

JavaScript 爭奪主線程。只有一個主線程，JavaScript 競爭在其上運行任務。

? ? ? ? ?

JavaScript 必須輪流在主線程上運行。這就像一個單眼爐子，您必須一次烹飪一項食物，但您要烹飪多種菜肴。

? ? ? ? ?

當任務運行時，頁面無法響應用戶輸入。這就是感受到的延遲。任務越長，用戶經(jīng)歷的延遲就越長。?

? ? ? ? ?

來源：web.dev。

? ? ? ? ?

任務之間的休息是頁面必須切換到用戶輸入任務并響應他們想要執(zhí)行的操作的機會。這在速度較慢的設備上會更糟，因為 JavaScript 可能需要更長的時間來處理并導致更長的延遲。

如何改進FID

在 PageSpeed Insights 中，您將看到一個 TBT 選項卡，其中存在與主線程被阻止相關的問題。為了改進 FID，您需要解決這些問題。?

大多數(shù)頁面都通過 FID 檢查。但是，如果您需要處理 FID，您可以處理以下幾項內容：?

1.減少JavaScript的數(shù)量 ?

如果您可以減少 JavaScript 的運行量，請先這樣做。在頁面加載的早期關注 JavaScript。如果沒有進行大量優(yōu)化，加載過程的早期部分可能會充滿大量 JavaScript，所有這些 JavaScript 都試圖在單個主線程上運行。

2. 如果可能的話稍后加載 JavaScript ?

任何不需要立即使用的 JavaScript 都應該稍后加載。有兩種主要方法可以做到這一點——延遲和異步屬性。這些屬性可以添加到您的腳本標簽中。

? ? ? ? ?

通常，正在下載的腳本在下載和執(zhí)行時會阻塞解析器。異步將使解析和下載同時發(fā)生，但在腳本執(zhí)行期間仍然阻止解析。Defer 在下載過程中不會阻止解析，只會在 HTML 解析完成后執(zhí)行。

你應該使用哪個？對于任何你想要的早點或有依賴關系的東西，我傾向于異步。?

? ? ? ? ?

例如，我傾向于在分析標簽上使用異步，以便記錄更多用戶。您需要將不需要的任何內容推遲到以后或沒有依賴項。添加屬性非常容易。?

? ? ? ? ?

查看這些示例：

普通的：

< src="https://www.domain.com/file.js">

異步：

< src="https://www.domain.com/file.js" async>

推遲：

< src="https://www.domain.com/file.js" defer>

3.分解長任務

另一種選擇是分解 JavaScript，以減少其運行時間。您可以將那些延遲響應用戶輸入的長任務分解為阻塞時間較短的較小任務。這是通過代碼分割來完成的，它將任務分成更小的塊。

4. 使用Service Worker ?

還可以選擇將一些 JavaScript 移至Service Worker。我確實提到 JavaScript 會競爭瀏覽器中的一個主線程，但這是一種解決方法，可以為其提供另一個運行位置。

? ? ? ? ?

就緩存而言，存在一些權衡。并且 Service Worker 無法訪問DOM，因此它無法進行任何更新或更改。如果您要將 JavaScript 移至 Service Worker，那么您確實需要一個開發(fā)人員。

5.使用預渲染或服務器端渲染（SSR） ?

如果您使用的是 JavaScript 框架，則頁面加載需要大量 JavaScript。JavaScript 可能需要一段時間才能在瀏覽器中處理，這可能會導致延遲。如果您使用預渲染或 SSR，則可以將此負擔從瀏覽器轉移到服務器。

最后的想法 ?

盡管 FID 將于 2024 年 3 月被 INP 取代，但改進 FID 仍然值得努力。您為改善 TBT 和 FID 所做的同樣的事情也會改善 INP。

翻譯作品，原作者：Patrick Stox

更多文章：

Core Web Vitals ：頁面速度現(xiàn)在對 SEO 更為重要

Google SEO:如何優(yōu)化Core Web Vitals提高您的網(wǎng)站排名