見出し画像
Photo by pansansui

【完走目前】「なんとなく」は卒業。Web Vitals で React アプリの健康状態を数値化し、最高スコアを叩き出す方法

関野泰宏

ついに99日目です。

明日の100日完走を目前に控えた今日、学習の総仕上げとして取り組むのは「パフォーマンスの『数値化』と Web Vitals」　です。

「なんとなく速そう」ではなく、Googleが定義する指標を用いて**「誰が見ても爆速なアプリ」*　*であることを証明する術を学びましょう！

はじめに：速さは「正義」であり「売上」である

「読み込みが3秒遅れるだけで、ユーザーの半分が離脱する」と言われる現代。

Reactで素晴らしい機能を作っても、重ければ使ってもらえません。今日は、Googleが提唱するCore Web Vitalsを軸に、アプリのパフォーマンスを科学的に測定・改善する手法を整理します。

💡 1. 注目すべき 3つの重要指標 (Core Web Vitals)

  1. LCP (Largest Contentful Paint): 「読み込みスピード」。一番大きなコンテンツが表示されるまでの時間。2.5秒以内が理想。

  2. INP (Interaction to Next Paint): 「応答性」。クリックなどの操作をしてから、画面に反応が出るまでの時間。200ミリ秒以内が理想。

  3. CLS (Cumulative Layout Shift): 「視覚的な安定性」。読み込み中に画像がガクッと動いて誤クリックを誘発していないか。0.1以下が理想。

💡 2. React 特有のボトルネックを探す

Lighthouse（79日目に触れたツール）でスコアが低い場合、Reactでは以下の3点を疑います。

  • JavaScript のサイズ: ライブラリを入れすぎていないか？ → import() による Code Splitting で解決。

  • 無駄な再レンダリング: 親が動くたびに子が動いていないか？ → React.memo や useMemo で解決。

  • 初期通信の多さ: APIを叩きすぎていないか？ → React Query のキャッシュで解決。

💡 3. reportWebVitals の活用

Create React App や Next.js には、実際のユーザー環境での数値を測定するための reportWebVitals という関数が組み込まれています。

// 💡 コンソールにパフォーマンス数値を出力して確認できる
reportWebVitals(console.log);

これを分析ツール（Google Analyticsなど）に送ることで、自分のPCではなく「ユーザーの本物の環境」でアプリがどう動いているかを知ることができます。

📝 99日目のまとめと課題

✅ 本日の習得ポイント

  • Core Web Vitals: LCP / INP / CLS の3大指標を理解する。

  • 数値による評価: 「速い」の定義を感覚から数値へ。

  • 継続的な改善: リリースして終わりではなく、スコアを監視し続ける文化。

📝 99日目の課題

  1. 自分のポートフォリオサイトや開発中のアプリを、Chromeのシークレットモードで開き、Lighthouse で測定してみてください。

  2. LCP（最大コンテンツの表示）が何秒か確認し、その「最大コンテンツ」が画像なら、WebP形式への変換や loading="lazy" の付与を検討しましょう。

#エンジニアと繋がりたい #プログラミング学習 #React #100DaysOfCode #今日の積み上げ #WebVitals #Lighthouse

いいなと思ったら応援しよう！