[ad_1]
當您第一次嘗試與頁面交互並且它需要一段時間才能響應時，那個尷尬時刻有一個名稱。 這稱為首次輸入延遲 (FID)，它是一個指標，可讓您了解網站的用戶體驗 (UX) 有多好。
低 FID 表明網站已正確優化。 這意味著即使在頁面看起來已經完成渲染之後，您的訪問者的瀏覽器也不會卡住載入元素和腳本。 如果您可以讓 FID 分數儘可能低，則會讓用戶的訪問更加愉快。
在本文中，我們將討論首次輸入延遲的含義以及它為何如此重要的指標。 然後我們將介紹四種降低 WordPress 中 FID 分數的方法。 讓我們開始吧！
📚 目錄：
以下是一些經過驗證的方法，可以改善 #WordPress 網站上的首次輸入延遲 🚅
什麼是首次輸入延遲（以及為什麼它是一個重要指標）
每次訪問網站時，後台都會發生很多事情。 在您看到頁面之前，您的瀏覽器需要查詢其伺服器、發送和處理請求、載入元素等。 對於現代網站，在您看到可以與之交互的完全呈現的頁面之前，您的瀏覽器可能需要滿足數十個請求。
在某些情況下，頁面看起來已經準備就緒，但您的瀏覽器仍在後台處理請求和載入腳本。 當您嘗試與該頁面交互時，您可能會發現執行操作和接收響應之間存在輕微延遲。
例如，如果您單擊一個鏈接，您的瀏覽器可能不會立即處理該請求。 如果你按下一個按鈕，乍一看它可能不會做任何事情。 這可能發生在您網站上的任何互動式元素上。您的目標是儘可能減少第一次輸入延遲。
理想情況下，您站點的首次輸入延遲應低於 100 毫秒。 這是 Google 認為網站可接受的標準：
來源： 網路開發
我們特別提到 Google，因為 FID 是它用來衡量網站上正面或負面用戶體驗的三個指標之一。 這三個指標被稱為 核心網路生命體征 它們還包括以下兩個指標：
- 最大內容繪製 (LCP)：該指標衡量載入頁面上最大元素所需的時間。
- Cumulative Layout Shift (CLS)：這衡量頁面在載入時視覺上「移動」的程度。 如果元素在載入時移動太多，您的 CLS 分數就會很差。 我們有一個指南 修復 WordPress 的累積布局偏移.
Core Web Vitals 之所以重要，有兩個關鍵原因。 首先，它們提供了衡量您的網站優化程度的衡量標準。 如果您的網站得分很高，則意味著它載入速度快，視覺效果穩定，用戶無需等待太長時間即可與之交互。
Core Web Vitals 重要的第二個原因是它們會影響您網站的搜索引擎優化 (SEO)。 谷歌在確定排名時使用這些指標作為一個小信號。 事實上，這家搜索引擎巨頭已經明確表示，Core Web Vitals 在 SEO 方面很重要，儘管與內容和反向鏈接的程度不同。
如何衡量您網站的首次輸入延遲
首次輸入延遲可能難以衡量，因為您需要根據網站的真實訪問者收集數據，這與其他性能指標不同，您只能使用計算機運行模擬測試。
衡量網站首次輸入延遲的最簡單方法是使用 PageSpeed 洞察力. 但是，如果您的網站有足夠的流量可以包含在 Chrome 用戶體驗報告中，PageSpeed Insights 只會顯示首次輸入延遲時間。
讓我們先談談 PageSpeed Insights 的工作原理，然後我們將分享一些替代方案，如果 PageSpeed Insights 沒有為您的網站提供首次輸入延遲指標，您可以嘗試：
要使用 PageSpeed Insights，請繼續輸入要測試的頁面的 URL。 PageSpeed Insights 將花費一些時間對其進行分析，然後它將返回如下所示的報告：
總的來說，該網站沒有最好的 Core Web Vital 分數。 但是，您可以看到它在首次輸入延遲指標方面表現非常好，平均時間低於 100 毫秒。
但是，正如我們上面提到的，並非所有站點都會看到此指標。 如果您有一個流量較低的網站，您可能會看到如下內容：
在這種情況下，您有兩種選擇：
- 簡單：您可以使用實驗室數據部分中的總阻塞時間指標作為首次輸入延遲時間的粗略代理。 這不是一個完美的表示，但總阻塞時間指標與首次輸入延遲非常相似。 通常，如果您改善總阻塞時間，您也會看到首次輸入延遲時間的類似改善。
- 高級：您可以使用真實的用戶性能監控工具，例如 請求指標. 使用這些工具，您需要向站點添加跟蹤腳本以收集真實的用戶數據。
在下面，您可以看到在 PageSpeed Insights 中哪裡可以找到總阻塞時間指標：
既然您知道如何衡量 FID 和其他 Core Web Vitals，讓我們來談談如何改進它們。
減少 WordPress 中首次輸入延遲分數的方法
在本節中，我們將專註於 WordPress 優化，以提高您的首次輸入延遲分數。 其中一些優化也會對其他 Core Web Vitals 產生積極影響，從而使它們變得更加有用。
1. 從您的網站中刪除不必要的腳本
WordPress 網站載入時間過長的主要原因之一是它需要執行大量腳本。 通過腳本，我們指的是 JavaScript 和 CSS，以及其他可能的選項。 如果您使用「複雜」的 WordPress 主題或大量插件，則您可能在後台運行了太多腳本。
弄清楚哪些腳本有用，哪些沒用可能是一個挑戰，但這就是 PageSpeed Insights 的用武之地。 如果您對網站的任何頁面進行測試，PageSpeed Insights 報告還將包括一個機會部分：
該部分將指出您的站點未使用哪些 JavaScript 和 CSS 文件。 刪除這些腳本應該會相應地降低您的 FID 分數。
在許多情況下，這些腳本來自插件。 這意味著您需要仔細查看您的插件列表並找出您真正不需要的工具。 剔除您的插件是讓您的網站儘可能快地載入的好方法。
2. 在載入期間推遲非關鍵代碼
遇到載入時間過長的特定腳本或代碼是很常見的。 問題是，在某些情況下，您的瀏覽器在處理這些腳本之前將無法完成載入頁面的其餘元素。
如果這些腳本不是「關鍵」的，你可以簡單地告訴你的瀏覽器把它們留到最後，這樣它們就不會減慢其他人的速度。 這就是我們所說的「推遲非關鍵代碼」。
在弄清楚可以推遲哪些腳本時，您的第一站應該是 PageSpeed Insights。 為頁面生成報告後，PageSpeed Insights 將包含有關如何提高其分數的建議。
在這些建議中，您會找到一個選項，內容為「消除渲染阻塞資源」。 如果您單擊它，它將顯示您可以推遲的腳本列表：
有兩種方法可以處理 WordPress 中的渲染阻止腳本。 第一種方法涉及 使用非同步. 這使瀏覽器能夠在解析您指定的腳本時繼續載入您的網站。 或者，您可以推遲代碼，使其在瀏覽器呈現 HTML 文檔的其餘部分後載入。
要在 WordPress 上進行設置，您可以使用 免費的非同步 JavaScript 插件. 或者，許多 WordPress 性能插件包含延遲代碼的功能。 如果您願意為高級插件付費， WP火箭 具有自動推遲非關鍵 CSS 和 JavaScript 的功能。
3. 使用 CSS 和 JavaScript 縮小工具
儘管我們都贊成刪除未使用的 CSS 和 JavaScript，但仍有一些腳本您不想刪除。 例如，除非您想要一個感覺像是從上個世紀被撕掉的網站，否則您不會想要取消任何頁面的 CSS 樣式表。
對於那些無法刪除的腳本，最好的辦法是縮小它們。 這意味著從代碼中刪除空格和不必要的字元以減少每個腳本的大小。 有幾種工具可以自動為您在 WordPress 中縮小腳本，例如 自動優化 和 快速速度縮小：
一般來說，大多數 WordPress 優化和 緩存插件 還包括腳本縮小工具。 但是，其中一些需要大量配置工作，因此我們建議在縮小時堅持使用諸如 Autooptimize 之類的選項。
4. 使用內容分發網路 (CDN)
使用 CDN 是提高網站性能的好方法。 使用 CDN，您可以訪問世界各地的數據中心網路，該網路可以緩存您網站的內容。 當訪問者嘗試訪問您的網站時，CDN 將處理該請求並提供它的緩存版本。
在大多數情況下，使用 CDN 會改善您網站的載入時間和 FID 分數。 將 WordPress 與 CDN 集成很簡單，最大的挑戰可能在於決定使用哪種服務。
如果你正在尋找 免費 CDN 選項，我們建議選擇以下選項之一：
- Cloudflare：這是市場上最受歡迎的 CDN 之一。 它是 易於與 WordPress 集成 並提供免費計劃。
- Jetpack：Jetpack 插件提供了一項名為 Site Accelerator 的功能，它使用 WordPress.com 伺服器來緩存您網站中的靜態元素。 儘管 Jetpack 需要一個 WordPress.com 帳戶，但您也可以在自託管的 WordPress 站點上使用它。
但是，為了獲得最佳性能，您可能需要 考慮使用優質 CDN 例如 KeyCDN、StackPath 或 Bunny CDN。
立即減少您網站的首次輸入延遲
FID 是三個之一 核心網路生命體征 旨在衡量您網站上的用戶體驗的指標。
在#WordPress 網站上提高首次輸入延遲分數的完整指南🚅
衡量如此抽象的事物可能會很複雜，這就是為什麼每個核心要素都專註於一種可能對遊客體驗產生負面影響的特定情況。 所有 Core Web Vitals 都是必不可少的，但特別是 FID，如果延遲太高，可能會導致很大的挫敗感。
如果您正在尋找提高 WordPress 中 FID 分數的方法，您需要執行以下操作：
- 從您的網站中刪除不必要的腳本。
- 在載入期間推遲非關鍵 CSS 和 JavaScript。
- 使用 CSS 和 JavaScript 最小化工具，例如 Autooptimize 和 Fast Velocity Minify。
- 使用 CDN，例如 Cloudflare 或 Jetpack。
您對如何在 WordPress 中降低 FID 分數有任何疑問嗎？ 讓我們在下面的評論部分中討論它們！