Documentation Next.js

概要

レイアウトシフト（Cumulative Layout Shift, CLS）は、Webページの読み込み中に予期せず要素が移動することで発生します。この問題は、特にユーザーが操作中にコンテンツの位置が変わると非常に不快に感じられます。Next.jsでは、画像やフォントの読み込み方法を工夫することで、CLSを防ぎ、Core Web Vitalsのスコアを改善できます。この記事では、CLSを減らすための具体的なテクニックを紹介します。

画像によるレイアウトシフトの対策

next/imageを活用する

Next.jsのnext/imageコンポーネントを使用することで、画像の遅延読み込みやサイズの事前指定が可能になり、画像が後から読み込まれる際のレイアウトシフトを防ぐことができます。

  1. サイズの指定
    画像のwidthとheightを指定することで、画像が読み込まれる前にブラウザがスペースを確保します。これにより、画像が遅れて表示されたときに他のコンテンツが押し出されるのを防ぎます。

    <Image
  src="/path/to/image.jpg"
  alt="サンプル画像"
  width={800}
  height={600}
/>

  2. アスペクト比の保持
    縦横比を保持することで、レイアウトが崩れず、画面サイズに応じたスムーズな表示が可能です。また、fillプロパティを使って、画像が親要素いっぱいに広がるよう設定することも有効です。

  3. 優先度の設定
    LCP（Largest Contentful Paint）を改善するためには、主要な画像にpriorityプロパティを追加し、画像の読み込みを優先することも重要です。

Webフォントの最適化

Webフォントが読み込まれる前に一時的にデフォルトのフォントが表示され、フォント切り替え時にレイアウトがズレる場合があります。この問題を防ぐために、以下の対策が有効です。

  1. サブセット化
    使用する文字セットのみを含むフォントをサブセット化することで、読み込み時間を短縮し、レイアウトの切り替えを防ぎます。
  2. next/fontの活用
    next/fontを使用してフォントの読み込みを最適化することで、CLSを抑えることができます。この機能はビルド時にフォントを自動的に最適化し、余分なリクエストを減らします。

広告や動的コンテンツによるレイアウトシフト

広告や動的コンテンツは、ページが読み込まれる途中で表示されることが多く、レイアウトシフトの原因になります。これを防ぐには、表示領域を事前に確保しておくことが大切です。

具体的な対策

  1. サイズ指定
    広告枠や動的に表示されるコンテンツに対しても、事前にスペースを確保するためのサイズ指定を行い、他のコンテンツがズレるのを防ぎます。

まとめ

Next.jsでのレイアウトシフト対策は、ユーザー体験を向上させ、Core Web Vitalsのスコアを改善するために非常に重要です。next/imageやnext/fontを活用して、画像やフォントの読み込みを最適化し、広告や動的コンテンツの表示にも工夫を凝らすことで、レイアウトの安定性を高めましょう。

円