稽核效能

原因為何?

您可能已聽過漸進式網頁應用程式技術可以為您的網站帶來哪些好處。您或許會想直接添加 PWA 功能。當然也可以,但若是先「支援 PWA」,會更加得心應手。

沒有任何 PWA 神奇魔法會解決封鎖 JavaScript 或圖片過大等問題。PWA 需要一個穩固的基礎。

那麼該怎麼檢查網站的健康狀態呢?第一步是進行網站稽核:客觀審查網站成效良好、哪些地方或有待改進。

稽核網站或應用程式可協助您打造靈活且高效能的體驗,並強調無須簽核的快速成功。稽核也能讓您奠定資料導向開發的基準。經過改變是否能讓一切變得更好?你的網站與競爭對手的比較結果如何?您會取得決定工作的優先順序指標,並透過具體的證據來證明自己是否已改善服務品質。

如果只有 5 分鐘的時間...

在首頁上執行 Lighthouse儲存報表資料。系統會提供量化基準和待辦事項清單,協助您改善效能、無障礙功能、安全性和 SEO 成效。

如果只有 30 分鐘...

Lighthouse 可能還是是最好的起點,但建議您多花一點時間記錄其他工具的結果:

  • Chrome 開發人員工具安全性面板:HTTPS 使用情形。
  • Chrome 開發人員工具網路面板:載入時間、HTML、CSS、JavaScript、圖片、字型和其他檔案的載入時間和要求次數。
  • Chrome 工作管理員:如果網站持續使用大量 CPU 或比其他應用程式的記憶體更多,您可能需要修正記憶體流失、工作執行或資源載入問題。請務必以使用者的裝置代表測試網站。
  • WebPagetest:不同位置和連線類型的效能、快取、儲存時間到第一個位元組的時間、CDN 用量。
  • PageSpeed Insights:載入效能、資料費用和資源用量,包括醒目顯示實際效能統計資料的 Chrome 使用者體驗報告資料。
  • 速度評量表和影響計算機:與同類應用程式比較網站速度,預估改善網站速度的潛在收益機會。

請務必測試網站,做為初次瀏覽的使用者進行測試。使用無痕模式 (私人) 視窗開啟網站,或使用瀏覽器工具停用快取並清除儲存空間。這樣可以確保每個素材資源都是從網路擷取,而不是從本機快取擷取,這樣才能準確掌握初次載入的效能。

與實際測試過程無縫接軌。測試您的網站時,請採用與使用者相同的裝置和連線方式,並記錄您的主觀體驗。

如果你發現有許多工具滲透了...

歡迎參閱我們的指南:如何思考速度工具

如果沒有,請直接使用 Lighthouse 檢查:

目標對象、利害關係人、背景資訊

重構的優先事項取決於目標對象、內容和功能。哪些人造訪您的網站?他們使用這些資訊的原因和方式您的效能預算是多少?如果不確定這些問題的答案,請嘗試從 PWA 訓練資源收集練習的需求:您的目標對象、內容將所有使用者納入設計考量

您有哪些利害關係人?他們優先要務是什麼?這會影響您建構、呈現和共用稽核資料的方式。

如果無法稽核整個網站,請查看網頁分析,瞭解需要改善的重點。跳出率偏高、網頁停留時間偏低和非預期的離開網頁,都有助您掌握切入點。 同樣,代管費用、廣告點擊和轉換次數等業務指標。大致瞭解他們重視哪些資料。

測試、記錄、修正、重複

請在進行任何變更「之前」記錄網站狀態,以便找出問題並著手進行改善或迴歸。您可運用這些資料證明開發工作的正當性和獎勵

請務必在網站上測試多種網頁類型,而不只是首頁。針對單一頁面應用程式,請測試不同的元件、路徑和使用者體驗流程,而不只是初次載入體驗。

意見回饋: