Lighthouse

從內部來看瀏覽器到底在做什麼?(Inside look at modern web browser)

從內部來看瀏覽器到底在做什麼?

效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path Lighthouse Resource Hints Web Workers Worker requestAnimationFrame · 留言


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

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

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


加載效能檢測工具

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

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


如何做圖片壓縮?

記錄圖片壓縮要做的事情、推薦圖片壓縮和效能檢測的工具。

圖片最佳化 效能調校 加載效能 Image Optimization Loading Performance gulp Lighthouse 響應式網頁 Responsive Web Design 吃什麼 · 留言


圖片最佳化(Image Optimization)

實作「圖片最佳化(Image Optimization)」的第一個問題是「真的需要這個圖檔嗎?」,去除不需要的圖檔即可減少 HTTP Request。第二個問題才是「若圖檔不能去除或被取代,可以做哪些優化?」。

圖片最佳化 效能調校 加載效能 SVG Resource Hints Lighthouse Base64 Images Image Optimization Loading Performance Gzip · 留言