什麼是以使用者為中心的效能測量指標?

說明常用的效能測量指標。

效能調校 加載效能 Loading Performance


加載效能檢測工具-試用 Google PageSpeed Insights、WebPageTest、Pingdom 和 Lighthouse 的測試範例

針對網站進行各種工具的測試並做優化。

效能調校 加載效能 Loading Performance 吃什麼 Lighthouse Gzip


快取

本文主要探討記憶體快取、Service Worker 快取、HTTP 快取和 Push 快取。

快取 cache HTTP Caching Service Worker 效能調校 加載效能 Loading Performance


如何減少 HTTP Requests 的數量?

網頁上所有的文字、圖片、樣式和腳本都需要經由發送 HTTP Requests 從伺服器下載來取得,網頁大部份的時間大都花在下載資源上,只有少少的時間是花在渲染上。本文主要探討如何減少 HTTP Requests 的數量。

效能調校 加載效能 Loading Performance


加載效能檢測工具

在檢測加載效能時,我們會使用一些工具做測量,而使用這些工具的目的是為了量化效能優劣狀況(來做比較),找出潛在問題並改善,例如:圖檔大小、HTTP Request 數量、程式碼是否最小化、壓縮、快取等。

效能調校 加載效能 Loading Performance 吃什麼 Lighthouse 圖片最佳化 Image Optimization


文字資源優化

文字資源(Text Content)的優化,以下列出加快從伺服器下載的有效方法。

效能調校 加載效能 Loading Performance Gzip 吃什麼


Debounce Input Handlers

處理輸入的函式可能會造成效能問題,例如:阻礙幀(Frame)的繪製,導致畫面無法順利繪製;還有可能造成額外的版面配置(Recaculate Layout / Reflow)工作。

效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path requestAnimationFrame