Core Web Vitals：測定と改善でWebパフォーマンス向上

Core Web Vitalsが重要な理由

美しいウェブサイトを構築しても、遅いと感じられるとユーザーは離脱してしまいます。Core Web Vitalsは、Googleが実際のユーザー体験を測定するための指標です：Largest Contentful Paint (LCP)、First Input Delay (FID)、Cumulative Layout Shift (CLS)。これらは検索ランキングに影響し、さらに重要なのは、訪問者が滞在するかどうかです。このガイドでは、測定と改善の方法を紹介します。

3つの指標を理解する

各指標は、読み込み、インタラクティブ性、視覚的安定性の異なる側面を捉えます。

注：FIDは2024年にInteraction to Next Paint (INP)に置き換えられますが、最適化の原則は同様です。

Core Web Vitalsの測定方法

ラボデータとフィールドデータの両方が必要です。ラボツールは条件をシミュレートし、フィールドデータは実際のユーザーを反映します。

1. Chrome DevTools Lighthouse：Lighthouseタブで監査を実行します。ラボスコアと改善の機会を提供します。
2. PageSpeed Insights：URLを入力すると、Chrome User Experience Report (CrUX)からのフィールドデータとラボの提案が表示されます。
3. Search Console：Core Web Vitalsレポートでグループレベルのフィールドデータを確認します。
4. Web Vitals JavaScriptライブラリ：web-vitalsをサイトに追加して、実際のユーザー指標を収集します。

import {onLCP, onFID, onCLS} from 'web-vitals';

onLCP(console.log);
onFID(console.log);
onCLS(console.log);

このデータを使用してパターンを特定し、修正の優先順位を付けます。

Largest Contentful Paint (LCP)の改善

LCPはしばしば最も影響の大きい指標です。以下の領域を最適化します：

• 画像の最適化：画像を圧縮し、WebPやAVIFを使用し、レスポンシブサイズで配信します。Image Compressorのようなツールは、目に見える品質劣化なしでファイルサイズを削減するのに役立ちます。
• 重要なリソースのプリロード：ヒーロー画像やフォントに<link rel="preload">を使用します。
• レンダリングをブロックするリソースの排除：クリティカルCSSをインライン化し、非クリティカルなJavaScriptを遅延させます。
• CDNの使用：ユーザーに近い場所からアセットを配信します。
• アセットのキャッシュ：静的ファイルに長いキャッシュ寿命を設定します。

例：LCP画像をプリロードする：

<link rel="preload" as="image" href="#">

First Input Delay (FID)の改善

FIDは応答性を測定します。長いJavaScriptタスクはメインスレッドをブロックします。

• 長いタスクの分割：setTimeoutやrequestIdleCallbackを使用してメインスレッドに譲ります。
• メインスレッド作業の最小化：未使用のJavaScriptを削除し、コード分割し、非クリティカルなスクリプトを遅延させます。
• Web Workersの使用：重い計算に使用します。
• 大きな同期スクリプトの回避：サードパーティスクリプトを非同期で読み込みます。

Lighthouseの「Minimize main-thread work」と「Reduce JavaScript execution time」の機会で監査します。

Cumulative Layout Shift (CLS)の改善

CLSは要素が予期せず移動するときに発生します。一般的な原因と修正：

• 寸法のない画像：常にwidthとheight属性を設定するか、CSSのaspect-ratioを使用します。
• 広告、埋め込み、iframe：プレースホルダーまたは固定サイズのコンテナでスペースを確保します。
• 動的コンテンツの挿入：ユーザー操作によってトリガーされない限り、既存のコンテンツの上にコンテンツを挿入しないようにします。
• Webフォント：font-display: swapを使用し、フォントをプリロードして、不可視テキストやレイアウトシフトを回避します。

例：画像のスペースを確保する：

<img src="#" width="800" height="600" alt="...">

継続的なモニタリングのためのツールとワークフロー

パフォーマンスは一度きりの修正ではありません。開発プロセスにモニタリングを統合します：

• Lighthouse CI：プルリクエストごとに監査を実行し、リグレッションをキャッチします。
• Real User Monitoring (RUM)：web-vitalsライブラリを使用し、データを分析プラットフォームに送信します。
• パフォーマンスバジェット：指標のしきい値を設定し、超えた場合にビルドを失敗させます。

定期的にPageSpeed InsightsとSearch Consoleをチェックして進捗を追跡します。

FAQ

Core Web Vitalsとは何ですか？

Core Web Vitalsは、Googleが定義した実際のユーザー体験を測定する一連の指標です：Largest Contentful Paint（読み込み）、First Input Delay（インタラクティブ性）、Cumulative Layout Shift（視覚的安定性）。

Core Web Vitalsはどのくらいの頻度で測定すべきですか？

RUMで継続的に監視し、重要なコード変更ごとにラボ監査を実行します。Search ConsoleまたはPageSpeed Insightsで月に一度フィールドデータを確認します。

開発者なしでCore Web Vitalsを改善できますか？

画像圧縮やCDNの使用など、一部の修正はプラグインやツールで可能ですが、より深い最適化にはコード変更が必要なことがよくあります。まずは画像とキャッシュから始めましょう。

より良いLCPのために画像を最適化する準備はできましたか？無料のImage Compressorを試して、品質を犠牲にせずにファイルサイズを削減しましょう。