我們有幾個核心目標,希望能以低成本打造高效、彈性的網站。
您必須為每個目標進行稽核。
目標 | 為什麼? | 要測試哪些項目? |
---|---|---|
確保隱私權、安全性和資料完整性,並支援強大的 API 使用 | HTTPS 的重要性 | 為所有網站頁面/路徑和資產實作 HTTPS。 |
改善載入效能 | 53% 的使用者會放棄載入時間超過 3 秒的網站 | 支援非同步或延遲載入的 JavaScript 和 CSS。設定互動時間和酬載大小的目標,例如 3G 上的 TTI。設定效能預算。 |
減少網頁重量 | • 為使用者節省數據費 • 減少網站應用程式儲存空間需求 (對於低規格裝置的使用者尤其重要) • 降低代管和放送成本 • 改善放送效能、可靠性和復原能力 | 設定網頁重量預算:例如,首次載入時大小不得超過 400 KB。檢查是否有大量 JavaScript。 檢查檔案大小,找出圖片、媒體、HTML、CSS 和 JavaScript 的過大檔案。找出可延遲載入的圖片,並使用涵蓋率工具檢查未使用的程式碼。 |
減少資源要求 | • 減少延遲問題 • 降低服務成本 • 改善服務效能、可靠性和彈性 | 請檢查是否有任何類型的資源要求過多或不必要。例如:重複載入的檔案、以多個版本載入的 JavaScript、從未使用的 CSS、從未查看的圖片 (或可延後載入)。 |
記憶體用量最佳化 | 記憶體可能會成為新的瓶頸,尤其是在行動裝置上 | 使用 Chrome 工作管理員,比較網站與其他網站的記憶體用量,以便瞭解載入首頁和使用其他網站功能時的記憶體用量。 |
降低 CPU 負載 | 行動裝置的 CPU 有限,尤其是低規格裝置 | 檢查是否有大量 JavaScript。使用涵蓋率工具找出未使用的 JavaScript 和 CSS。請檢查是否有過大的 DOM 大小,以及在首次載入時不必要執行的指令碼。尋找在多個版本中載入的 JavaScript,或是稍微重構可能避免的程式庫。 |
稽核網站時,可以使用各種工具和技術:
- 系統工具
- 內建瀏覽器工具
- 瀏覽器擴充功能
- 線上測試應用程式
- 模擬工具
- 數據分析
- 伺服器和業務系統提供的指標
- 螢幕和影片錄製
- 手動測試
請參閱下文,瞭解每種稽核類型適用的做法。
記錄資源要求:數量、大小、類型和時間
檢查網站時,建議您先使用瀏覽器的網路工具檢查網頁。如果不確定如何操作,請參閱 Chrome 開發人員工具網路面板的入門指南。Firefox、Safari、Internet Explorer 和 Edge 也提供類似的工具。
請記得在變更前記錄結果。對於網路要求,您可以使用螢幕截圖,也可以將設定檔資料儲存為 JSON 檔案。請參閱下方更多資訊,瞭解如何儲存及分享測試結果。
開始稽核網路用量前,請務必停用瀏覽器快取,確保您能取得初次載入成效的準確統計資料。如果您已透過服務工作站執行快取,請清除 Cache API 儲存空間。建議您使用無痕 (私人) 視窗,這樣就不必費心停用瀏覽器快取或移除之前快取的項目。
以下是您應使用瀏覽器工具檢查的部分核心功能和指標:
- 載入效能:Lighthouse 提供負載指標的摘要。Addy Osmani 曾撰寫一篇精彩的文章,總結網頁載入過程中的重要使用者時刻。
- 時間軸事件:用於載入和剖析資源,以及記憶體用量。如要進一步瞭解,請執行記憶體和 JavaScript 剖析。
- 網頁總重量和檔案數量。
- JavaScript 檔案的數量和權重。
- 任何特別大的個別 JavaScript 檔案 (例如超過 100 KB)。
- 未使用的 JavaScript。您可以使用 Chrome 涵蓋率工具進行檢查。
- 圖片檔案的總數和權重。
- 任何特別大的個別圖片檔案。
- 圖片格式:PNG 是否可以是 JPEG 或 SVG?是否使用 WebP 搭配備用項目?
- 是否使用回應式圖片技術 (例如 srcset)。
- HTML 檔案大小。
- CSS 檔案的總數和權重。
- 未使用的 CSS。(在 Chrome 中,請使用涵蓋率面板)。
- 檢查其他資產的使用情形是否有問題,例如網路字型 (包括圖示字型)。
- 查看開發人員工具時間軸,找出任何阻止網頁載入的項目。
如果您使用的是速度快的 Wi-Fi 或行動網路,請使用低頻寬和高延遲模擬進行測試。別忘了在行動裝置和電腦上測試,有些網站會使用通用 Analytics 分析功能,針對不同裝置提供不同的素材資源和版面配置。您可能需要使用遠端偵錯功能,在實際硬體上進行測試,而非僅使用裝置模擬功能。
檢查記憶體和 CPU 負載
變更前,請保留記憶體和 CPU 用量的記錄。
在 Chrome 中,你可以透過「視窗」選單存取工作管理員。這是檢查網頁需求的簡單方法。
測試最初和後續的載入效能
Lighthouse、WebPagetest 和 PageSpeed Insights 可用於分析速度、資料成本和資源使用情形。WebPagetest 也會檢查靜態內容快取、首次讀取時間,以及網站是否有效使用 CDN。
儲存結果
- WebPagetest:每個測試結果都有專屬網址。
- Pagespeed Insights:線上的 Pagespeed Insights 工具現在納入 Chrome 使用者體驗報告資料,可突顯實際效能統計資料。
- Lighthouse:按一下下載按鈕,從 Chrome 開發人員工具稽核面板儲存報表:
測試核心漸進式網頁應用程式需求
Lighthouse 可協助您測試安全性、功能、無障礙設計、效能和搜尋引擎效能。具體來說,Lighthouse 會檢查您的網站是否已成功實作 PWA 功能,例如服務工作者和網路應用程式資訊清單。
Lighthouse 也會測試網站是否能提供可接受的離線體驗。
您可以將 Lighthouse 報表下載為 JSON 格式,如果您使用 Lighthouse Chrome 擴充功能,則可以將報表分享為 GitHub Gist:按一下分享按鈕,選取「在檢視器中開啟」,然後在新視窗中再次按一下分享按鈕,然後點選「另存為 Gist」。
使用數據分析、事件追蹤和業務指標來追蹤實際成效
如有可能,請在導入變更前記錄下分析資料:跳出率、網頁停留時間、離開網頁:所有與業務需求相關的資料。
盡可能記錄可能受到影響的業務和技術指標,以便您比較變更後的結果。舉例來說,電子商務網站可能會追蹤每分鐘的訂單,或是記錄壓力和耐力測試的統計資料。如果您減少頁面重量和資源要求,後端儲存空間費用、CPU 需求、服務成本和彈性可能會有所提升。
還沒導入數據分析的話,現在正是時候!商務指標和數據分析是判斷網站是否正常運作的最終依據。視情況納入事件追蹤,用於追蹤使用者動作,例如按鈕點擊和影片播放。您也可以導入目標流量分析:使用者前往「轉換」的路徑。
您可以密切留意 Google Analytics 的「網站速度」,瞭解成效指標與業務指標之間的關聯。舉例來說,與「透過首頁進入網站的使用者是否完成購買」相比,您可以使用「首頁載入速度如何?」
Google Analytics 會使用 Navigation Timing API 的資料。
您可以使用其中一個 JavaScript 效能 API 或自訂指標記錄資料,例如:
const subscribeBtn = document.querySelector('#subscribe');
subscribeBtn.addEventListener('click', (event) => {
// Event listener logic goes here...
const lag = performance.now() - event.timeStamp;
if (lag > 100) {
ga('send', 'event', {
eventCategory: 'Performance Metric'
eventAction: 'input-latency',
eventLabel: '#subscribe:click',
eventValue: Math.round(lag),
nonInteraction: true,
});
}
});
您也可以使用 ReportingObserver 檢查瀏覽器淘汰和介入警告。這是許多可從實際使用者取得實際即時評估結果的 API 之一。
實際體驗:螢幕錄影和錄影
錄製行動版和電腦版網頁載入的影片。在高影格速率或新增計時器顯示器的情況下,這項功能的效果會更好。
你也可以儲存螢幕側錄。有許多適用於 Android、iOS 和電腦平台的螢幕錄影應用程式 (以及用於錄影的程式碼)。
錄製影片的網頁載入情形,與 WebPagetest 中的膠卷片段檢視畫面或 Chrome 開發人員工具中的擷取螢幕截圖功能類似。您會取得網頁元件載入速度的實際記錄,包括哪些元件載入速度快、哪些元件載入速度慢。儲存錄製的影片和螢幕錄影,以便日後比較改善情形。
並列比較前後的效果,是展現改善效果的好方法!
還有呢?
視需要取得 Web Bloat 分數。這項測試很有趣,但也可以用來展示程式碼膨脹的情況,或是您所做的改善。
如要瞭解網站的費用,請參閱這篇文章,瞭解在不同地區載入網站的費用。
還有許多其他獨立和線上工具可供使用:請造訪 perf.rocks/tools。