web vitals extension

Web Vistals Chrome擴展

現在安裝健康網站的鍍鉻擴展

該擴展程序以與Chrome測量並報告給其他Google工具（例如Chrome用戶體驗報告，頁面速度見解，搜索控制台）的方式相匹配的三個核心網絡生命指標。

它支持所有核心網絡生命值，並利用引擎蓋下的Web-Vitals庫捕獲：

• 最大的內容油漆
• 累積佈局變化
• 與下一個油漆的互動

它還支持診斷指標：

• 是時候第一個字節了
• 首先滿足的油漆

安裝說明

Web Vitals Chrome Extenstion可以從Chrome Web Store中安裝。

如果您正在尋找更多的出血構建，也可以從Master安裝擴展版的版本。

從Master安裝

Google Chrome

1. 從GitHub下載此存儲庫作為ZIP文件。
2. 解壓縮文件，您應該有一個名為web-vitals-extension-master文件夾。
3. 在Chrome中，轉到擴展頁面（ chrome://extensions ）。
4. 啟用開發人員模式。
5. 將web-vitals-extension-master文件夾拖動頁面上的任何位置以導入它（以後不要刪除文件夾）。

用法

環境徽章

環境徽章有助於檢查頁面是否通過核心網絡生命值閾值。

安裝後，擴展程序將顯示殘疾的狀態徽章圖標，直到導航到URL為止。在這一點上，它將根據URL是否通過核心Web Vitals指標閾值將徽章更新為綠色，琥珀色還是紅色。

徽章有許多州：

• 禁用 - 灰色正方形
• 好 - 綠色圓圈
• 一個或多個指標需要改進 - 琥珀廣場
• 一個或多個指標差 - 紅色三角形

如果一個或多個指標失敗，徽章將使這些指標的值動畫（可以在選項屏幕中關閉此動畫）。

詳細的鑽孔

單擊環境徽章圖標將使您可以鑽入單個度量值。在此模式下，擴展名還將說明指標是否需要用戶操作。

例如，與下一個油漆的交互需要與頁面進行真實的交互（例如，單擊/點擊），並且將在Waiting for input...狀態直到這種情況為止。我們建議諮詢LCP，CLS和INP的Web.DEV文檔，以了解何時定量度量。

彈出窗口通過Chrome UX Report（CRUX）API結合了您本地的核心Web Verals體驗與現場的Real-User數據。這種集成為您提供上下文見解，以幫助您了解同一頁面上其他桌面用戶的個人體驗與其他桌面用戶的相似性。如果需要，我們還添加了一個新的選項，以“將本地體驗與電話字段數據進行比較”。請注意，某些頁面可能無法使用CRUX數據，在這種情況下，我們嘗試為整個Origin加載字段數據。

覆蓋

覆蓋層顯示一個覆蓋您頁面的頭部顯示（HUD）。如果您在開發過程中需要持續了解核心網絡生命值指標，這將很有用。啟用覆蓋層：

• 右鍵單擊“環境徽章”，然後選擇選項。
• 檢查Display HUD overlay ，然後單擊“保存”
• 重新加載您要測試的URL選項卡。現在應該存在覆蓋層。

控制台日誌

Web Vitals擴展的控制台記錄功能提供了所有受支持指標的診斷視圖。啟用控制台日誌：

• 右鍵單擊“環境徽章”，然後選擇選項。
• 檢查Console logging ，然後單擊“保存”
• 在DevTools中打開控制檯面板，並過濾Web Vitals

要濾除不需要的指標，請在公制名稱中預先一個減號。例如，將過濾器設置為Web Vitals Extension -CLS -LCP以濾除CLS和LCP診斷信息。

每個指標的診斷信息都記錄為由[Web Vitals Extension]預先準備的控制台組，這意味著您需要單擊此行才能打開和關閉組。

診斷信息的種類各不相同。例如，LCP信息包括：

• 對LCP元素的引用
• LCP子部分指標的表
• 如果在後台加載了選項卡，請進行可選警告
• 來自Web-Vitals的完整歸因對象

用戶時間

對於某些指標（LCP和INP），可以使用performance.measure將故障保存到用戶定時標記中，然後在DevTools Performance Traces中可查看。

對於其他指標，Chrome Devtools通常提供足夠的信息，因此無需其他細分。

貢獻

歡迎以拉動請求或問題的形式為該項目做出貢獻。有關更多詳細信息，請參見貢獻。

如果您的反饋與我們測量指標的方式有關，請直接針對Web-Vitals提出問題。

擴展代碼如何結構化？

• src/browser_action/vitals.js ：利用webvitals.js收集指標和廣播度量更改的腳本，用於徽章和HUD。提供可用於徽章的指標的總分。
• src/bg/background.js ：使用Vitals.js提供的數據執行徽章圖標更新。將數據傳遞到popup.js ，以顯示更詳細的本地指標摘要。
• src/browser_action/popup.js ：在單擊徽章圖標時顯示的彈出窗口中渲染詳細的指標報告的內容腳本。
• src/options/options.js ：options ui（保存的配置），用於高級功能，例如hud覆蓋

常問問題

誰是此擴展名的主要受眾？

該擴展程序的主要受眾是開發人員，他們想立即反饋他們的頁面在台式機上開發期間的核心網絡生命力指標。

我應該如何解釋該工具報告的指標數字？

該擴展名報告了台式機或筆記本電腦的指標。在許多情況下，此硬件的速度將比用戶可能擁有的中位手機快得多。因此，強烈建議您使用燈塔和實際移動硬件（例如通過WebPageTest）等工具進行測試，以確保您的所有用戶都有積極的體驗。

我可以採取什麼措施來改善我的核心網絡生命力？

如果您發現您的頁面沒有傳遞特定的閾值，我們正在提供一組指南，以優化每個核心Web Vitals指標：

• 優化CLS
• 優化LCP
• 優化INP
• 優化TTFB

燈塔還包括對這些指標的其他可行性審核。

我們設想用戶將使用該擴展名來對指標進行即時反饋（對於台式機），但隨後將進行（1）（1）診斷這些指標在中間移動設備上的診斷視圖，以及（2）特別是什麼，具體來說是什麼。您可以改善。

執照

Apache 2.0