私のサイトの表示速度がやたら遅い。。🤯
構成としてはNuxt Contentを使ってSSG、UIフレームワークとしてVuetify、デプロイ先としてNetlifyを使っています。
どうにか改善出来ないものか、と思い色々試してみました。
先にこのブログの制作環境と合わせ、 遅くなっている原因になっている可能性のあるライブラリも合わせて記載します。
検証した環境
| 1 | nuxt | 2.14.3 |
| 2 | @nuxt/content | 1.8.1 |
| 3 | vuetify | 1.11.2 |
| 4 | nuxt-fontawesome | 0.4.0 |
サイトの表示速度
Lighthouseを使ってページをチェックしてみました。
トップページ
PCサイズ
SPサイズ
SPのパフォーマンスひっくいwww ギャグだ。。笑
記事詳細ページ
↓のページが大きめのgifを使っていて画像も多く利用していたのでこちらで試してみました。
AlfredのワークフローをNodeで作成する | tech-broccoli.life
PCサイズ
SPサイズ
総じてSPサイズのパフォーマンスが低い。
PCサイズも全く褒められたものではないので出来る限りの対処してみます。
対策としてやったこと
画像等をLazy Loadする（効果薄、ただし体感速度は向上）
画像をLazy Load（遅延読み込み）する事で、全ての画像を読み込む前にページ自体を読むこむ事が出来るようになります。
ページを開いた時に画像が中々表示されず、更にはその表示が終わるまでサイトの読み込み中のマークが出続けていたため試してみました。
実装には nuxt-lazy-load というライブラリを使用しました。
トップページ
PCサイズ
SPサイズ
逆にスコアが悪くなってる。。。🤯
記事詳細も結果が変わらなかったので記事詳細の画像はなしで。
個人的な感想としてはスコアは悪くなったのですが、ページ自体の読み込み速度（ブラウザのローディングがくるくる回っている時間）は速くなったので、 体感としては速くなったイメージでした。
imgにdecoding=“async”を設定する（効果薄、ただし体感速度は向上）
Lazy Loadを調べている中で知ったことなのですが、
Lazy Load以上に設定も楽で良さそうな decoding="async" という存在を知りました。
decoding=“async” VS loading=“lazy” — ブログ | 株式会社Spelldata
Lazy Load と decoding=“async” は併用出来ない、との事なので、 Lazy Loadを外して decoding=“async” のみを設定して計測してみました。
SPサイズ
うん、変わらないww
けど、Lazy Loadと違って画面に表示されない画像も非同期で取得してくれているためか、 画像がスムーズに表示されるように感じました！
（私はLazy Loadではなくこちらを導入する事にしました）
VuetifyのdefaultAssetsをなくす（PCに効果あり）
Lighthouseを調べた時以下の2つの項目が表示時間に影響を与えているよう
- materialdesignicons.min.css
- materialdesignicons-webfont.woff2
どちらもマテリアルデザイン関係の何か 🤔
最初入れた覚えがなくて「？」となっていたのですが、Vuetifyの設定によって自動的に使われるのですね。
自動的に読み込ませなくするためにVuetifyの defaultAssets をOFFにして改めて計測してみます。
トップページ
PCサイズ
SPサイズ
PCサイズはかなり良くなりました！
SPサイズは少し良くなったけど、まだまだ。
記事詳細ページ
PCサイズ
SPサイズ
PCは少し良くなって、SPは少し悪くなってる。
Font Awesomeの必要なフォントのみをimport（PC効果小、SP効果大）
Font Awesomeを導入した際に「Font Awesomeは気をつけないと全てのフォントを読み込んでしまうため、app.jsの容量が大きくなってしまう」という記事を見ました。
（その時点で必要なフォントだけ読み込めよ、という話なんですがw）
単純な話、ファイルが軽量になればそれだけサーバーからファイルをDLする時間が短くなります。
そのためFont Awesomeを必要なフォントだけ導入するようにしてみました。
トップページ
PCサイズ
SPサイズ
必要なFont Awesomeのみにする事でSPがすごく改善されました！
SPはjsのバンドルサイズが小さくなる事がパフォーマンスに直結するのですね。
PCも最初と比べ 74 → 88 とだいぶ良くなりました！
記事詳細ページ
PCサイズ
SPサイズ
SPサイズは1番最初に測った時より全体的に悪くなってる…w
これは画像サイズが大き過ぎる、mp4を使うべきところでgifを使っている、等画像関係の指摘が大きい模様。
これ以外の対応をした時にまた更新します！
