24 11月 2023 performance 瀏覽器 CSS HTML 改善網站效能:將 icon 轉為 font 字型 現代網站設計中充滿了各式各樣的 icon,若是自有品牌或產品,設計師更常會為了強化視覺一致性而客製一整套的 icon 圖示。 而從我們工程師的角度來看,icon 本質上就是一種圖片,既然是圖片的一種形式,當 icon 使用量一多,自然就會牽涉到與圖片相同的效能問題。為什麼 icon 太多會影響效能? 為什麼 icon 太多會影響效能? 通常 icon 是以圖片檔案(例如: SVG
自幹 React Img LazyLoad 元件 01 4月 2020 performance 瀏覽器 HTML JavaScript React.js 自幹 React Img LazyLoad 元件 為什麼要使用圖片 LazyLoad? 1. 減少頻寬浪費 圖片與影片是網站中最吃資源的元素之一,尤其在行動網路環境下,過度 PreLoad 預載會導致頻寬浪費。LazyLoad 可延遲非可視範圍內的圖片載入,只在使用者滑動到該區域時才載入圖片。 2. 提升首次載入速度 圖片載入不只是下載,還會耗用瀏覽器 CPU 解析與渲染時間。 LazyLoad 可避免瀏覽器在首次載入時就忙著處理整頁圖片,提升 First Paint 時間,讓內容更快顯示。