t8.dev

🇺🇸

NUXTで作ったWebサイトの表示速度を高速化する

公開日:2021/08/11
更新日:2021/08/29

はじめに

心理学を使ったTODOアプリを開発している、@takasqrです。

心理学を使ったTODOアプリ | todo8

心理学を使ったTODOアプリ | todo8

nuxtとvuetifyで作ったこのサイトですが、出来上がった時はあまり表示速度が速くありませんでした。 Lighthouseでスコアを測ったらパフォーマンスのスコアが37でした。。。遅い。。

少しずつ改善してきて、今では前よりだいぶ速くなってきました。 Lighthouseのパフォーマンスのスコアも70まで上がりました。

やったことを紹介します。

デプロイ構成は、

target static
ssr true

です。

やったこと

いらないコンポーネントを読み込まない

v-ifで絶対trueにならないコンポーネントはありませんか?

私はありました。笑

いらないライブラリを消す

必要だと思ってインストールしたけど、結局使ってないライブラリをアンインストールすることでバンドルされるファイルの容量を減らすことができたりします。

この時もちろんコンポーネントのimportは消します。

画像遅延読み込み

imgタグに遅延読み込み用の粗い画質の軽い画像を設定することで、まず遅延読み込み用の画像を表示してくれます。

<v-img
    :src="`/cover-image/${article.image}`"
    :lazy-src="`/cover-image/${article.lazy}`"
/>

画像をプリロード

イメージファイルや.jsファイルをheadで事前に読み込むことで、bodyで必要になってからダウンロードするより早い時点で画像が利用可能になります。

アイキャッチ画像を事前に読み込むことにしました。

<script>
export default {
  head () {
    return {
      link: [
        {
          rel: 'preload',
          // /cover-image/content_obi-onyeador-9VFdIsfkn0M-unsplash_m.jpg
          href: '/cover-image/' + this.document.image,
          as: 'image'
        }
      ]
    }
  }
}
</script>

画像サイズ変更

アイキャッチ画像などの画像を、このサイトである程度画質を保ったまま容量を落とすことが出来ます。

サイズも必要最低限のサイズに変更します。

https://squoosh.app/

vuetifyアセット最適化

vuetifyはデフォルトでgoogleフォントとマテリアルアイコンのセットを読み込むようになっています。

ですが今回はgoogleフォントは必要なかったのと、アイコンも数個しか必要ないので

  • googleフォントを読み込まないように
  • 必要なマテリアルアイコンのみ読み込む

ように変更しました。

ちなみにvuetifyの使っているコンポーネントのみビルドに含めてくれるツリーシェイクは、nuxt createからプロジェクトを作っていればデフォルトで有効になっているみたいです。

ライブラリをdefer

初期表示で必要ないライブラリをdeferで読み込むことで、画面描画のスピードを上げることができます。

google analyticsとclarityをdeferで読み込む事にしました。

cdn配信

.html.jsファイルを世界中の配信用高速サーバーにキャッシュして配信することで、オリジンサーバーから配信するよりサーバーのレスポンス時間が短くなることがあります。

ちょうどDNSサービスでcloudflareを使っていて、CDN配信も無料プランで出来たのでcloudflareを使っています。

他にもAWSのcloudfrontなどのサービスを使うことでCDN配信することが出来ます。

webpack チャンク

webpackは

ビルドされるjsファイルを分割する設定です。

ある程度細かくすることで、現在のページでは必要ない javascriptコードを読み込まなくすることができます。

細かくし過ぎるとダウンロードのオーバーヘッドが影響してスコアが悪化することもあるので注意です。

v-img → img

  1. v-imgで設定したアイキャッチ画像がLargest Contentful Paintに指定される
  2. v-imgで指定された画像はビルドされた.jsファイルの中で呼び出される
  3. ビルドされた.jsファイルはdeferがついているので画像が呼び出されるのは一連のファイルのなかでも後半になってしまう
  4. Largest Contentful Paintのスコアが悪くなってしまう

ということが起きているようでした。

それだったら普通のimgタグにすればどうだろうと試したら効果的面でした。

さいごに

様々な対策をすることでlighthouseのパフォーマンスのスコアを37から70まで上げることができました。

関連記事

Nuxt3にBridgeを使って移行してみる【Nuxt2→3】
【Nuxt】create-nuxt-appをインストールして始める
【サンプル有】@nuxt/contentを1ページでざっくり理解する
NUXTの開発環境をVSCodeとDockerで作る
【サンプル有】@nuxt/i18nで多言語対応する
【サンプル有】Nuxtでhead内にmetaタグを出力する2つの方法

オススメ記事

5年間ほぼ毎日プログラミングの勉強をするためにやったこと
論文と本から学ぶ、プログラミング独学のコツ
目標達成率を高める if thenプランニングとは!?【本とアプリも紹介】