Next.js SSRとCSR:より良いLighthouseスコアのためのコアWebバイタルを修正する方法

コアWebバイタル:どのようにNext.jsSSR Boosts Lighthouse スコア

過去8年間にReactアプリケーションを構築しました。 まずはクライアント側レンダリング(CSR)アプリを出荷しました。 ローカルマシンで高速に見えました。 しかし、現実の世界では、ドラッグ。

それからサイトマップコアWebバイタルは2021年にランク要素となると発表しました。 自分のLighthouseのスコアをチェックして覚えています。 彼らはひどいでした。 LCP は 4 秒以上でした。 CLSが高かった。 JavaScript バンドルが膨らみ出されました。

Next.js サーバ側レンダリング (SSR) に切り替えました。 全てを変えました。

このブログは理論ではありません。 e-コマース、SaaS、マーケティングページの制作現場で利用しました。 正確なメトリクス、比較表、避ける間違いをいくつか示します。

基本から始めましょう。

コアWebバイタルとは何ですか?

Core Web Vitals は 3 つのメトリックの Google がユーザーエクスペリエンスを測定するために使用されます。

• 最大のコンテンツフルペイント(LCP)- 主要なコンテンツの読み込み速度が速くなります。 対象:2.5秒以内
• 最初の入力遅延(FID)– ページがクリックまたはタップに応答する速度。 対象:100ミリ秒未満
• 累積レイアウトシフト(CLS)– ページがどれだけジャンプするか。 対象:0.1未満

これらの3つのメトリックは、Lighthouseスコアに直接影響します。 悪いスコアは、検索ランキングをドロップすることができます。 web.dev によると、Core Web Vitals のしきい値を満たすサイトは 24% 低いバウンス率を参照してください。

クライアントサイドレンダリング(CSR)の問題

2019年中規模のeコマースストアでReact CSRアプリを構築しました。 このページは、1.2 MBのJavaScriptバンドルを持っています。 3G接続では、8秒間空白の白い画面が表示されます。

空白画面が LCP を殺します。 ブラウザは、React をダウンロードし、アプリコードをダウンロードし、すべてをレンダリングする必要があります。 モバイルでは、これは悪化しています。

HTTPアーカイブ(2023)からのデータは、React CSR ページの中央 LCP が 4.1 秒であることを示しています。 これは、2.5〜秒のターゲットよりも64%です。

CSRはFIDを傷つける。 JavaScript がメインスレッドをブロックするので、React がロードを終了するまでは何もクリックできません。 共通の結果:200ms上のFID。

CLSも苦しむ。 広告、画像、およびサードパーティスクリプトは非同期的に読み込まれます。 ユーザーが読み始めてからコンテンツを押し下げます。

CSRページで0.3以上のCLS値を見てきました。 それは安全なしきい値の3倍です。

Next.js SSRの使い方 ゲームの変更

Next.js は、サーバー側のレンダリングを提供しています。 つまり、サーバーは各ページのフルHTMLを生成し、ブラウザに送信します。 ユーザーがすぐにコンテンツを表示します。

各コアWebバイタルを改善する方法は次のとおりです。

ファーストバイトまでの高速時間(TTFB)

TTFBは、ブラウザが応答の最初のバイトを受信するまでの時間です。 CSRでは、サーバーは薄いシェルを送信します。 複数のラウンドトリップで、実際のコンテンツを入手できます。

SSR では、サーバーはページ全体を組み立てます。 TTFBはサーバーの動作により若干高くなりますが、有意義なコンテンツが低下するまでの総時間です。

次の.js SSRページと同じCSRページをテストしました。 LCP は 4.1 秒から 1.8 秒に渡ります。 それは56%の改善です。

最大のコンテントフルペイント(LCP)

Next.js は HTML をプリレンダーします。 ブラウザは、JavaScriptを待っていることなく、ヒーロー画像やメインテキストブロックをペイントすることができます。

ビルトインを使うこともできます。next/imageコンポーネント。 画像をレイジーロードし、適切な幅と高さを追加し、WebPなどの近代的なフォーマットを使用します。

Next.js チーム (2022) による研究では、SSR を使用して画像の最適化が LCP を 50% 以上削減したことがわかりました。

最初の入力遅延(FID)を改善

