Next.js フロントエンド パフォーマンス改善 画像編
前提
- lighthouseの使い方を知っている
現状確認
まずはChrome Developper Toolsをのlighthouseを利用して現状の状態を計測。
LCP（Leargest Contentfull Paint）に大きな問題があることを確認
※LCPは、ビューポート内で最も大きなコンテンツがどれだけ早く描画されるかを示す指標です。
現状のLCPは5.3sのため以下サイトに示されているMUSTの要件を1.3s超えてしまっています。
MUST：4秒以下
WANT：2.5秒以下
lighthouseを利用すると次のような修正候補の提案が表示されます。
可能な限り赤色を潰せるとGoodです。
プルダウンを開き内容を確認します。
画像のサイズが重い（約4.8MB）ことが確認できました。
改善
改善案1
画像のサイズが大きいので画像のサイズを小さくします。
AIに聞いたところ1920wで200〜350KB程度だと概ね問題ないとのことなので実際に試します。
※一般的な画像のファイルサイズについて調査をしましたが、基準値のようなもがなかったため「LCPが大きくならないこと」「利用している画像の解像度などが問題なく表示されているか」などの観点から適切なサイズを自身で決める必要がありそうです。
私はMacユーザなので以下の手順で画像のサイズを変えました。
- 画像を「プレビュー」で開く
- Macツールバーから「ファイルを選択」
- 「書き出す」を選択
- 「jpeg」形式を選択
- ファイルサイズが300KB以下になるようにスライダーを調節
- 「保存」ボタンをクリック
大幅に数値が改善しWANTの要件も満たすことができました。
LCP：5.3s → 1.7s（3.6s↓）
改善案2（+改善案1）
Next.jsのImageコンポーネントではなくCSSのbackground-imageを利用して実装されていたので、Imageコンポーネントを利用するようにします。
さらに数値が改善しました。
LCP：1.7s → 1.1s（0.6s↓）// 改善案1との差分
LCP：5.3s → 1.1s（4.2s↓）
まとめ
普段当たり前のように触っていると目が慣れてしまっていて違和感として感じづらくなっていましたが、計測や調査を進めていく中でUXの観点から感覚がおかしくなっていることに気づけました。
今回のような簡単な対応をすることで数秒早くできそうな箇所がいくつかありそうだと思ったのでパフォーマンスの改善をどんどん推進していきたいです。
参考記事
こちらの記事が大変参考になりました。
Discussion