コア ウェブ バイタルとは何ですか? (+ 改善方法)

公開: 2023-10-04


「コア ウェブ バイタル」 - デジタル マーケティングでこのフレーズが飛び交っているのを聞いたことがあるでしょう。 しかし、Web の重要な要素は何でしょうか? これらを Web サイトのパフォーマンスを支える 3 つの柱としてイメージしてください。

コア Web Vitals が表示されたコンピューター

3 要素には、ページ速度、応答性、視覚的な安定性が含まれます。 彼らをあなたのサイトのホスピタリティ チームとして想像してみてください。すべてが迅速でフレンドリーで、見た目も楽しいものであることを保証します。 彼らがボールを落とした場合、別れを告げるユーザーが 32% 増加する可能性があると見込んでいます。 時間は誰も待ってくれません。

でも汗をかかないでください。 私たちはあなたをサポートします! この記事はすべて、これらのデジタル水域をナビゲートするためのガイドとして用意されています。

ウェブの重要な要素を改善し、ウェブサイトのパフォーマンスを向上させる方法と、これらの小さな調整が Google の検索ランキングにどのように大きな影響を与えるかを説明します。

読み続けて、より優れた、より明るい、SEO が強化された Web サイトを構築する方法を学びましょう。

コア ウェブ バイタルとは正確には何ですか?

オンライン ページは瞬時に読み込まれますが、分割して読み込まれます。つまり、フォーム、写真、見出しが異なる時間に表示され、各要素の速度が全体の読み込み時間に影響します。

せっかちなユーザーをなだめ、Core Web Vitals 標準を満たすためには、ページのパフォーマンスを理解することが重要です。

目標を達成するには、まず Core Web Vitals を構成する指標について学ぶ必要があります。

最大コンテンツフル ペイント (LCP) の改善

Largest Contentful Paint (LCP) は、ページのメイン コンテンツの読み込み速度を追跡します。 Google は、最適なユーザー エクスペリエンスを確保するために、ページ読み込みの約 75% で LCP を 2.5 秒未満に保つことを提案しています。

ケーススタディ: ニュース Web サイトでの LCP の強化

画像付きの特集記事を掲載するニュース Web サイトを考えてみましょう。

ユーザーがニュース記事をクリックすると、LCP は主な見出しまたは写真が読み込まれる時間を測定します。 Web サイトは、画像のサイズを最適化し、遅延読み込みを使用し、LCP のしきい値を満たすようにサーバーの応答時間を向上させることができます。

このようにして、サイトは高速で魅力的なユーザー エクスペリエンスを提供します。

最初の入力遅延 (FID) の最適化

FID は、ユーザーのアクションに対するページの応答性を評価します。

ユーザーが操作 (リンクやボタンをクリックするなど) してからブラウザが応答するまでにかかる時間です。 良好なユーザー エクスペリエンスを実現するために、Google はページ読み込みの 75% で FID を 100 ミリ秒未満に維持することを推奨しています。

ケーススタディ: 電子商取引 Web サイトでの FID の向上

顧客がショッピング カートに商品を追加する電子商取引 Web サイトを考えてみましょう。 ユーザーが「カートに追加」ボタンをクリックすると、FID はサイトがこのアクションに応答するまでにかかる時間を測定します。

Web サイトは、サードパーティのスクリプトを最小限に抑え、JavaScript の実行を最適化し、非同期読み込みを採用して FID しきい値を満たすことができます。 このような実践により、よりスムーズなショッピング体験が実現します。

累積レイアウト シフト (CLS) の最小化

CLS は、Web ページの視覚的な安定性を評価します。 スコアは 0 (レイアウトのシフトがないことを示す) と正の値 (レイアウトのシフトを示す) の間です。

予期しないレイアウトの変更はユーザー エクスペリエンスの低下につながることが多いため、CLS を低く維持することが重要になります。 Google では、0.1 以下の CLS スコアを推奨しています。

ケーススタディ: ブログ Web サイトでの CLS の削減

ブログにはコンテンツ内に広告が組み込まれています。

広告が動的に読み込まれると、レイアウトが変更され、テキストが置き換えられる可能性があります。 Web サイトでは、広告スペースを予約し、プレースホルダーを使用することで、レイアウトの変更を減らすことができます。

