ビジネスサイトのためのCore Web Vitals最適化

ページの表示が遅いと、ユーザーは最初の3秒で離脱します。Googleはそれを把握しており、2021年以降Core Web Vitalsをランキング要因にしています。ビジネスサイトにとって、速度はもはや技術的な細部ではなく、売上そのものです。

必ず押さえるべき3つの指標

LCPは最大要素が表示されるまでの時間を測ります。INPは入力の遅延を測ります。CLSはレイアウトのずれを測ります。良いページにはLCP 2.5秒未満、INP 200ms未満、CLS 0.1未満が必要です。

• LCP — 画像を最適化し、ファーストビューのコンテンツを優先する。
• INP — JavaScriptを分割し、メインスレッドのブロックを避ける。
• CLS — 画像・フォント・広告に固定サイズを確保する。

私たちが95超を達成した方法

私たちはアーキテクチャから始めます。サーバーサイドレンダリング、ルート単位のバンドル分割、そしてファーストビュー以下のすべてを遅延読み込みします。画像はデバイスサイズに合わせたAVIF/WebPで配信し、フォントはfont-display: swapで読み込み、テキストが即座に表示されるようにします。

パフォーマンスは一度きりの作業ではありません。すべてのプルリクエストにおける規律です。

— Huy Nguyễn

最後に、ラボだけでなく実機での指標を追跡するため、リアルユーザーモニタリング（RUM）を導入します。それが、見栄えの良い数値と本当に速い体験との違いです。