Lighthouseの紹介
前のセクションで見たように、コアウェブバイタル (Core Web Vitals) は、読み込みパフォーマンス（Largest Contentful Paint）、インタラクティブ性（First Input Delay）、視覚的安定性（Cumulative Layout Shift）を通じてユーザーエクスペリエンスの側面に焦点を当てています。
このレッスンでは、Lighthouse と呼ばれるシミュレーション環境を使用してコアウェブバイタルを測定する方法に焦点を当てます。
注: このレッスンでは Chrome Dev Tools を使用します。ただし、Lighthouseを実行する方法は多数あります。
Lighthouseは、提供されたURLに対して一連の監査を実行することで動作します。これらの監査に基づいて、ページのパフォーマンスに関するレポートを生成します。改善が必要な領域がある場合、レポートは改善方法についての洞察を提供します。
健全なコアウェブバイタルを持つサイトと持たないサイトの違いを見るために、Lighthouseレポートの2つの例を見てみましょう。
最適化された例
Lighthouseの動作例を見るために、私たちのホームページを使用します。
- Chromeを開きます。
- シークレットウィンドウで
https://nextjs.orgに移動します。 - DevToolsを開き、Lighthouseタブをクリックします。
- レポートを生成をクリックします。
これで60秒未満でレポートが実行されます。
注: サードパーティのプラグインがレポートに影響を与えるため、シークレットウィンドウでレポートを実行することが重要です。
さらに、広告ブロッカーはスクリプトの読み込みをブロックする可能性があり、不完全な監査結果をもたらします。パフォーマンスを測定するためにクリーンなペルソナを設定することを検討してください。
以下はレポートの例です:
最適化されていない例
このチュートリアルの目的のために、最適化を一切行っていないアプリケーションを作成しました。
プロジェクト設定
これは基本的な最適化されていないアプリケーションで、訪問者は2つのことができます: 国を検索して人口を取得すること、ボタンをクリックしてポップアップモーダルを読むことです。このアプリケーションは、サードパーティライブラリの使用が避けられない大規模なアプリケーションを模倣しています。
スターターコードのダウンロード
プロダクションビルドの実行
Lighthouseから正確なレポートを得るためには、アプリケーションをプロダクションビルドでテストする必要があります。プロダクションビルドを実行するには、プロジェクトディレクトリに移動します:
next build を実行してアプリケーションをビルドし、next start を実行してプロダクションモードでサーバーを起動します。
Chrome DevToolsでLighthouseレポートを実行しましょう。レポートが完了したら、サイトを最適化しバイタルを改善していきましょう。
さらなる学習
- Google Chrome: Lighthouseスコア計算機