Core Web Vitals を理解する: Web サイトの重要な兆候

2020 年 5 月、Google は Web サイトのパフォーマンスを評価するための一連の指標である Core Web Vitals を発表しました。その結果、一部のサイトではトラフィックが減少しました。しかし、すぐに適応した他の人たちは大きな利益を実感しました。 この記事は、Core Web Vitals をわかりやすく説明し、ビジネス Web サイトにおける Core Web Vitals の重要性を強調することを目的としています。これらの指標がどのようにユーザー エクスペリエンスを向上させ、その結果としてコンバージョン率などのビジネス成果を向上させることができるかを探っていきます。 Google チームの取り組みは次のとおりです Core Web Vitals の値: 強調する 「サイト所有者は、ユーザーに提供しているエクスペリエンスの質を理解するためにパフォーマンスの専門家である必要はありません。 Web Vitals イニシアチブは、状況を簡素化し、サイトが最も重要な指標である Core Web Vitals に集中できるようにすることを目的としています。」 「検索で成功し、一般的に優れたユーザー エクスペリエンスを保証するために、サイト所有者が優れた Core Web Vitals を達成することを強くお勧めします。」 「Google の中核となるランキング システムは、優れたページ エクスペリエンスを提供するコンテンツに報酬を与えることを目的としています。」 私はで働いています , そしてこの投稿では、私のチームの洞察と、クライアントのWebサイトで作業するときに私たちが行っていることについて共有します。さらに、Web サイトを Google の基準に合わせて、オンラインでの強固な存在感を確保するための実践的な戦略も含めます。始めましょう！ ウェブ開発会社 コア ウェブ バイタルとは何ですか? Google が導入した Core Web Vitals は、Web ページの全体的なユーザー エクスペリエンスを決定する上で重要な役割を果たす重要な要素です。これらは、Google が「ページ エクスペリエンス」シグナルと呼ぶものの一部であり、検索結果でのページのランクを決定するために使用されます。 これらの指標は、Web サイト所有者が実際のユーザーがサイトをどのように体験しているかを明確に把握できるように設計されています。ページの読み込み速度、読み込み中のレイアウトの安定性、ユーザー操作に対するサイトの応答速度などの側面に重点を置いています。これらの要素を改善すると、Google 検索結果での順位が向上する可能性があり、これはオンライン ビジネスにとって非常に重要です。 次のセクションでは、Core Web Vitals について詳しく説明し、Core Web Vitals の仕組みと、これらの重要な指標に合わせて Web サイトを最適化する方法を理解していただくのに役立ちます。 CWV を重視する企業の成功事例 前のセクションの要点を証明するために、Google を開くこともできます。 そして「」をクリックします このリソースでは、パフォーマンスの問題を解決し、大きな利点を獲得した Web サイトの実際の成功事例について説明します。これらの事例のいくつかを見てみましょう。 コアウェブバイタルレポート その他の事例紹介はこちらからお読みください ルノーグループ Largest Contentful Paint (LCP) と Web サイトの直帰率およびコンバージョン率の間には重要な関係があります。彼らは、LCP をわずか 1 秒強化するだけで直帰率が最大 14 パーセントポイント減少し、コンバージョンが 13% 増加する可能性があることを観察しました。 発見した ファーフェッチ LCP が 100 ミリ秒改善されるごとに、Web コンバージョン率が 1.3% 増加します。 経験豊富な 楽天24のA/Bテスト ウェブ バイタルの向上により、訪問者あたりの収益が 53.4% 増加し、コンバージョン率が 33.1% 増加し、平均注文額が 15.2% 増加し、離脱率が 35.1% 低下したことなどの効果が得られました。 明らかにした Carpe は、LCP を 52% 強化し、累積レイアウト シフトを 41% 強化することで、 トラフィックが 10% 増加し、オンライン ストアのコンバージョン率が 5% 増加し、収益が 15% 増加しました。 見た SEOへの影響 Core Web Vitals は、ユーザー エクスペリエンスに関する明確な指標を提供するため、SEO にとって非常に重要です。これは、現在 Google のランキング アルゴリズムに組み込まれている要素です。この統合により、Web サイトが検索結果の位置を向上させるためにこれらの基準を満たす必要性が強調されます。 SEO (検索エンジン最適化) は、Web サイトを強化して検索エンジンの結果におけるランキングを向上させ、より多くの訪問者や潜在顧客を引き付けるのに役立つ手法です。 SEO を超えて、Core Web Vitals は Web サイト全体のパフォーマンスに影響を与えます。これらの指標で高いスコアを獲得した Web サイトは、読み込みが速く、安定したインタラクションを提供し、ユーザーフレンドリー性を高め、ユーザーエンゲージメントとコンバージョン率の向上につながります。 Core Web Vitals は重要ではありますが、Google のランキング基準における多くの要素の 1 つにすぎません。これらの指標で優れていると、サイトの検索ランキングが向上しますが、上位に表示されることが保証されるわけではありません。バランスの取れた SEO 戦略では、これらを他の要素と併せて考慮する必要があります。 2021 年 5 月、Google は Core Web Vitals が公式のランキング要素になると発表しました。このアップデートにより、より良いスコアを持つ Web サイトのランキングが向上し、悪いスコアを持つ Web サイトはペナルティを受ける可能性があることを意味します。 要約すると、Google が Core Web Vitals に注力していることは、検索結果におけるユーザー エクスペリエンスを最適化するという Google の目標を反映しています。これらの分野で優れたパフォーマンスを発揮する Web サイトは、より優れたユーザー エクスペリエンスを提供する可能性が高く、Google の目標と一致し、より高い検索ランキングを確保できる可能性があります。 CWV メトリクスのライフサイクル メトリクスのライフサイクルは、Web パフォーマンスに重点を置く企業にとって重要な概念です。このライフサイクルは段階を経て進行するため、企業はメトリクスが実験的なものから安定したものへと進化するのに合わせて適応することができます。このプロセスは、利害関係者のフィードバックと、予測可能性と安定性を高めるための段階的かつ十分に伝達された変更の重要性を強調するため、効果的な事業計画と Web サイト最適化戦略の鍵となります。 ライフサイクルの段階を把握すると、測定ツールを理解し、今後のアップデートに備えることができます。 Core Web Vitals には 3 つのライフサイクル ステージがあります。 実験段階 ここでは、新しい指標が開発され、テストされます。この段階では、Web パフォーマンスの問題に効果的に対処し、既存の指標を改良することを目的としています。また、広範なコミュニティからフィードバックを収集して問題を特定し、場合によっては指標の初期定義を調整することも含まれます。 保留中のステージ 有望性を示す指標は、最初のフィードバックに基づいてさらに改良されます。少なくとも 6 か月間はこの段階に留まり、生態系内で適応する時間が与えられます。これらの指標の使用が増えるため、この段階では開発者やその他の関係者からの意見が非常に重要です。 安定期 メトリクスが有効であることが証明され、保留ステージを通過すると、安定フェーズに入ります。ここでそれらは最終決定され、バグ修正や不定期のアップデートを含む継続的なサポートを受けられます。これらの指標に対する変更は、公式ドキュメントを通じて徹底的に伝えられます。 Googleの評価基準 Google がウェブサイトのパフォーマンスをどのように評価するかを理解することは、サイトの可視性とユーザー エクスペリエンスに影響を与える基準を確実に満たすために重要です。 Google の評価基準を調査し、オンラインでのプレゼンスを高めるための洞察を提供します。 Google は、ウェブサイトのパフォーマンスを測定するために、しきい値が設定された特定の指標を使用します。ほとんどの指標について、Google は、モバイル デバイスとデスクトップ デバイス間で分割されたページ読み込みの 75 パーセンタイルに焦点を当てることを推奨しています。これは、各カテゴリのページ訪問の少なくとも 75% についてパフォーマンス目標を目指すことを意味します。 このアプローチにより、大多数のユーザーがサイトで良好なエクスペリエンスを得ることができます。ページの読み込み速度、対話性、レイアウトの安定性などの要素が考慮されます。 Core Web Vitals への準拠をチェックするツールは、この 75 パーセンタイル基準を使用して、サイトが合格するかどうかを判断します。 Core Web Vitals メトリクスでこれらの基準を満たすことにより、モバイルでもデスクトップでも、ほとんどのユーザーにとって良好なパフォーマンスが保証されます。 フィールドデータとラボデータの区別 ウェブサイトのパフォーマンスを最適化し、最終的にはビジネスの成果を向上させることを目指す人にとって、フィールドデータとラボデータの微妙な違いを把握することは不可欠です。あらゆるユーザー シナリオで適切にパフォーマンスを発揮する Web サイトを開発するには、各データ タイプの長所と制限を理解することが重要です。 実験室データ ラボ データは制御された環境で収集されるため、デバッグに最適です。テストに一貫した条件を提供するため、パフォーマンスの問題を特定して修正するのに役立ちます。ただし、その制御された性質により、必ずしも現実世界のユーザー エクスペリエンスを表すとは限りません。 利点: 問題のデバッグに最適です。 一貫したテスト条件により、的を絞った問題解決が可能になります。 欠点: 現実世界のボトルネックを反映していない可能性があります。 ユーザーエクスペリエンスの全範囲を捉えるには限界があります。 Lighthouse や WebPageTest などのツールは、ラボ データの収集によく使用されます。 フィールドデータ フィールドデータは自然環境における実際のユーザーから収集され、さまざまな条件下での実際のユーザーエクスペリエンスについての洞察を提供します。これは、Web サイトが現実世界でどのように機能するかを理解するのに役立ちますが、実験室のデータと比較して提供される指標が限られている可能性があります。 利点: ユーザーエクスペリエンスを正確に反映します。 さまざまなデバイスやネットワーク条件にわたるパフォーマンスを理解するのに役立ちます。 欠点: 限定されたメトリクスのセット。 特定のデバッグ目的についてはあまり詳しく説明しません。 Web サイトを効果的に最適化するには、ラボとフィールドのデータのバランスをとることが重要です。ラボデータは、管理された環境で特定の問題を特定し、解決するのに役立ちます。一方、フィールド データは、さまざまな条件下で実際のユーザーが Web サイトとどのようにやり取りするかについての洞察を提供します。開発者は、テストが実際のユーザー エクスペリエンスを反映していることを確認するために、フィールド データを使用してデバイス タイプやネットワーク接続などのテスト パラメーターをガイドする必要があります。このアプローチは、現実のシナリオで大多数のユーザーにとって適切なパフォーマンスを発揮する Web サイトを作成するのに役立ちます。 主要な指標をそれぞれ確認する Web パフォーマンス メトリクスは、Web サイトの有効性とユーザー エクスペリエンスを評価するために使用される重要なツールです。これらのメトリクスは、安定版、保留中、実験版の 3 つのタイプに大別されます。各カテゴリは、さまざまな観点から Web サイトのパフォーマンスを包括的に理解する上で重要な役割を果たします。 安定した指標 最大のコンテンツフル ペイント (LCP) LCP は、ユーザーの観点から Web ページの読み込み速度に焦点を当てた重要なパフォーマンス指標です。ユーザーがページに移動した後、画像やテキスト ブロックなど、ページ上の最大のコンテンツ要素が完全に読み込まれて表示されるまでにかかる時間を測定します。 優れた LCP スコアの重要性は、ユーザー エクスペリエンスへの直接的な影響にあります。ユーザーは通常、Web ページがすぐに読み込まれることを期待していますが、LCP が遅いとフラストレーションが生じ、ユーザーがページから離れてしまう可能性があります。 マーケティング担当者や経営者にとって、効果的な LCP (2.5 秒以上を目標とする) を最適化することは非常に重要です。高速な LCP は、訪問者を維持し、直帰率を削減し、販売、見込み客発掘、情報共有などのビジネス目標を達成する際の Web サイトの全体的なパフォーマンスを向上させるのに役立ちます。 最初の入力遅延 (FID) FID は、リンクのクリックやボタンのタップなど、ユーザーによる Web サイトとの最初のインタラクションから、サイトがそのインタラクションに応答するまでの時間を測定するために使用される指標です。この指標は、Web サイトの応答性を評価するために不可欠です。 FID が低いほど、サイトが迅速に反応し、より良いユーザー エクスペリエンスを提供することを意味します。サイトの応答性を確保するには、FID が 100 ミリ秒以下になるようにする必要があります。 安定した Core Web Vital として、FID は応答しないページに対するユーザーのエクスペリエンスを定量化します。ページが使用可能であることを確認することが重要です。特に、FID は 2024 年 3 月に Core Web Vital として Interaction to Next Paint (INP) に置き換えられます。 累積レイアウトシフト (CLS) CLS は、Web サイトの視覚的な安定性を測定する安定した Core Web Vitals 指標です。ページの読み込みプロセス中および読み込みプロセス後に予期しないレイアウトのシフトの程度を計算します。最適なユーザー エクスペリエンスを実現するには、CLS を可能な限り低く、理想的には 0.1 以下に保つことが目標です。 Web ページのレイアウトの変更は、要素の非同期読み込みやページへの動的な追加が原因で発生することがよくあります。これらの変化はユーザー エクスペリエンスを混乱させる可能性があり、偶発的なクリックやサイトの操作の困難につながる可能性があります。安定したレイアウトは、シームレスなユーザー エクスペリエンスを維持し、ユーザー インタラクションを促進するために特に重要です。 CLS の重要性はユーザー エクスペリエンスを超えて広がります。ユーザーは不安定な Web サイトにアクセスしたり購入したりする可能性が低くなるため、コンバージョン率に直接影響します。さらに、Google は SEO の Core Web Vitals に CLS を組み込んでいるため、CLS スコアが低いと、Web サイトの検索エンジンの可視性に悪影響を及ぼす可能性があります。 最初のコンテンツフル ペイント (FCP) FCP は、ユーザーがページに移動してから、テキスト、画像、その他の要素などのコンテンツの最初の部分が画面に表示されるまでにかかる時間を計測する重要な Web パフォーマンス指標です。これはページの読み込み速度の初期指標として機能し、ページが読み込まれているという最初の信号をユーザーに提供します。 簡単な FCP は、ページが応答していることを訪問者に安心させ、直帰率を減らし、ユーザーの満足度を向上させることができます。 SEO の観点から見ると、Google は検索ランキングのユーザー エクスペリエンス指標に FCP を含めています。 FCP スコアが向上すると、検索エンジンのランキングが向上し、サイトへのオーガニック トラフィックが増加します。コンテンツを迅速に読み込む Web サイトは、訪問者を維持し、オンライン ビジネスの目標を達成する可能性が高くなります。 総ブロッキング時間 (TBT) TBT は、Web サイトの負荷応答性を測定するためのラボ指標であり、特にページが完全にインタラクティブになるまでの非インタラクティブな時間を定量化します。 TBT が低いと、Web サイトでのユーザー エクスペリエンスが向上するため、ユーザビリティにとって非常に重要です。 このメトリクスは、First Contentful Paint (FCP) からメインスレッドがブロックされ、タイムリーな入力応答が妨げられる Time to Interactive (TTI) までの合計時間を測定します。これは実店舗で発生する遅延と似ており、クリックやスクロールなどのインタラクションに対する Web サイトの応答が遅いときにユーザーがオンラインで感じるフラストレーションを反映しています。 保留中のメトリクス 次のペイントへのインタラクション (INP) Interaction to Next Paint (INP) は、2024 年 3 月に First Input Delay (FID) に代わってコア Web Vital として設定される予定です。INP は、応答性と対話性に焦点を当て、ユーザーによる Web ページとの対話からブラウザーが目に見えて応答するまでの時間を測定します。ページの。 INP の重要性は、ユーザー エクスペリエンスへの影響にあります。 INP スコアが低いほど、サイトの応答性が高く、ユーザー エンゲージメントが強化されていることを意味します。これは、動的で複雑な Web ページの場合に特に重要です。優れた INP スコアによって示される応答性の向上は、ビジネスの成長にとって重要なコンバージョン率と顧客満足度の向上につながります。 INP の最適化は、Web サイトをよりユーザーフレンドリーにし、ユーザーインタラクションに対するよりスムーズかつ迅速な応答を保証し、オンライン ビジネスの成功に貢献するための鍵となります。 実験的な指標 最初のバイトまでの時間 (TTFB) TTFB は、ユーザーがページをリクエストした後、ユーザーのブラウザがサーバーからデータの最初のバイトを受信するまでの時間を測定する Web パフォーマンス メトリックです。このタイミングは、ユーザーがリンクをクリックするか URL を入力したときに開始され、データが到着し始めると終了します。 TTFB は、サイトの速度の最初の認識と全体的なユーザー エクスペリエンスの両方に不可欠です。 TTFB が低いと、サイトの読み込みが速いという印象が生まれ、ユーザーの満足度が高まります。この素早い応答により、ユーザーが途中でサイトを離れる可能性が低くなり、ユーザーがより長いセッションに参加し続ける可能性が高くなります。 TTFB は Google のランキング アルゴリズムの直接的な要因ではありませんが、SEO にとって重要なサイト全体の速度に貢献します。 TTFB を改善するには、サーバーの応答時間とネットワーク効率に焦点を当てる必要があります。これらの側面を最適化することで、ユーザーへのより迅速なデータ配信が保証され、ポジティブなエクスペリエンスとサイトでのエンゲージメントの維持に不可欠です。ほとんどの Web サイトでは、応答性が高く効率的なユーザー インタラクションを確保するには、TTFB を 0.8 秒以下にすることが理想的です。 古いメトリクス インタラクティブ化までの時間 (TTI) インタラクティブまでの時間 (TTI) は、外れ値のネットワーク リクエストや長時間のタスクによって変動するため、Lighthouse 10 から削除されました。この変更は、より信頼性が高く一貫したユーザー エクスペリエンスの測定に焦点が移るにつれて、Web パフォーマンス メトリクスが継続的に進化していることを反映しています。 Largest Contentful Paint (LCP)、Total Blocking Time (TBT)、Interaction to Next Paint (INP) などの指標への移行は、Web ページ上のユーザー エクスペリエンスをより正確に表す指標への傾向を示しています。これらの新しい指標は、ユーザーが Web サイトをどのように操作し、体験するかをより安定して正確に評価できるため、好まれています。 Lighthouse 10 のような主要なパフォーマンス ツールから TTI が削除されたことで、Web パフォーマンス コミュニティが精度と一貫性のより良いバランスを提供するメトリクスを重視していることが明確に示されました。 2024 年以降、TTI は、これらのより新しく代表的な指標に比べて関連性が低いと考えられています。 ウェブサイトのパフォーマンスを測定するためのツール クライアントの Web サイトで作業するときに使用する主なツールを共有させてください。 Anadea が Web Vitals Chrome 拡張機能 Web Vitals Chrome 拡張機能は、ワンクリックで CWV の主要なメトリクスを測定する簡単な方法を提供します。 Chrome の測定方法や、Chrome ユーザー エクスペリエンス レポート、ページ スピード インサイト、Search Console などの他の Google ツールで使用されている測定方法に合わせて、読み込み、インタラクティブ性、レイアウト シフトの指標に関する即時フィードバックを提供します。 拡張機能をインストールすると、ブラウザーにアンビエント バッジが表示されます。このバッジには、パフォーマンス ステータスを示す 3 つの視覚的な状態があります。 無効 (グレー) 通過（緑） 1 つ以上のメトリクスが失敗しています (赤) 評価したい Web サイトに移動するだけで、現在の Core Web Vitals ステータスがバッジに表示されます。 バッジをクリックすると、詳細なレポートにアクセスできます。 このレポートは、Chrome UX レポート (CrUX) API を介して、ローカルの Core Web Vitals データと現場からの実際のユーザー データを組み合わせます。この機能は状況に応じた洞察を提供し、自分の個人エクスペリエンスを同じページ上の他のデスクトップ ユーザーのエクスペリエンスと比較するのに役立ち、Web サイトのパフォーマンスの包括的なビューを提供します。 ページ速度の分析情報 (PSI) PageSpeed Insights (PSI) は、モバイル デバイスとデスクトップ デバイスの両方で Web ページのユーザー エクスペリエンスを分析するための Google のサービスです。改善のための推奨事項を提供し、ページに関するラボ データとフィールド データの両方を提供します。 PSI は、パフォーマンス測定のためにページの読み込み条件をシミュレートします。モバイルの場合はモバイル ネットワーク上の中間層デバイス (Moto G4) を使用し、デスクトップの場合は有線接続でデスクトップをエミュレートします。ネットワーク条件を含むテスト環境は Google データセンターに基づいており、Lighthouse レポートの環境ブロックで場所などの詳細を表示できます。 PSI の使用は簡単です。PSI Web サイトにアクセスし、テストするページの URL を入力フィールドに貼り付けて、[分析] をクリックします。 PSI は、モバイルとデスクトップの Core Web Vitals 統計を提供し、ユーザー エクスペリエンスの品質を良好、改善が必要、または不良に分類します。 90 以上のスコアは良好、50 ～ 89 は改善が必要、50 未満は不良とみなされます。 Web ページで PSI を使用する例では、デスクトップとモバイルで異なる結果が示されています。デスクトップのパフォーマンスは良好である可能性がありますが、モバイルのパフォーマンスは、デバイスの機能やネットワークの状態などの要因によって異なる場合があります。たとえば、デスクトップでは適切に読み込まれる高解像度の画像でも、そのサイズが原因でモバイルでは Largest Contentful Paint (LCP) スコアが低下する可能性があります。最初の画像をモバイル画面用に最適化すると、LCP および First Contentful Paint (FCP) スコアを向上させることができます。 たとえば、デスクトップの anadea.info のページを入力します。 分析の結果、デスクトップ ユーザーにとってページのパフォーマンスが非常に優れていることがわかりました。ただし、PSI は改善の余地があるいくつかの領域も強調しています。 モバイル チェックではデスクトップとは異なる結果が判明する可能性があることに留意してください。多くのユーザーは PC ではなくモバイル デバイスでインターネットにアクセスしているため、モバイルの最適化を真剣に検討することが重要です。 インターネット速度が異なるため (有線インターネットとモバイル インターネット)、モバイルでの「パフォーマンス」スコアはデスクトップほど良くないことがよくあります。これを改善するには、パフォーマンス低下の原因を調べる必要があります。 2 つの重要な指標は、合計ブロック時間 (TBT) と最大コンテンツフル ペイント (LCP) です。これら 2 つの指標だけでパフォーマンス スコアの 55% を構成します。 これを修正するにはどうすればよいでしょうか? LCP についてはすでにご存知のとおり、LCP は、ユーザーがページを開いてからページ上の最大のコンテンツ要素 (画像やテキスト ブロックなど) が完全に表示されるまでにかかる時間を定量化します。このページでは LCP は画像であり、おそらく (PC 用の) 解像度が高く、小さなモバイル画面には冗長です。解決策は、モバイル画面用に小さく、より適切に最適化された最初の画像を追加することです。これにより、LCP が改善され、おそらく FCP スコアも向上します。 次に、総ブロック時間 (TBT) は、重いスクリプトや不要なスクリプトによって影響を受ける可能性があります。 PSI 診断は、未使用のスクリプトやサードパーティのスクリプトの干渉などの問題を特定するのに役立ちます。これらに対処すると、TBT スコアを向上させることができます。 Google が「パフォーマンス」スコアを計算する方法に興味がある場合は、下の画像を参照してください。 計算では、TBT、LCP、累積レイアウト シフト (CLS) などの指標が重視され、これらは合計してスコアの最大 80% に影響を与える可能性があります。このことから、サイトのモバイル バージョンとデスクトップ バージョンの両方で良好なパフォーマンスを維持するには、これらの指標の監視と最適化が重要であると結論付けることができます。 結論 結論として、Core Web Vitals はビジネスのオンラインでの成功にとって非常に重要です。これらは、Web サイトが高速で応答性が高く、ユーザーにとって楽しいものであることを保証します。これにより、ユーザー エクスペリエンスが向上するだけでなく、検索ランキングの向上とコンバージョンの向上にも役立ちます。