想像你在一家超人氣餐廳點餐，餐廳不會一次把所有菜都端上來，而是等你吃完一道再上下一道。Lazy Loading（延遲加載） 就是這樣的概念！它是一種網站優化技術，只有當用戶「滾動到」需要的內容（圖片、影片等）時，才會進行加載，而不是在頁面一打開就把所有東西「一股腦」全丟出來。

Lazy Loading 的三大好處，就像吃飯不用一次塞滿嘴！

  1. 網站跑得更快，用戶吃得更順心
    初始加載時，網站只會先載入最重要的內容，讓用戶不用等太久就能看到關鍵資訊。這對於圖片多的網站（像是電商、部落格）特別有用。

  2. 省下流量，伺服器不會「撐爆」
    沒有滾動到的圖片或影片就不會被加載，既節省伺服器資源，也幫助用戶省流量，對行動裝置用戶超友好！

  3. Google 也喜歡，SEO 更加分
    搜尋引擎偏愛速度快的網站，Lazy Loading 讓你的網站看起來「輕盈靈活」，進一步提升搜尋排名和用戶體驗。

Lazy Loading 的應用場景，看看它在哪些地方最有用？

  • 圖片：最常見的應用！只有當用戶滾動到圖片的位置，圖片才會顯示。
  • 影片：不像傳統方式一次性加載整段影片，Lazy Loading 只會在用戶播放影片時載入。
  • 無限滾動內容：像是社群平台的動態牆或電商網站的商品清單，Lazy Loading 可以確保用戶滾到哪，內容就顯示到哪。

如何啟用 Lazy Loading？操作簡單到不行！

現在 HTML5 已經內建了 Lazy Loading 的功能，只需要在 <img> 標籤中加上一個 loading="lazy" 屬性，就搞定了！像這樣：

<img src="example.jpg" loading="lazy" alt="圖片描述">

是不是超簡單？不用額外的程式碼或工具，就能讓你的網站更快、更輕量。

總結：Lazy Loading 就是網站的「按需供應」！

Lazy Loading 就像一位貼心的服務生，不會一次把所有菜都端上桌，而是等你需要時再送上來。這項技術不僅能讓網站跑得更快，還能節省資源、優化 SEO，讓用戶體驗更流暢！所以，還不快讓你的網站也「懶」起來？