當我們考慮網路應用程式的效能時，收集關鍵指標來依據資料改進或優化應用程式中的某些部分非常重要。Google 定義了一組名為 Web Vitals 的基本指標，用於衡量網站效能相關的使用者體驗，側重於頁面的載入速度、互動性和視覺穩定性，旨在確保網站能為使用者提供流暢、愉快的瀏覽體驗。
探索 Web Vitals
在 Mac 上使用 `CTRL + SHIFT + I` 或 `CMD + ALT + I` 開啟開發工具。然後，使用 `CTRL + SHIFT + P` 或 `CMD + SHIFT + P` 開啟「效能」選項，點選「performance」。
在這個範例中，您可以在載入頁面後看到 Web Vitals 的樹狀指標，開發工具會為您提供網站效能評分。
Chrome 使用者體驗報告 (CrUX) 是一組透過 Google Chrome 收集的真實效能數據，來自瀏覽網路的真實使用者，旨在幫助開發人員了解使用者的實際體驗。CrUX 是衡量網站使用體驗的寶貴來源，特別是了解其在 Core Web Vitals（例如 LCP、FID 和 CLS）方面的表現。您可以透過 Google PageSpeed Insights、Google Search Console 或直接在 Chrome DevTools 中存取這些數據。
使用開發工具管理應用程式儲存
在「應用程式」標籤中，您可以看到應用程式的各種儲存選項，例如會話儲存、本機儲存、IndexedDB、Cookie 和 Service Worker（如果您的應用程式使用這些資源）。
Cookie 是伺服器儲存在瀏覽器中的小文字檔案，用於儲存應用程式狀態、使用者偏好、登入工作階段等資訊，每個 cookie 的大小限制為 4KB。
LocalStorage 是一種持久性儲存形式，將資料作為鍵值對儲存在使用者瀏覽器中，資料不會過期，直到使用者手動刪除或網站刪除資料。每個網域最多可以儲存 5 MB 的資料。
IndexedDB 是更高級的本機資料庫，允許儲存大量結構化數據，例如 JavaScript 物件。它提供更靈活、更複雜的資料訪問，可儲存與離線 Web 應用程式相關的資料（數十 MB 到 GB 不等）。
快取儲存 用於在瀏覽器本機儲存網路資源（例如 HTML、CSS、JS 檔案、圖像），這是 Service Workers API 的一部分，允許 Web 應用程式在離線或不穩定的網路條件下工作，提高效能和離線工作的能力。
分析網路請求和源碼
在「網路」標籤中，您可以看到渲染頁面內容的所有請求，並過濾 HTTP、CSS、HTML、JavaScript 等請求。您還可以分析請求中發送的內容，如請求正文、標頭、cookie 等。
在「來源」標籤中，您可以分析應用程式的原始程式碼和第三方程式庫來進行偵錯。
本文無法詳細探索開發工具提供的所有資源，但這是您了解並開始探索這些工具的基本指南。透過這些功能，您將能夠更好地管理和優化您的網路應用程式。
沒有留言:
張貼留言