Preload
preload 提示瀏覽器優先下載關鍵資源（字體、首屏圖片）。用錯會浪費頻寬，要只 preload 真正關鍵的資源。
定義
Preload 是 `<link rel='preload'>` 資源提示，告訴瀏覽器這個資源很重要，應優先下載。常用於首屏圖片、字體或關鍵 CSS/JS。它能改善 LCP，但若 preload 太多或 preload 錯資源，反而會浪費頻寬。
為什麼重要
- 加速 LCP 元素載入 — 提早發現並下載首屏大圖或字體
- 避免字體閃爍（FOIT/FOUT）與相關的 CLS 偏移
- 解耦發現時機 — 即使資源在 CSS 或 JS 內才被引用，也能提早載入
- Lighthouse 會建議 preload LCP 圖片以提升分數
- 可搭配 fetchpriority='high' 進一步控制優先級
- 縮短 Critical Rendering Path，加快首屏渲染
- 提升主觀載入速度，改善使用者體驗
怎麼做（實作重點）
- 只 preload 首屏真正需要的資源（少而精，通常 2-4 個）
- 設定正確 as 屬性（image/font/script/style/fetch），影響優先級與 CORS
- 字體務必加 crossorigin 屬性，否則會重複下載
- preload 圖片時搭配 imagesrcset/imagesizes 支援響應式
- 用 DevTools Network 面板驗證 preload 是否被消費
- 避免 preload 不會實際用到的資源（會出現 console 警告）
- 搭配 preconnect 處理第三方來源，效果更佳
範例
html
<!-- 在 <head> 最前面 preload 首屏大圖 -->
<link
rel="preload"
as="image"
href="/images/hero.webp"
fetchpriority="high"
/>
<!-- 響應式 preload（根據螢幕寬度選擇圖片）-->
<link
rel="preload"
as="image"
imagesrcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
imagesizes="100vw"
/>html
<!-- crossorigin 是必要的，否則字體會下載兩次 -->
<link
rel="preload"
as="font"
type="font/woff2"
href="/fonts/inter-latin.woff2"
crossorigin
/>
<!-- 在 CSS 中使用（確保 src 與 preload href 完全一致）-->
<style>
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-latin.woff2') format('woff2');
font-display: swap;
}
</style>常見問題
關於這個詞彙的常見問答。