網站圖片載入優化：loading="eager"、fetchpriority="high" 與 preload 是什麼？
如果你使用 Google PageSpeed Insights 檢測網站，可能會看到建議：
為 LCP 圖片使用
loading="eager"、fetchpriority="high"，並在<head>加入preload。
這些設定的目的只有一個：讓首頁最重要的圖片更快顯示，提高網站效能。
什麼是 loading="eager"？
<img src="banner.webp" loading="eager" alt="Banner">
loading 用來控制圖片的載入方式。
eager：立即載入圖片。lazy：等圖片即將進入畫面時才開始下載。
一般來說：
- 首頁 Banner、Hero Image：使用
eager - 其他內容圖片：使用
lazy
這樣可以避免一次下載太多圖片，提升整體載入速度。
什麼是 fetchpriority="high"？
<img src="banner.webp" fetchpriority="high" alt="Banner">
fetchpriority 是告訴瀏覽器：
這張圖片很重要，請優先下載。
當瀏覽器同時需要下載 CSS、JavaScript、圖片等資源時，加入：
fetchpriority="high"
可以提高這張圖片的下載優先權，對改善 Largest Contentful Paint（LCP） 特別有幫助。
什麼是 preload？
在 <head> 中加入：
<head>
<link
rel="preload"
as="image"
href="/images/banner.webp">
</head>
正常情況下，瀏覽器必須先解析 HTML，看到 <img> 後才開始下載圖片。
加入 preload 後，瀏覽器一讀到 <head> 就會先開始下載圖片，因此能更快顯示首屏內容。
三者有什麼差別？
| 功能 | 作用 |
|---|---|
loading="eager" |
不延遲載入圖片 |
fetchpriority="high" |
提高圖片下載優先權 |
<link rel="preload"> |
提前開始下載圖片 |
三者並不衝突，而是分別從不同角度加速圖片載入。
建議搭配使用
如果首頁有一張 Hero Banner，可以這樣設定：
<head>
<link
rel="preload"
as="image"
href="/images/banner.webp">
</head>
<body>
<img
src="/images/banner.webp"
loading="eager"
fetchpriority="high"
width="1200"
height="500"
alt="首頁 Banner">
</body>
這樣可以達到：
- 瀏覽器一開始就下載圖片（Preload）
- 將圖片列為高優先權（Fetch Priority）
- 不使用延遲載入（Eager）
對於改善 LCP 有相當明顯的效果。
什麼情況不要使用？
不要把所有圖片都設定成：
loading="eager"
fetchpriority="high"
否則瀏覽器會同時下載大量圖片，不但無法加速，反而可能拖慢整個網站。
建議：
- ✅ 首頁第一張主要圖片：
loading="eager"+fetchpriority="high"+preload - ✅ Logo（視重要性）：可考慮
fetchpriority="high" - ✅ 其他圖片：使用
loading="lazy"
總結
這三種設定都是現代網站常見的圖片效能優化技巧：
loading="eager"：立即載入重要圖片。fetchpriority="high"：提高圖片下載優先權。preload：在 HTML 一開始就預先下載圖片。
只要將它們應用在首頁首屏最重要的圖片，通常就能有效改善 Google PageSpeed Insights 的 Largest Contentful Paint（LCP） 分數，讓使用者更快看到網站的主要內容。