有和 SEO 打交道的朋友們應該對 Web Vitals 網站體驗指標不陌生，其中包含了 LCP、FID、CLS 三大評分，今天參考了 How to use Nuxt.js and Chrome 這部教學影片，來看看 Nuxt 在這些項目上有什麼操作可以使用。

LCP (Largest Contentful Paint) 最大內容繪製

圖片通常會是影響這項評分的最大因素，Nuxt 也有一個 <nuxt-img> 元件，但是這個元件不像 <NuxtLink> 這些其他的元件一樣內建在 Nuxt 中，需要額外安裝。

安裝

npm install -D @nuxt/image-edge

使用

• Preload：加上 preload 屬性讓重要的圖片能夠優先載入。

<nuxt-img src="/somePhoto.png" alt="some photo" preload />

• Lazy Loading：加上原生的 loading="lazy" 屬性效果。

<nuxt-img src="/nuxt-icon.png" loading="lazy" />

• 尺寸：原生的方式使用 srcset 來針對不同尺寸裝置渲染不同圖片，nuxt-img 的操作很精簡，就像寫 rwd class name 一樣即可。

<nuxt-img
  src="/logos/nuxt.png"
  sizes="sm:100vw md:50vw lg:400px"
  />

• 格式：有點神奇的屬性，直接定義格式，但是保險起見，我還是會自己先轉好格式。

<nuxt-img format="webp" src="/nuxt-icon.png" ... />

其他圖片的操作可以參考 NuxtImage 官方文件，其實用原生的方式撰寫都可以達成，如果已經非常熟練的話使用的效益不算高。