performance

改善網站效能:將 icon 轉為 font 字型

現代網站設計中充滿了各式各樣的 icon,若是自有品牌或產品,設計師更常會為了強化視覺一致性而客製一整套的 icon 圖示。 而從我們工程師的角度來看,icon 本質上就是一種圖片,既然是圖片的一種形式,當 icon 使用量一多,自然就會牽涉到與圖片相同的效能問題。為什麼 icon 太多會影響效能? 為什麼 icon 太多會影響效能? 通常 icon 是以圖片檔案(例如: SVG

自幹 React Img LazyLoad 元件

為什麼要使用圖片 LazyLoad? 1. 減少頻寬浪費 圖片與影片是網站中最吃資源的元素之一,尤其在行動網路環境下,過度 PreLoad 預載會導致頻寬浪費。LazyLoad 可延遲非可視範圍內的圖片載入,只在使用者滑動到該區域時才載入圖片。 2. 提升首次載入速度 圖片載入不只是下載,還會耗用瀏覽器 CPU 解析與渲染時間。 LazyLoad 可避免瀏覽器在首次載入時就忙著處理整頁圖片,提升 First Paint 時間,讓內容更快顯示。

Episode

00:00:00 00:00:00