Zenn
Open2

nuxt3で行ったPageSpeed Insights対策

Nuxt 3
pagespeedinsights
yunayuna

htmlタグの言語指定を正しく

変更前

app: {                   
  head: {              
    htmlAttrs: {     
    lang: 'jp',

変更後

app: {                   
  head: {              
    htmlAttrs: {  
    lang: 'ja-JP',

画像を適切に処理して読み込み速度・体感速度を上げる

@nuxt/imageモジュールを導入
https://image.nuxt.com/

package.json
"dependencies": {
    "@nuxt/image": "^1.7.0",
nuxt.config.ts
    modules: [
        '@nuxt/image',

必要に応じて、webpや、preloadingする画像してい、遅延ロードOKのものを設定する

webp形式指定

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

background-imageで指定する画像の対応（providerに指定して、vueファイル内で利用する例）

plugins/commonPlugin.js
export default defineNuxtPlugin((nuxtApp) => {
    const nuxtImg = useImage();
	nuxtApp.provide("backgroundStyles", (url) => {
		const imgUrl = nuxtImg(url, { format: "webp" });
		return { backgroundImage: `url('${imgUrl}')` };
	});
index.vue
const { $backgroundStyles } = useNuxtApp();
~~~
<div class="header" :style="$backgroundStyles('/img/xxx.jpg')">

preloading
※WEB画面の大部分を占める画像のロード時間は、スコアに影響する部分。
preloadingすることで読み込みが早くなり（スコア）体験が良くなる

<NuxtImg preload src="/nuxt-icon.png" />

lazy loading
※WEB画面のスクロール先にある画像などは遅延ロードさせる

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