您是否曾經點擊過某個頁面但沒有任何反應?真是令人沮喪!
最大內容繪製 (LCP) 衡量內容在頁面上呈現所需的時間,而首次輸入延遲 (FID) 衡量頁面對與其互動的訪客做出反應的速度。作為Google Core Web Vitals 的三個指標之一,獲得該效能指標的合理分數至關重要。
Google 認為任何高於 300 毫秒 (ms) 的 FID 都很差,在 100 毫秒到 300 毫秒之間需要改進,而低於 100 毫秒則較好。
測量 FID 及其替代方案
首次輸入延遲是一個現場指標,這意味著它無 馬來西亞 電話號碼庫
法模擬 - 需要真實的用戶互動來測量回應延遲。 如果頁面在過去 28 天內有足夠的數據,您可以使用PageSpeed Insights來確定 FID。 Chrome 使用者體驗報告 和Google Search Console也是如此。
但您所做的任何更改都不會立即反映在您的 FID 分數中。為此,我們需要轉向一個不同但相似的指標,稱為總阻塞時間(TBT)。
儘管首次輸入延遲 (FID) 是核心 Web 的關鍵,但開發人員使用總阻塞時間 (TBT) 作為代理,因為它的測量效率更高。 #corewebvitals #technicalseo
點擊發推文
與 FID 一樣,它也可以測量無回應情況,但無需使用者輸入。它只是將所有長任務的阻塞時間相加。這些是在主執行緒上運行超過 50 毫秒的任務。
來自pagetest.org 的速度頁面測試結果。
來源
因此,您可以根據現場數據進行更改並查看效果。請記住,現場資料是關於特定 URL 在不同網路條件下使用多種裝置執行情況的歷史報告。另一方面,實驗室數據模擬在一組固定的網路條件下一個設備上的頁面載入。
影響 FID 的第一大因素
大量 JavaScript 執行是導致 FID 分數不佳的第一大原因。 Web 瀏覽器載入和執行主執行緒所需的時間延長了回應任何互動所需的時間。
減少 JavaScript 執行時間
從技術上講,所有 JavaScript 都是阻塞渲染的。每次瀏覽器看到腳本標籤時,它都需要停止正在執行的操作並下載、解析、編譯和執行該 JavaScript。難怪糟糕的編碼會導致糟糕的 FID 分數!
您可以透過 Chrome DevTools 中的覆蓋率標籤查看網頁上未使用 JavaScript 的量。只需右鍵單擊頁面並選擇“檢查” 。
使用 Chrome 網路瀏覽器工具檢查網頁。
右鍵點選使用 Chrome Web 瀏覽器檢視的頁面,然後選擇「檢查」。
您可以透過以下方式減少 JavaScript 執行時間:
程式碼分割
推遲 JavaScript
刪除未使用的 JavaScript
延遲 JavaScript 執行
使用Asset CleanUp或Fast Velocity Minify等 WordPress 外掛程式縮小 JavaScript
程式碼分割
您可以將一個大的 JavaScript 套件拆分為較小的程式碼區塊以進行延遲載入。我將在後面關於分解長任務的部分中詳細討論這一點,因為它本質上是相同的過程。
推遲 JavaScript
延遲 JavaScript 可確保呈現最重要的內容,以便訪客可以快速與頁面互動。像 Asset CleanUp 、Hummingbird或WP Rocket這樣的 WordPress 外掛 可以提供幫助。
刪除未使用的 JavaScript
網站或外掛程式應該僅在需要時載入 JavaScript,但情況並非總是如此。如果您無法更改網站主題或插件,那麼像 Asset Cleanup 或Perfmatters這樣的 WordPress 插件 可以提供幫助。我知道,使用一個插件來解決另一個插件的問題的諷刺對我來說並沒有消失!
一些 WordPress 外掛可以改善其他外掛程式導致的較差的 FID 分數。諷刺但卻真實! #corewebvitals #technicalseo
點擊發推文
延遲 JavaScript 執行
優先考慮互動所需的資源並延遲其餘資源有助於提高您的 FID 分數。並非每個 JavaScript 檔案都可以以這種方式處理(在您可以這樣做的情況下)——延遲執行會影響載入時間並最終影響互動時間。可以這麼說,阻礙的程式碼更少了。考慮使用 WordPress 插件,例如FlyingScripts 或 WP Rocket。
縮小 JavaScript
JavaScript 檔案可以包含註解、空格和換行符——所有這些都使人類更容易閱讀,但對機器來說完全沒有必要。刪除這些可以使檔案更小並減少載入時間。大多數 WordPress 快取外掛程式都允許您縮小 JavaScript,從而使繁瑣且相當複雜的問題變得簡單。只需要知道,縮小 JavaScript 檔案不會產生巨大的影響。
優化您的頁面以做好互動準備
如果您的頁面嚴重依賴 JavaScript,則腳本執行和資料獲取可能會影響頁面準備互動的速度。 JavaScript 分析和其他第三方腳本也可以延遲互動延遲。理想情況下,您應該優先加載最有價值的腳本,延遲那些不那麼重要的腳本。