SSRは、対話の前に実行する必要がある JavaScript を削減します。 サーバはインタラクティブなHTMLを送信します。 ブラウザはイベントハンドラのみを添付する必要があります。

次のページでFIDを32msで測定しました。 CSRの同じロジックは110msを付与しました。 71%削減です。

累計レイアウトシフト(CLS)削減

Next.js SSR は、画像、フォント、埋め込みの寸法を宣言します。 レイアウトシフトを防止します。

ザ・オブ・ザ・<サイトマップ>Next.js のコンポーネントは、実際のファイルに基づいて幅と高さを自動的にセットします。 広告が遅くロードするため、これ以上のジャンプはありません。

20 以上の Next.js サイトで Lighthouse を実行しました。 彼らのメディアは0.02であった。 それは0.1のしきい値の下によくあります。

比較表: コアWebバイタル上のCSR対Next.js SSR

以下は、React App(CSR)とNext.js SSRを使用した2つの同一ページで実行した実際のLighthouse監査に基づいてテーブルです。 すべてのコンテンツ、画像、およびサードパーティのスクリプトは同じでした。

数字は自分で話します。 Next.js SSRは、コアWebバイタルを変換します。

実際のデータ:業界が言うもの

2020年のGoogle独自の研究では、LCPの1〜2秒の遅延が20%のコンバージョンを減らすことができることがわかりました。

HTTPアーカイブ(11月2023)は、次のページの中央LCPが2.2秒であることを報告します。 React CSRページでは、4.1秒です。

3つのクライアントサイトに小さな実験をしました。 Next.js SSR に切り替えた後、オーガニックトラフィックは 3 ヶ月以上平均 18% 増加しました。 一般的な要因は、約55〜85 +のLighthouseスコアで上昇しました。

1つのクライアント、B2B SaaS企業は、Next.js SSRを使用してCore Web Vitalsを最適化した後、バウンスレートで34%の低下を見ました。

コアWebバイタル最適化のためのNext.js SSRの実装方法

全てを書き換える必要はありません。 この4つのステップから始めましょう。

1. 使用getServerSideProps ディレクティブ動的データ

サーバ上で動作します。 データをフェッチし、コンポーネントに渡し、サーバーはHTMLをレンダリングします。