このアプローチにより、安定した読みやすいエクスペリエンスが得られ、CLS のしきい値を満たします。

Google によると、重要な要素を満たしていれば、ユーザーがページの読み込みを放棄する可能性が 24% 低くなります。 基礎となる調査結果は、Google の記事「コア Web Vitals 指標のしきい値の確立」でご覧いただけます。

コアウェブバイタルを改善する方法

何よりもまず、サイトのベースライン指標が必要です。 開始点を決定するには、次の手順に従ってください。

  • Google PageSpeed Insights に URL を入力します。
  • 「分析」を選択します。
  • 自分のパフォーマンスを調べてください。 あなたの URL には、モバイルとデスクトップの両方で「悪い」、「改善が必要」、「優れた」というラベルが付けられます。 ページの左上隅で 2 つを切り替えます。

HubSpot 分析を行ったときの様子は次のとおりです。

画像ソース

一般的に、デスクトップ バージョンはモバイルよりもパフォーマンスが優れています。

Backlinko は 500 万ページの調査で、平均的な Web ページの読み込みにモバイルとデスクトップでは 87.84% 長い時間がかかることを発見しました。速度に影響を与える重要な要素は、CMS の種類、CDN とホスティング、ページの重さです。

URL に特定の Core Web Vitals 指標に対する十分なデータがない場合、その指標はレポートに表示されません。 ただし、URL に十分なデータがあれば、ページのステータスには最もパフォーマンスの悪い指標が反映されます。

測定すべき重要なウェブ バイタル

3 つの主要な Web 重要要素 (最大コンテンツフル ペイント、最初の入力遅延、累積レイアウト シフト) 以外にも、Web サイトのパフォーマンスとユーザー エクスペリエンスについてより徹底的な知識を得るために測定できるその他の指標があります。

これらの指標は Google が定義するコアセットの一部ではありませんが、貴重な洞察を提供します。 ここでは、考慮すべき追加の Web 重要事項をいくつか示します。

最初のバイトまでの時間 (TTFB)

TTFB は、ユーザーのブラウザがリクエストを行った後、サーバーからの応答の最初のバイトを受信するまでにかかる時間を測定します。 これはサーバーの応答性を反映し、ページの全体的な読み込み時間に影響を与える可能性があります。

インタラクティブ化までの時間 (TTI)

インタラクティブ時間 (TTI) は、読み込まれた Web ページがユーザーのアクションに応答し始めるまでにかかる時間を測定します。 JavaScript の実行、レンダリング、リソースの読み込みに関するページの有用性を分析します。

合計ブロッキング時間 (TBT)

TBT は、メインスレッドがブロックされ、ユーザー入力に応答できないときのページ読み込み中の合計時間を測定します。 これは、長時間にわたる JavaScript の実行など、メインラインをブロックするタスクを考慮しており、対話性や応答性に影響を与える可能性があります。

最初のコンテンツフル ペイント (FCP)

コンテンツが読み込まれる速度を測定するために、FCP は最初のレンダリングが完了するまでにかかる時間を追跡します。 消費者の最初の視覚印象を計算するのに役立ちます。

最初の意味のあるペイントまでの時間 (TTFMP)

TTFMP は、最初の意味のあるコンテンツが画面に表示されるまでにかかる時間を測定し、ユーザーがそのページが価値があり有益であると認識した時期を示します。

これらの指標は Core Web Vitals の中核セットを超えていますが、それらを監視して最適化することは、Web サイトのパフォーマンスをより包括的に理解することに貢献し、より良いユーザー エクスペリエンスを提供するのに役立ちます。

最大のコンテンツフル ペイント (LCP)

このメトリクスは、Web ページの読み込みパフォーマンスを測定します。 2.5 秒未満は強力な LCP スコアです。 LCP は、PageSpeed Insights、Lighthouse、Chrome ユーザー エクスペリエンス レポートなどのツールを使用して測定できます。

最初の入力遅延 (FID)

「初回入力遅延」（FID）として知られる指標は、Web サイトの応答性とインタラクションを測定します。 100 ミリ秒未満の AAnAnID 時間は許容されるとみなされます。 FID は、PageSpeed Insights、Chrome ユーザー エクスペリエンス レポート、Google が開発した JavaScript ライブラリなどのツールを使用して測定できます。

