Lighthouseの紹介

前のセクションで見たように、Core Web Vitalsは、読み込みパフォーマンス（Largest Contentful Paint）、インタラクティブ性（First Input Delay）、視覚的な安定性（Cumulative Layout Shift）を通じて、ユーザーエクスペリエンスの側面に着目します。

このレッスンでは、Lighthouseと呼ばれるシミュレートされた環境を使用してCore Web Vitalsを測定する方法に焦点を当てます。

注: このレッスンではChrome Dev Toolsを使用します。ただし、Lighthouseを実行する方法はたくさんあります。

Lighthouseは、提供されたURLに対して一連の監査を実行することで機能します。これらの監査に基づいて、ページのパフォーマンスがどれだけ優れていたかに関するレポートを生成します。改善が必要な領域がある場合、レポートは改善方法に関する洞察を提供します。

健全なCore Web Vitalsを持つサイトとそうでないサイトの違いを見るために、Lighthouseレポートの2つの例を見てみましょう。

最適化された例

Lighthouseの動作例を見るために、私たちのホームページを使用します。

• Chromeを開く。
• シークレットウィンドウで、https://nextjs.dokyumento.jpに移動します。
• DevToolsを開き、Lighthouseタブをクリックします。
• レポートを生成をクリックします。

これによりレポートが実行され、60秒以内に完了するはずです。

注: サードパーティのプラグインがレポートに影響を与える可能性があるため、シークレットウィンドウでレポートを実行することが重要です。

さらに、広告ブロッカーはスクリプトの読み込みをブロックする可能性があり、不完全な監査結果になる可能性があります。パフォーマンスを測定するために、クリーンなペルソナを設定することを検討してください。

レポートの例

最適化されていない例

このチュートリアルの目的のため、最適化されていないアプリケーションを作成しました。

プロジェクトセットアップ

これは、訪問者が国の人口を検索して取得したり、ボタンをクリックしてポップアップモーダルを読んだりできる、基本的な最適化されていないアプリケーションです。このアプリケーションは、サードパーティライブラリの使用が避けられない大規模なアプリケーションでの作業の現実を模倣することを意図しています。

スターターコードをダウンロード

npx create-next-app@latest nextjs-lighthouse --use-npm --example "https://github.com/vercel/next-learn/tree/main/seo"

プロダクションビルドを実行

Lighthouseから正確なレポートを取得するには、アプリケーションは常にプロダクションビルドでテストする必要があります。プロダクションビルドを実行するには、プロジェクトディレクトリに移動します。

cd nextjs-lighthouse

next buildを実行してアプリケーションをビルドし、next startを実行してプロダクションモードでサーバーを起動します。

npm run build && npm run start

Chrome DevToolsでLighthouseレポートを実行してみましょう。レポートが完了したら、サイトを最適化し、バイタルを改善し始めましょう。

さらに読む

• Google Chrome: Lighthouse スコアリング計算ツール