React Academy · レッスン

ReactでのImageとFontの最適化

適切なdimensions、formats（AVIF/WebP）、font-displayを指定してnext/imageまたはlazy-loaded を使います。

「ReactでのImageとFontの最適化」はCoddyKit上の無料React Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

画像が重要な理由

画像は通常、ページ上で最も大きなリソースです。最適化されていない画像は、LCP の悪化、ページ読み込みの遅延、高い帯域幅コストにつながります。特にモバイルでは影響が大きくなります。

Next.js Image コンポーネント

next/imageは、画像を自動的に最適化します。デフォルトでの遅延読み込み、レスポンシブな srcSet、最新の形式（WebP／AVIF）、CLS を防ぐ適切なサイズ指定に対応しています。

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority // preload above-the-fold images
  sizes="(max-width: 768px) 100vw, 50vw" // responsive sizing
/>

通常の React での遅延読み込み

ネイティブの<img>要素にloading='lazy'を追加します。ブラウザは画面外の画像がビューポートの近くまでスクロールされるまで、読み込みを遅延させます。

// Below-the-fold images:
<img src="/product.jpg" alt="Product" loading="lazy" />

// Above-the-fold (hero) — eager to avoid LCP delay:
<img src="/hero.jpg" alt="Hero" loading="eager" fetchPriority="high" />

srcSet によるレスポンシブ画像

複数のサイズを用意し、画面に適した解像度をブラウザに選ばせます。これにより、幅 400px のモバイル画面に 2000px の画像をダウンロードするような無駄を避けられます。

<img
  src="/photo-800.jpg"
  srcSet="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  alt="Photo"
/>

Blurhash／スケルトンプレースホルダー

画像の読み込み中にぼかしたプレースホルダーを表示し、レイアウトシフトを防いで体感パフォーマンスを向上させます。

// With next/image blur placeholder:
<Image
  src="/photo.jpg"
  alt="Photo"
  width={800}
  height={600}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQ..." // tiny base64 blur
/>

フォント読み込み戦略

フォントはレンダリングをブロックします。font-display: swapを使うと、カスタムフォントの読み込み中にフォールバックフォントを表示でき、FOIT（Flash of Invisible Text）を減らせます。

/* In global CSS: */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/MyFont.woff2') format('woff2');
  font-display: swap; /* show fallback, swap to MyFont when ready */
}

Next.js のフォント最適化

next/fontは Google Fonts をビルド時に読み込み、自分のサーバーから配信し、font-display: optionalを適用してフォント切り替えによる CLS をなくします。

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});

export default function RootLayout({ children }) {
  return <html className={inter.variable}><body>{children}</body></html>;
}

フォントのサブセット化

必要な文字セットだけを読み込みます。Unicode 全体を含むフォントは 1MB 以上になることがありますが、Latin サブセットは通常 30〜80KB です。

// Google Fonts URL with subset:
https://fonts.googleapis.com/css2?family=Roboto&subset=latin

// next/font:
const roboto = Roboto({ weight: '400', subsets: ['latin'] });

重要なフォントのプリロード

ファーストビューに表示されるフォントをプリロードし、HTML の解析と並行して読み込むことで、レンダリングをブロックする時間を短縮します。

<link
  rel="preload"
  href="/fonts/MyFont.woff2"
  as="font"
  type="font/woff2"
  crossOrigin="anonymous"
/>

CDN とキャッシュ

画像とフォントを、長いキャッシュ TTL（Cache-Control: max-age=31536000, immutable）を設定した CDN から配信します。コンテンツハッシュ付きのファイル名を使うと、常に新しいファイルをキャッシュから取得できます。

確認問題

ウェブフォントに対して font-display: swap は何をしますか？

まとめ

自動最適化にはnext/imageを使い、通常の React ではネイティブのloading='lazy'と srcSet を使います。<picture>のフォールバックとともに AVIF／WebP を配信します。ウェブフォントにはfont-display: swapを適用し、Google Fonts のセルフホスティングにはnext/fontを使います。また、ファーストビューに必要なリソースをプリロードします。

よくある質問