累積レイアウト シフト (CLS)

CLS は Web ページの視覚的な安定性を測定し、ページ上の要素が予期せず移動しないことを保証します。 CLS 値が 0.1 未満であれば、優れていると見なされます。 PageSpeed Insights、Lighthouse、Chrome ユーザー エクスペリエンス レポートなどのツールは、これを測定するのに役立ちます。

次のペイントへのインタラクション (INP)

今後 FID に代わる INP は、ユーザー ページの操作からブラウザーの応答時間までの時間を測定します。 Google は今年後半に Core Web Vitals レポートに INP を含める予定で、サイト所有者や開発者は新しい INP スコアの測定を開始できるようになります。

Core Web Vitals の問題を修正する方法

もちろん、Web の重要な要素の問題に対処するために実行できるいくつかの実践的な手順を検討してみましょう。 これらの指標を改善すると、Web の重要な SEO が向上し、ユーザーの全体的なブラウジング エクスペリエンスが向上することを忘れないでください。

ステップ 1: Web サイトのパフォーマンスを分析します。

まず、Google の PageSpeed Insights や Web Vitals Extension などのツールを使用して、サイトのパフォーマンスを評価します。 これらのツールは、Web の重要な要素に関する貴重なデータを提供し、改善すべき領域を特定するのに役立ちます。

ステップ 2: 画像を最適化します。

大きくて高解像度の画像はサイトの読み込み時間を遅くし、ページ速度スコアに悪影響を与える可能性があります。 画像を圧縮し、Web に合わせてサイズを適切に変更し、WebP などの最新の形式を使用して、画像を最適化します。

ステップ 3: ブラウザーのキャッシュを有効にします。

ブラウザ キャッシュはサイトの一部をユーザーのブラウザに保存するため、ユーザーはアクセスするたびにすべてを最初から読み込む必要がありません。 その結果、キャッシュ プロセスによりページの読み込み速度が大幅に向上します。

ステップ 4: CSS と JavaScript を最小限に抑えます。

CSS と JavaScript が過剰になると、サイトが機能不全に陥る可能性があります。 代わりに、この目的のために設計されたツールまたはプラグインを使用して、これらの要素を最小限に抑えます。 また、応答性をさらに高めるために、JavaScript の「遅延読み込み」を検討してください。

ステップ 5: レイアウトの変更に対処します。

視覚的な安定性の問題に対処するには、ユーザーのアクションに応答する場合を除き、ページ上の既存のコンテンツの上にコンテンツを追加しないようにします。 また、レイアウトのずれを防ぐために、画像とビデオのサイズを指定します。

ステップ 6: ラベルごとに問題を並べ替えます。

「悪い」というラベルが付いたものから始めてください。 最後に、最も重要な URL に影響を与える大規模な問題に基づいて作業の優先順位を付けます。 次に、「要改善」指定の問題です。

ステップ 7: リストを作成します。

サイトアップグレードチーム向けに優先順位を付けたタスクリストを作成します。 今後の参考のために、次の共通ページ修正を追加します。

  • ページのサイズを 500KB 未満に減らします。
  • モバイルのパフォーマンスを最適化するには、各ページのリソースを 50 個に抑えてください。
  • AMP を使用してページを最適化し、高速に読み込めるようにすることを検討してください。

ステップ 8: 共通の修正を共有します。

各 Core Web Vitals 統計のしきい値を改善するには、12 の方法があります。 以下に、「Bad」ステータスが表示される主な原因とそれぞれの対処法を説明します。

サーバーの応答時間の遅さ、クライアント側のレンダリング、レンダリングをブロックする JavaScript と CSS、リソースの読み込み時間の遅さはすべて、LCP の改善に影響を与えます。 次のサイト要素を強化することで LCD を強化できます。

FID を最適化するには、Web サイトがユーザーのアクションにどれだけ早く反応するかを測定する必要があります。

たとえば、ページに対する人々の否定的な第一印象を改善したいとします。

まず、Chrome の Lighthouse ツールを使用してパフォーマンス監査を実行し、FID しきい値を増やす方法とユーザーがサイトをどのように操作するかを学びます。

