❤️ 🍰 🌹 🎬 🚴♀️ 🏋️♀️ 💻 🚀 💜
這裡記錄了我的學習和開發筆記，歡迎交流 (*´∀`)~♥
© 2024. All rights reserved.
MOPCON 逐字稿
October 24, 2021 MOPCON Web Vitals 打造高速網站，從網站指標開始！全方位提升使用者體驗與流量的關鍵 Core Web Vitals SEO 搜尋引擎優化 效能調校 Firebase Performance Firebase Image Optimization Lighthouse Loading Performance lighthouse-cli sharing 加載效能 圖片最佳化 趨勢科技 Trend Micro Real User Monitoring Synthetic Monitoring Mixtini 前端效能 系列文 · 留言
這道題目涵蓋前端技術範圍很廣，很適合在各階段拿來梳理並檢視自己的技能和狀態。那麼，就讓我來檢視一下自己的狀態吧 d(`･∀･)b
November 26, 2018 效能調校 關鍵轉譯路徑 圖片最佳化 轉譯效能 你懂JavaScript嗎？ 你所不知道的JS 加載效能 快取 Rendering Performance Critical Rendering Path Resource Hints Web Workers Worker requestAnimationFrame Gzip HTTP Caching Loading Performance You-Dont-Know-JS cache javascript javascript prototype undefined 編碼 解碼 encode decode base-64 前端效能 系列文 · 留言
在檢測加載效能時，我們會使用一些工具做測量，而使用這些工具的目的是為了量化效能優劣狀況（來做比較），找出潛在問題並改善，例如：圖檔大小、HTTP Request 數量、程式碼是否最小化、壓縮、快取等。
September 5, 2018 效能調校 圖片最佳化 Lighthouse 加載效能 Loading Performance 吃什麼 Image Optimization 前端效能 系列文 · 留言
在行動裝置上關於圖片常遇到圖檔體積過大或解析度不佳等問題，這些問題可經由選擇適當的圖片格式、壓縮、設定適合的尺寸、依照解析度提供適當的圖片來解決，本文要探討的是如何在 HTML 上使用 picture 與 img srcset sizes 來讓瀏覽器根據自身環境選擇適當的圖檔。
August 24, 2018 圖片最佳化 效能調校 加載效能 Image Optimization Loading Performance 響應式網頁 Responsive Web Design Media Query Core Web Vitals Web Vitals 前端效能 系列文 · 留言
記錄圖片壓縮要做的事情、推薦圖片壓縮和效能檢測的工具。
August 22, 2018 圖片最佳化 效能調校 Responsive Web Design 加載效能 Image Optimization Loading Performance gulp Lighthouse 響應式網頁 吃什麼 前端效能 系列文 · 留言
小圖示的顯示和壓縮技術的演進從 .png、.jpg 或 .gif 圖檔、Image Sprites，到 Base64、Icon Fonts 再來到 SVG 與 SVG Sprites，來看看到底 SVG Sprites 哪裡好 (✪ω✪) 本文前半段著重在產生 SVG Sprites 的方法和如何使用 SVG Symbols 定位；後半段說明各種 SVG Icon 的使用方式和優缺比較。
August 20, 2018 SVG 圖片最佳化 效能調校 加載效能 Image Optimization Loading Performance gulp react.js 吃什麼 編碼 解碼 encode decode base-64 前端效能 系列文 · 留言
比較 Preload 與 Prefetch 的異同。
July 31, 2018 Resource Hints 效能調校 加載效能 圖片最佳化 HTTP Caching Loading Performance Image Optimization 吃什麼 前端效能 系列文 · 留言
實作「圖片最佳化（Image Optimization）」的第一個問題是「真的需要這個圖檔嗎？」，去除不需要的圖檔即可減少 HTTP Request。第二個問題才是「若圖檔不能去除或被取代，可以做哪些優化？」。
July 30, 2018 圖片最佳化 效能調校 加載效能 SVG Resource Hints Lighthouse Base64 Images Image Optimization Loading Performance Gzip 編碼 解碼 encode decode base-64 前端效能 系列文 · 留言
將圖片轉為編碼字串，讓開發者能將圖檔嵌入 HTML、CSS 或 JavaScript 程式碼，以減少 HTTP Request。適合較少更新的小圖，例如 icon 等。
July 26, 2018 Base64 Images 效能調校 加載效能 Loading Performance 圖片最佳化 Image Optimization base-64 Gzip 編碼 解碼 encode decode 前端效能 系列文 · 留言