本PJではNextJS公式チュートリアルを元に実施します
今回はchapter3の内容となります！
Webサイトのパフォーマンスを改善する「最適化」
Webサイトの印象を左右する「フォント」と「画像」。これらはデザインの要ですが、同時にページの表示速度を遅くする主な原因でもあります。表示が遅かったり、レイアウトがガタついたりすると、ユーザーはすぐに離れてしまいますよね。
今回は、Next.jsがこれらの問題をどうスマートに解決してくれるのかを見ていきます。
✍️ フォントの最適化
カスタムフォントを使うとお洒落なサイトになりますが、読み込みのタイミングで一瞬だけ標準フォントが表示され、画面が「ガクンッ」とズレる現象に遭遇したことはありませんか？
これは CLS（Cumulative Layout Shift） と呼ばれるもので、ユーザー体験を損なう大きな原因です。
Next.jsのアプローチ (next/font)
Next.jsは、この問題を解決するためにnext/fontという機能を提供しています。
- ビルド時にフォントを自動でダウンロード: 開発者がプロジェクトをビルドする際に、使用するWebフォント（Google Fontsなど）をダウンロードし、アプリ内に同梱してくれます。
- セルフホストで配信: ダウンロードしたフォントを外部サーバーからではなく、自身のサーバーから静的アセットとして配信します。
これにより、ユーザーがサイトを訪れたときにフォントを読み込むための余計な通信が発生しなくなり、CLSを根本から防ぐことができます。
🖼️ 画像の最適化
オンラインショップなどで、商品画像がなかなか表示されなくてイライラした経験、ありますよね。サイトが重くなる最大の原因は、多くの場合「画像」です。
従来は、画面サイズごとに画像を用意したり、表示が崩れないようにCSSを工夫したりと、開発者の手作業が多く大変でした。
Next.jsのアプローチ (<Image>コンポーネント)
Next.jsでは、標準の<img>タグの代わりに、最適化機能が詰まった<Image>コンポーネントを使うだけで、これらの問題をすべて自動で解決してくれます。
-
レイアウトシフトの防止:
widthとheightをpropsで渡すことで、画像が読み込まれる前に表示領域を確保し、ページのガタつきを防ぎます。 - 画像の自動リサイズ: PCやスマホなど、閲覧デバイスの画面サイズに合わせた最適なサイズの画像を自動で生成・配信し、無駄なデータ通信をカットします。
- 遅延読み込み（Lazy Loading）: ユーザーがスクロールして画像が表示領域に入る直前まで、画像の読み込みを行いません。これにより、ページの初期表示が劇的に速くなります。
- 最新フォーマットの利用: ブラウザが対応していれば、JPEGやPNGよりも軽量で高品質なWebPのような最新画像フォーマットを自動で選択して配信します。
今回はここまで！
ご覧いただきありがとうございます！