HTML 網頁效能優化屬性

在現代網頁開發中，使用者載入網頁的速度 (Page Load Speed) 是決定 SEO 排名與使用者留存率的關鍵因素。除了優化 JavaScript 與 CSS，HTML 標籤本身也提供了許多原生的屬性來幫助瀏覽器更聰明地分配載入资源的優先順序。

延遲載入：loading="lazy"

loading="lazy" 是優化行動裝置載入速度最簡單且最有效的方法之一。

用法

它可以套用在 <img> 與 <iframe> 標籤上。當瀏覽器發現該元素不在使用者的目前視窗 (viewport) 內時，會延遲下載該資源。

<!-- 只有當使用者滾動到這張圖片附近時，才會開始下載 -->
<img src="large-photo.jpg" loading="lazy" alt="美景照片" />
不要對「首屏」(Above the fold) 的圖片使用 loading="lazy"，因為這會延遲第一張圖片的顯示速度。

設定載入優先權：fetchpriority

2024 年正式普及的 fetchpriority 屬性，讓你可以手動告訴瀏覽器：「這個資源非常重要，請優先處理」或是「這個資源雖在首屏但沒那麼急」。

  • high: 優先下載（例如主要的背景圖或重要的 LCP 圖片）。
  • low: 降低權重（例如非視覺核心的小圖、或是廣告）。
  • auto: 讓瀏覽器自定（預設值）。
<img src="hero-banner.jpg" fetchpriority="high" alt="首頁主視覺" />

圖片與資源的解碼優化：decoding

decoding 屬性用來控制瀏覽器解碼圖片的時機，這能有效防止圖片解碼時造成的頁面卡頓。

  • async: 非同步解碼，不會阻塞頁面渲染（建議對大圖使用）。
  • sync: 同步解碼。
  • auto: 自動選擇。
<img src="complex-infographic.png" decoding="async" alt="複雜圖表" />

瀏覽器指示器：Resource Hints

這是在 <head> 中使用的標籤，用來提前建立與伺服器的連結或預抓資源。

dns-prefetch

提前解析 DNS 位址，減少延遲。

<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />

preconnect

除了 DNS，還先建立 TCP 與 TLS 連線（最推薦使用於 CDN 資源）。

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />

preload

強制瀏覽器「立即」抓取某個關鍵資源（如特定字體或關鍵腳本）。

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin />

實務優化建議

  1. 首頁第一張大圖：使用 fetchpriority="high" 且不使用 loading="lazy"。
  2. 長頁面中的圖片：全部加上 loading="lazy" 與 decoding="async"。
  3. 外部資源 (如 Google Fonts)：在 <head> 加入 preconnect。

透過這些簡單的 HTML 屬性調整，你不需要撰寫複雜的 JavaScript 就能顯著提升網頁在 Google PageSpeed Insights 中的分數！