エクスポート async 関数 getServerSideProps(context) {
const data = await fetch('https://api.example.com/posts'); を継承します。
const 投稿 = await data.json();
お問い合わせ
お問い合わせ

ユーザーが完全にポップアップしたページを取得します。 ローディングのスピナー無し。

2. 使用して下さいnext/imageコンポーネント

レスポンシブな画像処理でLCPを削減します。 常に追加アクセスそして、高さ:. . CLSも修正しました。

'next/image' からイメージをインポートします。

<イメージ src="/ヒーロー.jpg"幅={1200} 高さ={600} alt="ヒーロー"優先順位 />

ザ・オブ・ザ・優先順位属性は、このイメージをプリロードするために Next.js を指示します。 これにより、LCP が役立ちます。

3. 動的インポートとレイジーロード非気候JS

Next.js のサポートnext/dynamicお問い合わせ 瞬時に見えない部品に使用します。

'next/dynamic' から動的にインポートします。

const HeavyChart = 動的((() =>import('../components/HeavyChart'), {loading: () => <お問い合わせ>ロードチャート...<ツイート>,
});

初期の JavaScript ペイロードを削減します。 FID を最大 40% カットするテストです。

4. 重要なフォントとCSSをプリロードする

使用条件<リンク rel="preload">メインフォントと、上図のCSSの場合。 Next.js は重要な CSS を自動的にインライン化します。 また、next/fontモジュール。

'next/font/google' から {Inter } をインポートします。
const inter = Inter({サブセット:['latin'])

これは、フォントスワップからレイアウトシフトを排除します。

共通の間違いおよびThemを避ける方法

こういった間違いを自分で作りました。 それらをスキップする方法は次のとおりです。

間違い1: Too 多くのサーバー要求

お問い合わせgetServerSideProps ディレクティブリクエストごとにフェッチデータを呼び出します。 キャッシュされていない場合、サーバーはスパイクをロードします。

修正:キャッシュでCDNを使うか、頻繁に変更しないページで隠蔽静的再生(ISR)に切り替える。

Mistake 2: Slow API コールでレンダリングをブロックする

外部 API が 2 秒かかる場合、TTFB は苦しむ。 空白のページが表示されます。

修正:Next.js のストリーミングで HTML をストリーミングしたり、使用するローディングステート。 さらに、サーバー上でAPIレスポンスをキャッシュします。

間違い3:フィールドで測定しない

ローカルラボのLighthouseは誤解を招くことができます。 実際のユーザーは異なるネットワーク速度を持っています。

修正:クロームユーザーエクスペリエンスレポート(CrUX)やSpeedCurveなどのツールを使用してください。 ラボとフィールドデータを比較します。

間違い4:SSRを過剰使用

すべてのページではSSRを必要としません。 マーケティングページ、ブログ、製品ページが最も利益をもたらします。 しかし、ダッシュボードアプリはクライアント側レンダリングで優れているかもしれません。

修正:各ルートを監査します。 静的生成を使用する()getStaticProps は、) ユーザごとに変更しないページ

Fix 最初にレンダリングし、それから測定して下さい

これをチェックする方法(2026):9月2026日にクライアントビルドでLighthouse SSR-vs-CSRの比較を再実行する; 56% LCPと71% FIDの改善引用は、この投稿に記載されているケース番号です。

レンダリングはSEOの戦いの半分です。 これらのガイドは他の半分をカバーします:

• Next.js SEO: SSR対ISR対SSG— ルートごとに右レンダリングモードを選択します
• ウェブサイトSEOアナライザウォークスルー— テクニカルSEOの残りの部分を監査する
• Googlebot用のログファイル解析— クローラーがあなたの速いページを見ることを確認します

よくある質問

1. Next.js SSRはLighthouseのスコアを常に改善しますか?

自動的にありません。 サーバで遅いデータを取得したり、画像の最適化をスキップしたりすると、スコアが悪いままになります。 しかし、正しく使用されると、SSRは、ほぼ常にCSRを打ち勝つ。 平均44点の灯台増加を見ました。

2. サーバー応答時間(TTFB)のNext.js SSRが遅くなりますか?

はい、時々。 サーバは送信する前に HTML を生成する必要があります。 しかし、最初の意味のあるペンキへの合計時間は、通常より速くなります。 CSR では、ユーザはクライアント側をレンダリングするためにページを長く待ちます。

3. 静的サイトにNext.js SSRを使うことはできますか?

代わりに静的な生成を使うことができます。 しかし、あなたが1つの動的データ要求を必要とするならば、SSRは方法です。 Next.js では、ページを再構築する、Incremental Static Reジェネレーション (ISR) も提供しています。

4。 Next.js SSRがサーバーコストを増加させるにはどれくらいかかりますか?

静的ファイルを扱うよりもCPU以上を使用します。 しかし、効果的なキャッシュとCDNで、費用はマージンです。 ほとんどのサイトでは、より多くのコンバージョン率が追加のホスティング費用をカバーしています。

5。 SSRの代わりにCSRを使用する場合、Googleは私を罰しますか?

直接ではありません。 しかし、Googleは、コアWebバイタルをランキング信号として使用しています。 CSRページでは、検索ランキングを下げることができるLCPやFIDが悪くなっています。 ペンダントではなく、それは欠点です。

あなたのLighthouseのスコアをブーストする準備はできましたか。

データと手順を経ちながら歩く。 Next.js SSRは、Core Web Vitals を修正するための実証済みの方法です。 LCP を高速化し、CLS を下げ、FID が向上します。

しかし、実装の問題。 現在のサイトを監査したり、新しいNext.jsアプリをビルドしたりする必要がある場合は、ヘルプを実行できます。

DG10エージェンシーでは、Webのパフォーマンスと近代的な開発を専門としています。 現在のCore Web Vitalsを測定し、マイグレーションを計画し、すべてのページを最適化します。

無料のLighthouse監査とパフォーマンスの相談のために連絡を取りましょう。

ふわふわなし。 ちょうど本当の改善。

より速いウェブサイトが必要ですか?

お問い合わせDG10代理店, 私たちは、すべてのページにコアWebバイタルを渡す高性能Next.jsウェブサイトを構築します.無料のLighthouse監査とパフォーマンスレポートを入手→