❤️ 🍰 🌹 🎬 🚴♀️ 🏋️♀️ 💻 🚀 💜
這裡記錄了我的學習和開發筆記，歡迎交流 (*´∀`)~♥
© 2026. All rights reserved.
實作「圖片最佳化（Image Optimization）」的第一個問題是「真的需要這個圖檔嗎？」，去除不需要的圖檔即可減少 HTTP Request。第二個問題才是「若圖檔不能去除或被取代，可以做哪些優化？」。
圖片最佳化 效能調校 加載效能 SVG Resource Hints
HTTP Caching。
HTTP Caching ETag 快取 效能調校 加載效能
將圖片轉為編碼字串，讓開發者能將圖檔嵌入 HTML、CSS 或 JavaScript 程式碼，以減少 HTTP Request。適合較少更新的小圖，例如 icon 等。
Base64 Images 效能調校 加載效能 Loading Performance 圖片最佳化
瀏覽器渲染效能（Browser Rendering Performance）總整理 (ゝ∀･)
關鍵轉譯路徑 效能調校 轉譯效能 Critical Rendering Path Rendering Performance
使用 Newsticker 作為改進渲染效能的範例，以下列出需要改進之處與解法，並附上測試結果。
關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Critical Rendering Path
使用 News Aggregator 作為改進渲染效能的範例，以下列出需要改進之處與解法，並附上測試結果。
效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path
更詳細探討如何優化像素管道（Browser Rendering Pipeline）的繪製（Paint）和合成（Composite）這兩個階段。