Nuxt.jsにて表示する画像を圧縮してパフォーマンスを向上する方法

概要

今回はポートフォリオ作成した際にフロントのパフォーマンス改善した方法の一つを紹介します。
結論から言うと、@aceforth/nuxt-optimized-imagesというライブラリを追加し、表示する画像を圧縮することで
パフォーマンス改善を行います。

環境

/	バーション
nuxt	2.15.8

導入方法

まずは先程のライブラリをインストールします。

yarn add @aceforth/nuxt-optimized-images

注意点として上記ライブラリをインストールするだけでは画像は圧縮されません。
圧縮したい拡張子によって追加でインストールが必要です。
今回はjpeg、pngを圧縮すると仮定して下記のライブラリを追加します。

yarn add imagemin-mozjpeg@9.0.0 imagemin-pngquant

imagemin-mozjpegの最新パージョンの10.0.0はバグがあるようで9.0.0を指定しています。
詳しくは以前の記事を参照してください。

たったこれだけで表示されるjpegとpngの拡張子を持った画像は圧縮されます。

さらなる圧縮方法

webpに変換することでさらに容量を小さくすることもできます。
webpとはjpegなどと同様な拡張子です。

Step 1 ライブラリの導入

先程のライブラリに追加して下記を追加します。

yarn add webp-loader

このライブラリは?webpがついている画像URLをwebp形式に自動変換してくれます。

Step 2 画像表示用のタグを用意

下記の用にtemplateにタグを記載します。

<template>
  <picture>
    <source
      srcSet="画像のURL?webp"
      type="image/webp"
    >
    <img
      src="画像のURL"
    >
  </picture>
</template>

上記のようにするとwebpの拡張子画像で表示されます。
詳しい仕様等は下記ドキュメントを参照してください。

まとめ

ポートフォリオを作り終わってブラウザのパフォーマンスをLighthouse等で確認したときにパフォーマンスが30になっていて、
上記の圧縮を実行したら80までとりあえず上げることができました。
アプリの作成には最適化も考えながら構築しないといけないことですね。