<img loading=”lazy”>

在 2022 年的現在，主流瀏覽器都原生支援 <img> 的 lazy loading 了
所以在有大量圖片的網頁中，都可以直接為 <img> 加上 loading=”lazy” 來優化網頁效能
但最好別在網頁第一眼所見範圍的圖片開啟這功能

一般讀取網頁時的執行路徑是：

Parse HTML ➡ Download images ➡ Layout ➡ Ready

正確設定 lazy loading 時的執行路徑是：

Parse HTML ➡ Layout ➡ Ready
直到使用者 scroll down 到一定的深度而觸發 lazy loading ➡ Download images ➡ Layout

但在首屏圖片開啟 lazy loading 的執行路徑是：

Parse HTML ➡ Layout ➡ Download images ➡ Layout
無可避免的多做一次 layout 惹，no good

---

題外話，在 Firefox 57 發布之後使用起來順暢超級多，像是我第一次用 Chrome 的感覺 😂
在 2017 年官方部落格有一篇 Inside a super fast CSS engine: Quantum CSS (aka Stylo) 講解一般瀏覽器在讀取網頁時要做的事情，以及 Firefox 新的 CSS 引擎如何優化這個過程，我覺得讀起來是蠻有趣的啦