您可能聽過漸進式網頁應用程式 (PWA) 技術對網站的優點。您可能會想在不改善網站效能基礎的情況下，新增 PWA 功能。但無論使用多少 PWA 功能，都無法修正 JavaScript 遭到封鎖和圖片過大的問題。
首先，請先進行網站稽核，客觀地評估哪些做法有效，以及哪些地方可以改進。
稽核網站或應用程式有助於打造穩定且效能良好的體驗。 此外，請強調只需極少核准程序即可實施的快速成效。稽核作業可為資料導向開發作業建立基準。變更後是否有所改善？與競爭對手相比，您的網站表現如何？您可根據指標決定優先處理事項，並在改善後取得具體證據，證明自己有所進步。
只要 5 分鐘
在首頁上執行 Lighthouse，然後儲存報表資料。您會取得量化的基準，以及提升效能、無障礙功能、安全性和 SEO 的待辦事項清單。
只要 30 分鐘
Lighthouse 仍是最佳起點，但如果時間允許，您也可以記錄其他工具的結果：
- Chrome 開發人員工具的「Security」(安全性) 面板：HTTPS 使用量。
- Chrome 開發人員工具的「網路要求」面板： 載入時間；HTML、CSS、JavaScript、 圖片、字型和其他檔案的資源大小和要求數量。
- Chrome 工作管理員：如果網站經常使用的 CPU 或記憶體比其他應用程式多，您可能需要修正記憶體洩漏、工作執行或資源載入問題。
- WebPagetest：快取、首封位元組時間、CDN 使用情況。
- PageSpeed Insights：載入效能、資料費用和資源用量，包括 Chrome 使用者體驗報告資料，可突顯實際效能統計資料。
請務必以首次造訪者的角度測試網站。開啟網站的無痕 (私密) 視窗，或使用瀏覽器工具停用快取並清除儲存空間。這可確保系統從網路擷取每個資產，而非從本機快取擷取，因此您可準確瞭解首次載入效能。
沒有什麼比實際測試更有效。請務必在代表使用者的裝置和連線環境中測試網站，並記錄主觀體驗。
如果您對工具感到困惑
請參閱我們的指南：如何運用速度工具。
如果沒有其他方法，請使用 Lighthouse 檢查下列項目：
- HTTPS：所有網站都應透過 HTTPS 提供所有資產。
- 伺服器設定：網路伺服器或 CDN 應正確使用壓縮、使用 HTTP/2，並加入適當的標頭，讓瀏覽器能夠快取資源。
- 可移至頁面底部的指令碼元素，或具有 async 或 defer 屬性的指令碼元素。
- 可移除的 JavaScript 和程式庫。
- 未使用的程式碼，例如 CSS 和 JavaScript 程式庫。
- 可縮減圖片像素大小的機會。
- 變更檔案格式，例如將 PNG 變更為 JPG，以縮減圖片大小。
目標對象、利害關係人、背景資訊
重構的優先順序取決於觀眾、內容和功能。 誰會造訪您的網站？他們為何使用這項功能？使用方式為何？你的成效預算是多少？
利害關係人是誰？他們重視什麼？這會影響稽核資料的架構、呈現和分享方式。
如果無法稽核整個網站，請查看網頁分析，瞭解應著重於哪些部分。高跳出率、低網頁停留時間和非預期的離開網頁，都是開始調查的好指標。同樣地，業務指標如主機費用、廣告點擊和轉換次數。向利害關係人瞭解他們重視哪些資料。
測試、記錄、修正、重複
請先記錄網站的狀態，再進行任何變更，以便找出問題，並設定改善或迴歸的起點。您可根據這些資料，證明並獎勵開發工作。
測試網站中的多種網頁類型。如果是單頁應用程式，請測試元件、路徑和使用者體驗流程，而不只是初次載入體驗。