如何改善 WordPress 中的首次輸入延遲 (FID)
已發表: 2022-07-05隨著您的網站流量增加，您需要確保事情繼續順利進行。 如果訪問者必須等待超過幾秒鐘才能加載您的頁面，他們可能會離開您的網站並且可能永遠不會回來。
幸運的是，有一些簡單的測試可以評估您的性能，如果需要改進，有一些解決方案幾乎可以立即改善您的加載時間。
在這篇文章中，我們將討論站點性能的一個方面：首次輸入延遲。 您將了解它是什麼，為什麼它很重要，以及如何衡量和提高 WordPress 網站上的 FID 分數。
首次輸入延遲簡介
首次輸入延遲 (FID) 是訪問者首次與您的網站交互後所經歷的加載時間。 本質上，當有人點擊鏈接或點擊按鈕時，他們必須等待瀏覽器響應。 如果您的網站具有較高的 FID 分數，則訪問者會等待更長的時間。
FID 是 Core Web Vitals 的主要指標之一。 該報告由 Google 創建，用於衡量網頁的性能。
以下是 Core Web Vitals 報告中包含的三個主要性能指標：
- Largest Contentful Paint (LCP) ：衡量用戶請求 URL 後網站加載所需的時間。
- 首次輸入延遲 (FID) ：這是訪問者與頁面交互後您的網站做出響應的時間。
- Cumulative Layout Shift (CLS) ：這會測量頁面加載時發生的所有佈局變化。
儘管所有這些指標都在評估您網站的用戶體驗，但您的 FID 分數是最重要的指標之一。 如果您的頁面沒有快速加載，則可能會給您留下糟糕的第一印象。 事實上，一秒鐘的延遲會降低 16% 的訪客滿意度。
以下是提高 FID 分數的一些好處：
- 提高訪問者的平均頁面停留時間
- 降低跳出率
- 轉化次數增加
FID 評分不佳的潛在原因
當您運行 Core Web Vitals 測試時，該報告將為您提供首次輸入延遲分數。 可接受的 FID 為 100 毫秒或更短。
差的 FID 分數高於 300 毫秒。 這可能是由幾個不同的因素造成的。
高首次輸入延遲的最常見原因之一是大量的 JavaScript 代碼。 如果瀏覽器必須執行一個大的 JavaScript 文件，它可能太忙而無法執行其他請求。
擁有太多基於 JavaScript 的插件會對加載時間產生負面影響。 同樣，某些主題可能具有導致相同問題的複雜文件。
另一個因素可能是第三方腳本。 如果您的網站有許多第三方分析代碼和標籤，這可能會增加您頁面的延遲。 有時，瀏覽器可以優先考慮這些腳本，從而延遲您網站上其他內容的加載。
如何衡量您網站的 FID 分數
現在您知道什麼是首次輸入延遲，是時候測試您的網站了。
您可以使用多種 Core Web Vitals 工具來檢查您的 FID。 如果您從這些工具中的任何一個收到糟糕的報告，您可以採取措施改進您的網站。
1. PageSpeed Insights
您可以使用的一個著名工具是 PageSpeed Insights。 這使您能夠根據各種因素評估您網站的性能。
輸入您網站的 URL 後，PageSpeed Insights 將為您提供詳細的性能分析。 在頁面頂部，您可以查看您的網站是否通過了 Core Web Vitals 評估。
使用此報告，您可以查看您網站的 FID 分數，該分數將以毫秒為單位。 正如我們前面提到的，任何低於 100ms 的分數都將通過測試。
請注意，您需要檢查您的網站在移動和桌面瀏覽器上的性能。 您可能會注意到這兩款設備上的 FID 分數略有不同。
這是在您的網站上測量首次輸入延遲的最快方法之一。 如果您需要快速了解 Web 性能，這可能是適合您的工具。
2.谷歌搜索控制台
與 PageSpeed Insights 類似，Google Search Console 是一個免費工具，可用於評估網站性能。 使用此服務，您可以查看站點的流量數據並解決特定問題，例如首次輸入延遲。
要開始使用 Google Search Console，您必須驗證您的網站所有權。 有幾種方法可以做到這一點，但我們將概述 HTML 文件上傳方法。 首先輸入您的域或 URL 前綴。
然後，下載為您生成的 HTML 文件。 您需要先將此文件上傳到您網站的根目錄，然後才能使用 Google Search Console 的功能。
驗證後，您將能夠訪問您的儀表板。 在這裡，您可以導航到Core Web Vitals選項卡。
與 PageSpeed Insights 不同，如果您不熟悉此工具，可能需要一些時間才能訪問您的報告。 此外，如果您的網站沒有獲得足夠的訪問者，您可能看不到報告。
Google Search Console 可以為您提供類似的 FID 分數指標。 您將收到基於實際使用數據的“差”、“需要改進”或“好”的評估。
3. 燈塔
Lighthouse 是一個 Web 開發工具，您可以使用它來審核任何網頁的性能。 雖然它不直接測量首次輸入延遲，但它會為您提供總阻塞時間 (TBT)。 您可以將其用作 FID 的代理。
簡而言之，TBT 評估您的網站對用戶輸入的響應程度。 與 FID 一樣，TBT 測量首次內容繪製 (FCP) 和交互時間 (TTI) 之間的延遲。 由於它們非常相似，您可以使用 TBT 來衡量您的 FID 分數。
要在您的網站上查看 Lighthouse 的報告，您需要右鍵單擊您的網頁。 然後，選擇檢查。
在生成的代碼頂部，找到雙箭頭圖標。 然後，單擊它並選擇Lighthouse 。
在下一頁上，您將看到生成報告的選項。 當您單擊此按鈕時，Lighthouse 將審核您的網站。
審核完成後，您可以查看有關站點性能的詳細分析。 您還將看到有關您的 SEO 和 Web 可訪問性的報告。
然後，向下滾動直到看到Metrics 。 在本節中，您將看到您的Total Blocking Time 。
儘管 TBT 和 FID 相似，但需要注意的是 FID 是一個字段度量。 由於它是實時基於用戶的，因此無法在實驗室環境中進行測量。
Lighthouse 是一種實驗室指標工具，因此其總阻塞時間指標不會評估實際交互性。 幸運的是，提高您的 TBT 分數也可以提高您的首次輸入延遲。
如何減少 WordPress 中的首次輸入延遲
當您使用上述工具之一測試您的網站時，您可能會收到較差的首次輸入延遲分數。 幸運的是，您可以通過實施一些有效的策略來提高分數。
讓我們看看如何減少 WordPress 中的首次輸入延遲。
1.安裝優化插件
一個簡單的入門方法是安裝一個專注於 Core Web Vitals 的插件。 通過這樣做，您無需任何繁重的工作即可改善您的首次輸入延遲。
Jetpack Boost 是一個功能強大且易於使用的插件，您可以使用它來優化您的 Core Web Vitals。 它提供了許多方法來提高您的網絡性能並提高您的 FID 分數。
激活 Jetpack Boost 後，該工具會自動為您的網站提供性能評分。 您可以查看頁面在移動和桌面視圖上的加載速度。
然後，您可以自定義其設置以優化文件以實現快速加載。 通過優化 CSS、延遲 JavaScript 和實現延遲加載，您可以提高 FID 分數。
Jetpack Boost 是一個免費插件。 如果您已經在 WordPress 網站上安裝了 Jetpack，則可以從儀表板激活 Jetpack Boost。
2.延遲渲染阻塞JavaScript
另一種優化 FID 分數的有效方法是延遲渲染阻止 JavaScript。 默認情況下，您網站上的所有 JavaScript 都是渲染阻止的。 這意味著瀏覽器將停止加載某個頁面，直到它可以下載並執行這些腳本。
在這種情況下，您可以推遲 JavaScript 執行。 這將告訴瀏覽器首先呈現最相關的內容。
要識別這種阻止呈現的 JavaScript，您可以使用 PageSpeed Insights。 首先，在搜索欄中輸入您網站的 URL。
然後，向下滾動到機會部分。 在這裡，您會看到提高網絡性能的建議。 找到它說消除渲染阻塞資源的地方。
當您展開此部分時，將會有一個資源列表，您可以完全推遲或消除這些資源。 在右側，PageSpeed Insights 將向您展示這些更改如何影響您的加載時間。
一旦你決定在你的網站上推遲非必要的 JavaScript，你可以使用插件來簡化這個過程。 使用 Jetpack Boost，您只需一步即可完成。
在您的 WordPress 儀表板中，導航到Jetpack → Boost 。 然後，找到標記為Defer Non-Essential JavaScript的設置。
最後，開啟此功能。 實施後，開關將變為綠色。 現在，再次嘗試通過 PageSpeed Insights 運行您的網站，看看您的 FID 分數是否有所提高。
3.推遲非關鍵CSS
當您在 PageSpeed Insights 中評估您的網站時，您可能還會看到其他渲染阻止資源。 與 JavaScript 類似，某些編碼會阻止您的頁面在瀏覽器讀取時加載。
就像 JavaScript 一樣，你可以推遲非關鍵的 CSS。 首先通過性能工具運行您的網站，看看您的 CSS 是否需要優化。
然後，您可以使用 Jetpack Boost 插件來優化您的 CSS。 在您的 WordPress 儀表板中，導航到Jetpack → Boost 。 然後，找到標有Optimize CSS Loading的設置。
單擊此選項後，插件將自動為您的網站生成關鍵 CSS。 它將這些重要信息移動到頁面的開頭，這可以幫助您更快地加載內容。
推遲非關鍵 CSS 可以提高您的整體性能。 它還應該提高您在 PageSpeed Insights 上的 FID 分數。
4.消除不必要的JavaScript
如果您安裝了很多插件或複雜的主題，您的網站可能運行了太多的腳本。 如果瀏覽器需要執行一長串腳本來加載您的網站，則可能會導致速度變慢。
顯示您的網站需要許多腳本，但很可能，您有一些不必要的 CSS 和 JavaScript。 如果您不確定如何區分，可以返回 PageSpeed Insights。
與前三種方法一樣，滾動到機會部分。 這一次，尋找未使用的 JavaScript 和 CSS。
在每個未使用的腳本旁邊，都會有一個 URL，告訴您它的來源。 在此示例中，Google Analytics 和 Google Tag Manager 創建了一些不必要的 JavaScript。
如果您知道是哪個主題或插件導致了問題，您可以考慮刪除它們。 然後，您可以安裝編碼良好且更輕量級的不同版本。
或者，您可以使用 Asset CleanUp 之類的插件來刪除未使用的 CSS 和 JavaScript。 此工具可以消除渲染阻塞資源，以減少您網站的 HTTP 請求數量。
在站點上安裝並激活 Asset Cleanup 後，轉到儀表板中的Asset CleanUp → CSS/JS Manager 。 在此頁面上，您可以選擇網站的不同元素來查看其 CSS 和 JavaScript。
例如，您可以單擊主頁，它將在此頁面上顯示所有加載的文件。
此信息將根據位置列出。 您可以向下滾動頁面以查看來自您的插件、主題、核心軟件和第三方來源的腳本。
有兩種方法可以刪除一段腳本。 您可以在此特定頁面或站點範圍內卸載它。
刪除未使用的腳本後，單擊更新。 在此之後，您可以清除緩存以立即應用這些更改。
5. 縮小 CSS 和 JavaScript
儘管您可以輕鬆地從您的站點中刪除腳本，但您只想擺脫那些您不使用的腳本。 對於必要的 CSS 和 JavaScript，您可以簡單地縮小它們。
一個簡單的方法是安裝 Autooptimize 插件。 這是一個免費工具，可以在簡單的設置過程後自動縮小您的 CSS 和 JavaScript 文件。
安裝後，進入設置 → 自動優化。 在JavaScript 選項下，您可以選中優化 JavaScript 代碼旁邊的框。
然後，您需要對CSS Options執行相同的操作。 通過自定義這些設置，該工具將自動縮小您網站上現有的 CSS 和 JavaScript。
完成後，保存更改。 在此過程之後，您還可以選擇清空緩存。
6.延遲JavaScript執行時間
為了進一步優化你的 JavaScript，你可以延遲它的執行時間。 這涉及告訴瀏覽器僅在用戶與您的內容交互後才加載 JavaScript。 除非訪問者向下滾動頁面或單擊按鈕，否則不會處理這些腳本。
為此，您可以使用 Flying Scripts 之類的插件。 使用此工具，您可以延遲 JavaScript 文件的執行，直到您的網站上有訪問者活動。
激活飛行腳本後，轉到設置 → 飛行腳本。 這將打開插件的設置頁面，您可以在其中開始實施 JavaScript 延遲。
首先編寫標識要延遲的腳本的關鍵字。 例如，您可以將“gtag”用於 Google 跟踪代碼管理器腳本。
然後，您可以實現超時。 本質上，這將在一段時間內沒有活動時執行 JavaScript。 您可以設置一個最長十秒的計時器。 完成後，單擊保存更改。
7. 實施內容交付網絡
改善首次輸入延遲的另一個有效選擇是使用內容交付網絡 (CDN)。 這是一組連接的服務器，可以將您的在線內容分發給世界各地的用戶。
使用 CDN 時，您可以縮短服務器與在線訪問者之間的距離。 這是因為當有人訪問您的網站時，內容是從離他們最近的服務器傳送的。 如果您在一個位置只有一台服務器，則將數據發送給國際用戶可能需要很長時間。
幸運的是，使用 Jetpack 的網站已經提供了免費的 CDN。 如果您導航到Jetpack → 設置 → 性能，您可以打開站點加速器。
Jetpack 將優化您的圖像和靜態文件。 與其他 CDN 提供商不同，沒有文件限制。 此外，您不必擔心額外的月費或複雜的管理流程。
關於首次輸入延遲的常見問題
到目前為止，我們已經了解了首次輸入延遲的工作原理以及如何提高分數。 現在，讓我們來看看關於 FID 的一些常見問題。
如何衡量我的 WordPress 網站的 FID 分數？
您可以使用 Core Web Vitals 工具輕鬆測量您網站的首次輸入延遲分數。 PageSpeed Insights 是一個易於使用的選項。 您所要做的就是輸入您網站的 URL，該工具將生成一份關於您網站性能的詳細報告。
Google Search Console 的功能非常相似。 驗證您擁有網站後，您可以查看基於真實訪問者數據的 FID 報告。
您也可以使用燈塔。 此工具為您提供網站的總阻塞時間 (TBT)。 雖然這不會顯示來自真實訪問者的結果，但它可以讓您更好地了解您的頁面響應能力。
什麼是好的 FID 分數？
簡而言之，您的網站將屬於以下三個分數之一：
- 好：100毫秒或更短
- 需要改進：範圍從 100 毫秒到 300 毫秒
- 差：大於300ms
測量 FID 分數後，任何超過 100 毫秒的結果都需要進行一些調整。
如何輕鬆優化我的 FID 分數？
您可以通過優化網站上的腳本來提高 FID 分數。 通常，複雜的 JavaScript 和 CSS 文件會提示瀏覽器停止加載，直到它處理它們。 通過刪除、推遲或縮小腳本，您可以提高網站的速度。
儘管您可以為此過程使用不同的工具，但 Jetpack Boost 可以幫助您一次實施多個解決方案。 使用這個插件，您可以優化您的 CSS 結構並推遲非必要的 JavaScript。
改善您的第一印象
當新訪問者與您的網站進行交互時，他們希望他們的瀏覽器能夠快速響應。 如果您的網站具有較高的首次輸入延遲 (FID)，則可能會導致用戶在未閱讀您的內容的情況下離開頁面。 通過關注您網站的響應時間，您可以改善用戶體驗並留住更多訪問者。
由於繁重且效率低下的 JavaScript 和 CSS 編碼，您的網站的 FID 分數可能很差。 幸運的是，您可以使用 Google 的 PageSpeed Insights 等工具輕鬆識別這些問題。 然後，您可以安裝像 Jetpack Boost 這樣的插件來縮小或延遲 CSS 和 JavaScript。