【Vue.js】画像をlazyload（遅延読み込み）してパフォーマンス向上

こんにちは、”はふぃ”です。

lazyload（遅延読み込み）という言葉をご存知でしょうか？

通常は、ページにアクセスした際に全ての画像を読み込みます。しかし、lazyloadを使うと画面に表示されている領域の画像のみを読み込み、スクロールした時には画面内に入った画像を読み込んでいきます。これによって、初期描画が早くなるためサイトのパフォーマンスが向上します！

今回はこのlazyloadをVue.jsアプリケーションで行う方法について説明します。

利用するプラグイン

vue-lazyloadというプラグインを利用します。

https://github.com/hilongjw/vue-lazyload

npmを使ってインストールしましょう。

$ npm i vue-lazyload -S

実装方法

まず、lazyloadをプラグインを使って読み込む設定を作ります。

< plugins/lazyload.js >

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

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

< nuxt.config.js >

module.exports = {
  plugins: [
    '~/plugins/lazyload'
  ]
}

続いてlazyloadを使ったimgタグの実装です。

imgタグのv-lazyに表示する画像やローディング画像をセットしたオブジェクトを渡すだけで、lazyloadが実現できます。

※ より詳しいオプションや使い方はlazyloadのgitを参考にしてください

< components/pages/sample/LazyloadPage/index.vue >

<template>
  <div>
    <div v-for="(n, i) in 100" :key="`lazyload-img_${i}`">
      <img v-lazy="imgObj" :alt="`lazyload-img_${i}`">
    </div>
  </div>
</template>

<script>
import src from '~/assets/img/reiwa.png'
import loading from '~/assets/img/loading.gif'

export default {
  data () {
    return {
      imgObj: {
        src,
        loading
      }
    }
  }
}
</script>

<style scoped>
img[lazy=loaded] {
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-name: scrollIn;
}

@keyframes scrollIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>

※ 表示上わかりやすくするためにanimation-durationを2秒と長めに設定しています

結果

スクロールするとアニメーションがついて表示される（遅延読み込み）様子がわかると思います。（ローディング画像は一瞬すぎてわかりづらいですが…）

また、表示速度に関しても結果を見てみましょう！

lazyloadを実装した場合とそうではない場合で、画像を100枚読み込むページを比較すると以下のようになります。

上の画像の赤枠部分を見ると、lazyloadの方が初期描画までの時間が短縮されていることがわかります！

まとめ

vue-lazyloadを使うことで、簡単にlazyloadが実現でき、サイトのパフォーマンスを改善することができるので、画像が多いサイトなどは是非実装してみてください！

参考

今回のコードはgithubで公開中なので参考にしてみてください！↓

https://github.com/hafilog/vue-sample/tree/master/components/pages/sample