【Nuxt.js】画像遅延読み込みでパフォーマンスを向上させよう！

こんにちは、キャメルスタジオのフロントエンドエンジニアの谷口です。
今回はサイトのパフォーマンスをあげるための画像の読み込みに関してのご紹介です。

サイトを作成していくにあたってコンテンツの量や画像が多いとサイトの読み込みってどんどん遅くなっていきますよね。

画像はなにも設定しなければページを読み込んだ際にすべての画像が読み込まれてしまうので時間がかかってしまいます。
逆に言ってしまえばページを読み込んだ際に画面内に表示されない画像を読み込まないようにすれば初期の読み込みがかなり抑えられるということですよね。

なので画面外の画像は読み込まないようにしスクロールして画面内にはいる段階で読み込んであげれば良さそうですね。

これを実装するにはscrollイベントなどでスクロール位置を毎回検知し画像を表示させるといった方法になるかと思います。
ただ今回はscrollイベントではなくさらにブラウザのことを考えてより負荷の少ない方法で実装していきます。
それがintersection observerというものになります。
javascriptのscrollイベントはスクロールするたびにスクロール値を取得するので1pxでもスクロールする度に実行されます。
intersection observerは指定した要素と画面が交差したときに発火するイベントです。
スクロールする度に発火するわけではなくある指定の要素と交差すれば発火するイベントになるので負荷が全然違いますよね。

では早速実装方法です。
今回はvue-lazyloadというvueのパッケージを使用した方法です。
Nuxt.jsでの実装ですがvueでもあまり変わりません。

npm i vue-lazyload

でパッケージをダウンロードします。

次にpluginsディレクトリ内にlazyload.jsを作成します。

// plugins/lazyload.js

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
 observer: true
})

ここのオプション指定で
observer: true
とするだけでintersection observerを使用して画像を遅延読み込みしてくれるようになります。

他にもロード中に表示させる画像やエラー時の画像、
交差する位置などについても指定することもできます。

この作成したファイルをnuxt.config.jsで読み込みましょう。

export default {
    plugins: [
        { src: "~plugins/lazyload.js" }
    ]
}

次にlazyloadを導入したいページを開き下記のように記述します。

<template>
    <ul>
        <li v-for="list in lists" :key="list.id">
           <img v-lazy="list.img" >
        </li>
    </ul>
</template>

<script>
export default {
    data() {
        lists: [
            {id: 1, img: "/assets/img/img01.jpg"},
            {id: 2, img: "/assets/img/img02.jpg"},
            {id: 3, img: "/assets/img/img03.jpg"}
        ]
    }
}
</script>

これで実装完了です。
簡単でわかりやすいですよね。

ちなみにimgタグで

<img src="/assets/img/img01.jpg" alt="" />

などと直接画像を入力している画像に対しても遅延読み込みができます。
srcをv-lazyに変更すればいいだけですね。

<img v-lazy="/assets/img/img01.jpg" alt="" />

Nuxtの場合だと画像の読み込み方が上記のような読み込み方ではなく

<img src="~/assets/img/img02.jpg" alt="" />

として「~」で読み込んでいる場合もあると思います。
この場合は

<img v-lazy="require('~/assets/img/img02.jpg')" alt="">

とすることで遅延読み込みが可能になります。
画像の読み方がいろいろありますね。

あと、intersection observerは残念ながらIEには対応しておりません。。
IEに対応させるにはpolyfill.jsというものをいれる必要があります。
nuxt.config.jsか該当ファイルに下記の記述をいれてあげれば完了になります。

script: [
     { src: '//polyfill.io/v2/polyfill.min.js?features=IntersectionObserver' }
]

以上、画像遅延読み込みのご紹介でした。
パフォーマンスをあげるためにぜひ導入を検討してみてくださいね。
最後までお読みいただきありがとうございました。