❤️ 🍰 🌹 🎬 🚴♀️ 🏋️♀️ 💻 🚀 💜
這裡記錄了我的學習和開發筆記，歡迎交流 (*´∀`)~♥
© 2025. All rights reserved.
針對網站進行各種工具的測試並做優化。
效能調校 加載效能 Lighthouse Loading Performance 吃什麼
本文主要探討記憶體快取、Service Worker 快取、HTTP 快取和 Push 快取。
快取 Service Worker 效能調校 cache HTTP Caching
網頁上所有的文字、圖片、樣式和腳本都需要經由發送 HTTP Requests 從伺服器下載來取得，網頁大部份的時間大都花在下載資源上，只有少少的時間是花在渲染上。本文主要探討如何減少 HTTP Requests 的數量。
效能調校 加載效能 base-64 Loading Performance 前端效能 系列文
在檢測加載效能時，我們會使用一些工具做測量，而使用這些工具的目的是為了量化效能優劣狀況（來做比較），找出潛在問題並改善，例如：圖檔大小、HTTP Request 數量、程式碼是否最小化、壓縮、快取等。
效能調校 圖片最佳化 Lighthouse 加載效能 Loading Performance
文字資源（Text Content）的優化，以下列出加快從伺服器下載的有效方法。
效能調校 加載效能 Gzip Loading Performance 吃什麼
處理輸入的函式可能會造成效能問題，例如：阻礙幀（Frame）的繪製，導致畫面無法順利繪製；還有可能造成額外的版面配置（Recaculate Layout / Reflow）工作。
效能調校 關鍵轉譯路徑 requestAnimationFrame 轉譯效能 Rendering Performance
在行動裝置上關於圖片常遇到圖檔體積過大或解析度不佳等問題，這些問題可經由選擇適當的圖片格式、壓縮、設定適合的尺寸、依照解析度提供適當的圖片來解決，本文要探討的是如何在 HTML 上使用 picture 與 img srcset sizes 來讓瀏覽器根據自身環境選擇適當的圖檔。
圖片最佳化 效能調校 加載效能 Image Optimization Loading Performance