LCP

ラージェストコンテンツフルペイント

LCP（Largest Contentful Paint）の概要

Largest Contentful Paint（最大視覚コンテンツの表示時間）は、Web ページのパフォーマンスを測定するための指標の 1 つで、ページの主要なコンテンツがどれだけ早く描画されるかを示します。

LCP は、ユーザーがページのコンテンツにどれだけ早くアクセスできるかを示す重要な指標です。良い LCP スコアは、2.5 秒以内に達成することが目標とされています。画像が対象となることが多いです。

Next.js と TypeScript を使って LCP を改善する方法をいくつか紹介します。

画像最適化

画像はページの LCP に大きな影響を与える要素です。Next.js のnext/imageコンポーネントを使って、画像を最適化しましょう。

// pages/index.tsx
import React from 'react'
import Image from 'next/image'

const HomePage = () => {
  return (
    <div>
      <Image src="/path/to/image.jpg" alt="Sample Image" width={500} height={300} layout="responsive" />
    </div>
  )
}

export default HomePage

上記の例では、next/imageコンポーネントを使用して、画像を最適化しています。

クリティカルな CSS のインライン化

ページの表示速度を向上させるために、クリティカルな CSS（ページ上部に表示される要素に適用されるスタイル）をインライン化しましょう。これにより、ページのレンダリングをブロックする外部 CSS ファイルの読み込みを避けることができます。

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }

  render() {
    return (
      <Html>
        <Head>
          <style
            dangerouslySetInnerHTML={{
              __html: `
                /* ここにクリティカルなCSSを記述します */
                body {
                  margin: 0;
                  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
                    'Helvetica Neue', sans-serif;
                }
              `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

コードスプリッティング

Next.js では、デフォルトでコードスプリッティングが行われますが、動的インポートを使用してさらに最適化することができます。動的インポートを使用すると、ページが必要とするコンポーネントのみをロードすることができ、LCP を改善することができます。

// pages/index.tsx
import React, { useState, useEffect } from 'react'

const HomePage = () => {
  const [Component, setComponent] = useState<React.ComponentType | null>(null)

  useEffect(() => {
    const loadComponent = async () => {
      const { default: ImportedComponent } = await import('components/MyComponent')
      setComponent(() => ImportedComponent)
    }
    loadComponent()
  }, [])

  return <div>{Component ? <Component /> : <p>Loading...</p>}</div>
}

export default HomePage

上記の例では、import('components/MyComponent')を使って動的にコンポーネントをインポートしています。

LCP（Largest Contentful Paint）は、ページの表示速度を測定する重要な指標です。Next.js と TypeScript を使用して、画像最適化、クリティカルな CSS のインライン化、コードスプリッティングなどの手法を取り入れることで、LCP を改善することができます。これらの最適化により、ユーザー体験を向上させることができます。

Next.js を学ぶ一覧へ

LCP

ラージェスト コンテンツフル ペイント

LCP（Largest Contentful Paint）の概要

画像最適化

クリティカルな CSS のインライン化

コードスプリッティング

ラージェストコンテンツフルペイント