マークを向上させるために、次の変更を試みることもできます。

いくつかの簡単なガイドラインに従うことで、CLS を改善し、変動を少なくすることができます。 バナーのブラインドネスやミスクリックを永遠になくしましょう。

  • 写真やビデオの場合は、サイズ属性または CSS アスペクト比ボックスを追加します。 これらの値は、要素の読み込み中に要素用に予約するスペースをブラウザーに通知し、コンポーネントが表示される際の再配置を回避します。
  • 既存のコンテンツの上にコンテンツを追加しないでください。 唯一の例外は、シフトが予想されるユーザーのアクションに応答する場合です。
  • トランジションをコンテキスト化します。 ユーザーをページのある部分から別の部分に移動させる場合、レイアウト内のすべてのアニメーションと遷移にはコンテキストと連続性が必要です。

特定の問題を解決した後:

  1. Search Console の Core Web Vitals レポートを確認して、しきい値の改善を確認します。
  2. 「追跡の開始」をクリックして 28 日間の検証セッションを開始し、問題の兆候がないかサイトを監視します。
  3. その間表示されない場合は修正されたと考えてください。

他のランキング基準と同様、悪魔は細部に宿ります。 Core Web Vitals の最適化に関する詳細情報を探している開発者または技術者は、LCP、FID、または CSL の最適化に関する Google のガイドラインを確認してください。

ステップ 9: 監視して調整します。

コア Web バイタルの改善は継続的なプロセスです。 定期的にパフォーマンスを監視し、必要に応じて調整を行ってください。 SEO のトレンドと Google の進化するアルゴリズムを常に把握して、時代の先を行きましょう。

これらの手順に従うことで、Web サイトの中核となる Web Vital を改善し、ユーザー エクスペリエンスを向上させ、検索ランキングを向上させることができます。

コアウェブバイタルを改善するためのベストプラクティス

1. モバイルの最適化を優先します。

Google のモバイル ファースト インデックスとは、サイトのモバイル バージョンが暫定版のようなものであることを意味します。 したがって、サイトの応答性が高く、モバイル デバイス上でスムーズなエクスペリエンスを提供できるようにしてください。

2. コンテンツ配信ネットワーク (CDN) を活用します。

CDN は、サイトのページのコピーをさまざまな場所に保存することで、サイトの読み込みにかかる時間を短縮し、ユーザーがどこにいてもより迅速にサイトにアクセスできるようにします。

3. プリロード技術を使用します。

重要なリソースをプリロードすると、ページの読み込みが速くなります。 この手法は、ブラウザーに必要なリソースを必要になる前に取得するよう指示し、貴重な時間を節約します。

4. サーバー側レンダリング (SSR) を実装します。

SSR を使用すると、完全にレンダリングされたページがブラウザーに送信されるため、ページの読み込みが速くなり、ページ速度と全体的なユーザー エクスペリエンスが向上します。

5. フォント配信を最適化します。

フォントにより、視覚的なレンダリングに大幅な遅延が発生する可能性があります。 フォントをローカルでホストし、圧縮し、最新の形式を使用することで、フォント配信を最適化します。

6. サイトを定期的にテストして更新します。

定期的なテストは、時間の経過とともに発生する可能性のある速度の低下やボトルネックを特定するのに役立ちます。 Lighthouse や CrUX などのツールを使用して、サイトのパフォーマンスを定期的に評価し、改善します。

これらのベスト プラクティスを採用すると、コア Web バイタルの問題に対処し、優れたユーザー エクスペリエンスを提供して、コア Web バイタルの SEO を強化するための準備が整います。

Core Web Vitals ランキングのタイムライン

First Input Delay (FID) から Interaction to Next Paint (INP) への最新の移行により、Google の Core Web Vitals は開発、検証、実装のライフサイクルを経ます。

INP はランタイム パフォーマンスをより包括的に分析し、2024 年 3 月には Core Web Vital となる予定です。

この進行は、メトリクスがどのように導入され、洗練され、最終的に Core Web Vitals に組み込まれるかを示しています。

開発者とサイト所有者は、新しいベンチマークを満たすようにページを最適化し、高品質のユーザー エクスペリエンスを維持することで変更に備える必要があります。