❤️ 🍰 🌹 🎬 🚴♀️ 🏋️♀️ 💻 🚀 💜
這裡記錄了我的學習和開發筆記,歡迎交流 (*´∀`)~♥
© 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 前端效能 系列文 · 留言
在檢測加載效能時,我們會使用一些工具做測量,而使用這些工具的目的是為了量化效能優劣狀況(來做比較),找出潛在問題並改善,例如:圖檔大小、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 前端效能 系列文 · 留言