Google Core WebVitals向けに最適化する方法

公開: 2020-12-08

コアWebVitalsロールアウトの準備方法

更新された10.15.2021

企業のサイトでのユーザーエクスペリエンスの低下を修正することは、多くの優先リストの最上位に移動しました。

私たちがすでに知っていることの1つは、Googleが新しいGoogle Search Console Core Web VitalsReportを使用して構築することを計画していることです。これは、企業がページをクロールしてインデックスを作成するだけでなく、ユーザーにとってより価値のあるものにすることを目的としています。

Google Core Web Vitalsとは何ですか？

Google Core Web Vitalsは、2019年にGoogle検索コンソールに追加された一連のレポートであり、読み込み速度に関するコア指標の小さなセットで構成されています。これらは、検索マーケターと開発チームが、サイトがWebページをどの程度うまく配信しているかどうかを知るのに役立ちます。 Googleは、サイト訪問者に楽しい体験を提供する上でのパフォーマンスに応じて、各Webページをスコアリングします。 Core Web Vitalsレポートは、フィールドデータとも呼ばれる実際の使用状況データに基づいてWebページがどのように機能するかを詳しく説明します。

これらの新しいランキング要素は急速に近づいています。すべてのサイトは重要なスキーママークアップタイプを追加することで恩恵を受けますが、コードの膨張を避けるために、ネストを使用してより重要なものを固定します。

2021年10月5日、Googleは、ページエクスペリエンスを向上させるために最大のコンテンツフルペイントを改善する方法というタイトルのYouTubeプレゼンテーションで役立つヒントをアップロードしました。

より良い最大コンテンツペイント（LCP）スコアを取得する方法に関するGoogleからのヒント：

画像は通常、最大のコンテンツフルペイントで問題が発生する理由です。保存された一口ごとに、ページの読み込みを高速化できます。 AVIFやWebPなどの最新の画像形式を使用します。 LCPスコアの計算方法に関連するエッジケースはたくさんあります。

Googleページエクスペリエンスとは何ですか？

ページエクスペリエンスは、ユーザーエクスペリエンスのサブセットです。

ページエクスペリエンスは、ユーザーエクスペリエンスに最も頻繁に影響を与えるWeb製品の技術的側面に重点を置いています。コンテンツの品質やビジュアルデザインなどのUXデザインの側面を測定して反映することはありませんが、すべてのページエクスペリエンスのシグナルは、基本的にWebサイトを作成する開発者チームの管理下にあります。これらのシグナルは、ユーザーエクスペリエンス全体に直接影響します。

ページエクスペリエンスを促進するというGoogleの意図的なイニシアチブは、ウェブにプラスの影響を与えることを目的としています。それをポジティブだと考えてください。技術者以外のチームメンバーからより簡単に賛同を得るために、ビジネス指標と相関するこれらの追加のパフォーマンス指標があると便利です。

少しバックアップして、どのようにしてここに到達したかを確認しましょう。

サイトスピードとGoogleコアウェブバイタルの歴史

Googleページエクスペリエンスの展開のタイミングはどのくらいですか？

2020年11月10日、Googleは次のように発表しました。「ランキングのページエクスペリエンスシグナルは2021年5月に公開されます。新しいページエクスペリエンスシグナルは、Core Web Vitalsと、モバイルフレンドリー、セーフブラウジング、HTTPSセキュリティなどの既存の検索シグナルを組み合わせたものです。侵入型のインタースティシャルガイドライン」。

バックアップして、明確な概要を把握しましょう。 2010年、Googleは、ウェブページがデスクトップコンピュータに読み込まれる速さをランキングシグナルとして最初に使用し始めました。

Googleは、2015年からランキングシグナルとしてモバイルフレンドリーを推進してきました。2018年までに、モバイルファーストインデックスプロセスが正式に開始されました。ウェブマスターとサイト所有者は、サイトがモバイルファーストインデックスの準備ができているとGoogleが判断したときに、検索コンソールで通知されました。これは、検索目的でWebサイトを評価するプロセス中に、GoogleがWebサイトのモバイルバージョンを評価することによって発生します。トリガーすることはできません。

2020年の初めに、GoogleはCore WebVitalsと呼ばれる新しいツールセットをGoogle検索コンソールに導入しました。これらのレポートの指標は2021年にランキングシグナルになると明確に述べています。CoreWebVitalsは、以前のサイト速度指標を拡張して、企業が一部のWebページのモバイル広告とサポートファイルの読み込み方法に対処するのに役立ちます。

Web Core Vitalsの導入により、モバイル対応に関心のない、行き詰まっているWebサイトの所有者に、それが明らかに重要であることを警告します。 Mobilegeddonの更新はゆっくりとした展開でしたが、サイトをモバイルユーザーにとってより良いエクスペリエンスにすることの重要性に直面する必要があります。

サイトスピードとモバイルに関するツールとレポートへのGoogleの投資は、ウェブサイトを使いやすくする必要がある、またはオンラインのコーリングカードになることを期待しているというウェブサイトの所有者へのシグナルです。本日、ランキングのページエクスペリエンスシグナルが2021年5月に公開されることを発表しました。

Google検索ページエクスペリエンスを構成する基本的な指標は何ですか？

Google検索ページのエクスペリエンス指標の上位3つは次のように説明されています。

読み込み： LCPは、特定のWebページ上の最大のコンテンツ要素（注目の画像、ヒーロー画像、H1見出しテキストなど）が訪問者のビューポート内に表示されるまでにかかる時間を評価します。 1.2秒以下のLCPを獲得しようとします。
インタラクティビティ： FID（最初の入力遅延）：タイムレコーダーは、ユーザーが最初にページを操作したとき（リンクがクリックされたとき、ボタンがトリガーされたときなど）から、ブラウザーがその操作に応答するときまで実行されます。この測定値は、人が最初にクリックしたインタラクティブな要素から導き出されます。これは、ページがインタラクティブになったときに訪問者が何かをする必要があるページでは重要です。 TBTレポートとも呼ばれます（GTmetrixでは）。これは、ページの読み込みプロセス中に呼び出されるスクリプトによってブロックされる時間を表します。 150ミリ秒以下のTBTを取得しようとします。
視覚的安定性： CLSは、ページの読み込み時に訪問者が経験するページのレイアウトシフトの量を示します。 0.1以下のCLSスコアを求めます。

コンテンツを監査して、FastPageバッジでラベル付けされるCoreWeb Vitalsのしきい値を満たしているかどうかを判断するには、Googleの開発者ツールを使用して読み込み速度を評価します。これらの最適化タスクを支援するために、GTmetrixはより洗練されたものになりました。 GTmetrix Reportsは、新しいスコアリング方法を追加しました。以前のPageSpeedおよびYSlowレポートは、全体的なGTmetrixグレードに更新されました。 Lighthouseを搭載したGTmetrixユーザーは、パフォーマンスと構造のスコアを取得できるようになりました。

First Input Delay（FID）とは何ですか？

FIDは、タップやクリックなどのアクションを実行する人に対処する前に、ブラウザーが他のタスクを管理するのにかかった時間を評価するスコアです。これは、UIエクスペリエンスがユーザーにどの程度反応するかを示し、JavaScript処理によるCPUの負担を測定します。

ページの読み込み中とページのライフサイクル中の両方で、ページがJavaScriptを実行する方法は、FIDに直接影響します。アプリの準備が完全に整う前に訪問者がアクションを完了しようとすると、JavaScriptが完全に実行されるまでにかかる時間が重要になります。

最初の入力遅延を改善する方法：

サードパーティのファイルまたはトラッキングピクセルを遅延または削除します。
必須ではないすべてのスクリプトを延期します。
JavaScriptの実行を改善します。

GTmetricおよびその他のウォーターフォールは、ロード時間が過度に消費されている場所を明らかにするための優れたパフォーマンストレースを実行します。識別されると、それらを調査して解決できます。

新しいGoogleページエクスペリエンスインジケーターとは何ですか？

Googleは、新しいページエクスペリエンスインジケーターを使用して、WebページのコアWebバイタルの品質をユーザーに示します。これはすでに一部のSERPSに表示されています。サイズと形状は、Accelerated MobilePageのステータスを示すAMPアイコンと似ています。グーグルはテストと相互作用の作成に優れているので、より広く採用されているので、これはおそらく異なって見えるかもしれません。

Core Web Vitalsメトリックは、Google Search Consoleレポートで以前よりも詳細な情報を提供しますが、完全なロールアウト後に多くの誤検知が発生する可能性があります。

最も重要なコアWeb重要タスクを決定する方法

より詳細なWebサイトのパフォーマンスの最適化を行う前に、まず最も影響力のある負荷速度のメトリックに焦点を合わせます。

1.最初に「不良」とラベル付けされているすべてを解決します。

2.次に、問題がほとんどのURLに悪影響を与える、または最も収益を生み出すURLに悪影響を与える問題によって、タスクリストに優先順位を付けます。

3.「改善の必要性」の問題が優先リストの次の問題になりました。

レイアウトコンテンツシフトの大幅な改善の必要性は私を非常に驚かせました、それでもそれは明らかに最高のSEO結果を得るための要因です。このページには、コンテンツの上にレイトロード広告がなく、邪魔なインタースティシャルがなく、すべての画像の幅と高さが適切に定義されています。ただし、元の注目画像のサイズは1280 x860ピクセルでした。これにより、画像のサイズ変更の問題が発生していました。ブラウザがそれをロードしているとき、彼らはそれを1200 x800ピクセルにサイズ変更していました。これにより、レイアウトがシフトし、ロードが遅延します。 JASON-LDスキーママークアップに対して画像のサイズが正しいことを確認してください。

すべてのURLで特定の問題を修正したら、すべてのURLで問題を修正したかどうかを確認できます。 [追跡の開始]をクリックして28日間の監視セッションを開始し、サイトでこの問題のインスタンスを確認します。この問題が28日間の期間中にサイトのどのURLにも存在しない場合、問題は修正されたと見なされます。問題を未修正としてマークするには、任意のURLにその問題が存在するだけで十分です。ただし、個々のURLのステータスは、問題のステータスに関係なく、28日間にわたって評価中のままです。

CVWに関する一般的なFAQ

CWVスコアを改善するための多くのオプションの学習、トラブルシューティング、およびテスト/調整には、多くの時間がかかる場合があります。答えは次のとおりです。

CLSスコアの計算方法は？

ページのCLSスコアは、読み込み時に予期せずシフトしたユーザーの画面の割合に、ページが移動した距離を掛けて計算されます。サイトは、コンテンツのシフトによって画面の半分が影響を受けることに直面することさえあります。それは視聴者にとって迷惑です。同時に、コンテンツが画面上で移動しなければならなかった距離が考慮されます。したがって、CLSスコアを計算するには、影響を受けた画面領域（0.5）に移動距離（0.15）を掛けると、有用なスコアを得ることができます。

コンテンツレイアウトシフトの問題を引き起こす一般的な原因は何ですか？

注目の画像の余白を削除する：1つのウェブサイトでLighthouseツールをChrome Dev Toolsと一緒に実行すると、figure class =” features-media”コードが問題であることが判明しました。この追加のCSSコードを追加することにより.featured-media { img display: none; } .featured-media { img display: none; } 、デスクトップのパフォーマンススコアはすぐに2ポイント向上しました。
フォントの読み込み方法に関する問題を解決します。一部のWebデザイナーは、派手な見出しのWebフォントの外観を好みます。ただし、多くの場合、それらのロード方法によってレイアウトがシフトします。解決するキャッシュの希薄化の潜在的な問題があるかどうか、およびフォントの全体的なサイズがどのように配信されるかを確認するためにテストします。 fallback font-displayを指定し、 { font-display: fallback;}を追加することで、fontface命令を使用して要素のレンダリング動作を改善できることがわかりました。
動的に挿入されたコンテンツ：これは通常、バナーまたはフォームがページに動的に追加されている場合に発生します。さらに、ポップアップをオプトアウトするための「x」が表示されないユーザーは、イライラする可能性があります。また、ページ上の要素が使用可能な場合でも、ページが再配置されて「シフト」される理由の背後にある原因です。
画像仕様の欠如：ページの画像に間違った、貧弱な、または画像の寸法が指定されていない場合、ブラウザはこの情報なしでページをロードするための作業と時間を追加し、後でそれを計算するためにシフトする必要があります。
寸法のないページ上の埋め込み、広告、iframe ：これらの視覚的なページ上の要素に必要なレイアウトスペースをブラウザに通知することで、これらの各要素が視覚的に配置された後、ブラウザをシフトする必要がなくなります。

上記のCLS改善戦略に従った後、同じサイトの累積レイアウトシフトスコアは0.01になりました。これは、サイトのモバイル検索結果を改善するのに大いに役立ちます。

CSS非同期をロードすることで改善できるコアWebバイタルメトリックはどれですか？

それは人々が最初に見るものであるため、上記の折り畳みセクションで計算されたメトリックは、ユーザーに表示される主要なコンテンツがすばやく表示されることを保証することを意味します。一部のコンテンツおよびサポートファイルは、「完全にロードされた時間」に達するまでバックグラウンドでロードできます。

HolisticSEOの所有者であるKorayTugberk GUBUR氏は、次のように述べています。 CSSファイルの読み込みを高速化すると、特にFirst Paint、First Contentful Paint、Lagest Contentful Paint、およびSpeedIndexのメトリックが向上します。

キーコンテンツを、検索者の意図に一致するように簡単に確認できるフォールドの上に配置します。サイト訪問者に質問の答えを見つけるのを待たせないでください。

Googleはどのように負荷速度を測定しますか？

PageSpeed Insightsにある改善と診断の提案は、ラボテストから生成されます。フィールドの結果から収集すると、パフォーマンスメトリックはより正確になります。 PageSpeedを改善する方法の一般的なアイデアを理解したら、Googleがこれをスコアリングする方法のロジックは、Webの重要な結果にプラスの影響を与える可能性があります。

3つの新しいパフォーマンスメトリックが、このWebパフォーマンスの世界を包括します。これらは、ChromeのAPI、AndroidのChrome、ChromiumEdgeブラウザーを介してサポートされます。 Googleがページエクスペリエンスの測定に依存しているデータは、Chrome UXレポート（CRUX）から取得されます。これは、世界中のChromeブラウザでの実際のページ読み込みが提供する匿名化されたパフォーマンス統計で構成されています。

CRUXはキャッシュの状態に依存しないため、ランディングWebページとセッション中のWebページの両方を含むすべての通常のページロードを評価します。シングルページアプリケーション内で、ルート変更とも呼ばれるソフトナビゲーションをスキップします。ソフトナビゲーションにはペナルティが課せられる可能性があります。 CLSスコアとLCP値が低いほど、予期しないレイアウト変更が発生したユーザーの変更が少ないことを示します。

CWVスコアに対する画像圧縮はどのくらい重要ですか？

良好なCWVスコアを取得するために、画質を妥協する必要はありません。

今日のブラウザは、提供されたときに高解像度の画像を管理できます。それらを圧縮したい場合でも、高解像度ディスプレイで見栄えを良くするために、必要なサイズのみを使用してください。 CNDを使用して、最初はそれほど複雑でない画像または背景から始めることを考えることができます。 Googleの画像ガイドラインを学び、それに従ってください。

@ Jamsession18は、2021年3月26日にGoogleのJohnMuellerに質問しました。

「使用する画像の品質に関する私の質問に答えてもらえますか？私は現在CWVを最適化しているニュースサイトで働いていますが、そのために、私たちの技術は画質を犠牲にして画像を極端なレベルに圧縮しています（現在はぼやけた画像）。コストに見合う価値はありますか？」

「それは悪い考えのように聞こえます。ページエクスペリエンスは、ランキングで私たちが注目している多くのことの1つにすぎませんが、ユーザーがあなたのコンテンツを気に入らなければ、（あなたが望む方法で）変換する可能性は低く、また戻ってきたくないでしょう。」 -???? ジョン???? @JohnMu

フィールドデータとラボデータはどのように異なりますか？

1つの違いは、ラボデータはテストに役立ち、フィールドデータはランク付けに適していることです。

ラボデータは、固有の環境で検出されたパフォーマンスデータに関するものです。 Chrome Dev Toolsとwebpagetest.orgツールは、ラボデータを取得するために一般的に使用されます。フィールドデータには、Chromeブラウザを使用してサイトのページにアクセスするユーザーのコレクションから収集されたデータが含まれます。フィールドデータは、Google検索コンソールレポートとGoogleページスピードインサイト（ページレポートをラボデータとフィールドデータの両方に依存します）に入力するものです。

フィールドデータは、BigQueryによる自動化を使用して取得できます。オーガニックトラフィックをあまり受け取らない新しいサイトやページの場合、利用可能なフィールドデータがないことがあります。

コアWebVitals最適化の進捗状況の追跡を設定する方法は？

Googleでは、検証リクエストの送信と追跡を簡単に行うことができます。

トラッキングの開始によって、インデックスの再作成やGoogleによるその他のアクティブな動作がトリガーされることはありません。検索コンソールによるサイトのCrUXデータの4週間の監視期間の時計を（再）開始するだけです。

進行中の検証リクエストまたは失敗したリクエストの検証の詳細を表示するには、次の手順に従います。
- [問題の詳細]ページの[検証ステータス]セクションで[詳細を表示]をクリックします。
検証追跡期間をいつでも再開するには：
- 検証の詳細ページを開き、[新しい検証の開始]をクリックします。
検証が失敗した場合：
1. 問題を解決するためにもう一度やり直してください。
2. 検証の詳細ページを開き、 [新しい検証の開始]をクリックして、追跡期間を再開します。

概要ページと問題の詳細ページの両方が表示されます。

3つのWebCore Vitalsメトリックすべてを改善することが重要なのはなぜですか？

3つのコアWebバイタル（CWV）ベンチマークはすべて、優れたユーザーエクスペリエンスを提供するために必要な要素の重要な要素を示しています。 2021年5月に展開される関連するGoogleランキングシグナルブーストの資格を得るには、3つの指標のそれぞれを満たす必要があります。Googleは、これらのコアWebバイタルを測定する6つの方法を提供しています。 Googleのシニアウェブマスタートレンドアナリストであるジョンミューラーから学んだように、アルゴリズムのアップデートがすぐに届くようになるには、この恩恵を受けるためにすべての最小要件を満たす必要があります。

「私の理解では、それが緑色で表示されているかどうかを確認し、それが問題ないかどうかとしてカウントされます。したがって、黄色の場合は緑色にはなりませんが、ファイナルアプローチがどうなるかはわかりません。
いくつかの要素が組み合わさっていますが、一般的な考え方は、ページがこれらすべての基準に一致することを認識できれば、それを検索ランキングで適切に使用したいと思います。
うまくいくものと完全にうまくいかないものがある場合、どのようにバランスを取るかなど、どのようなアプローチになるのかわかりません。」 –ジョンミューラー

これにより、読み込みが速いページと読み込みが遅いページの認識が非常に重要になります。 3つの指標すべてを満たすことはチャンスです。中小企業はSEOをレベルアップし、競争力を獲得して新しいビジネスを獲得するのに役立ちます。これは検索者の最大数にとって最も重要であるため、すべてのサイトの焦点は、デスクトップエクスペリエンスよりもモバイル検索結果の改善にある必要があります。

多くの検索マーケティングと同様に、全体的なアプローチが最適です。サイトのパフォーマンスの1つの領域に集中しすぎて、注意が必要な他の領域を却下するのは簡単です。この例は、ほとんど価値のないコードを追加するだけの場合に考えられるすべてのスキーママークアップを追加することです。 eコマーススキーママークアップの包括的なガイドを読んで、SERPでの製品の可視性を最大限に高めてください。

検索を行う人は、どのサイトがCore Web Vitalsテストに合格したかを知ることができますか？

ページをクリックしてページに移動する前に、ページの速度、ページの応答性、およびページの視覚的安定性の要因が企業によって説明されているというシグナルが必要な場合は、バッジが表示されます。

John Muellerは、GoogleがGoogleのCore WebVitalsに合格したページの検索結果にバッジを導入する可能性があることを示しました。バッジは一種のフィルターとして機能します。これは、Google検索を使用している人が、このCWVバッジを使用してウェブページにクリックスルーすると、前向きな体験を期待できることを示しています。

コアWebVitalsテストツール

Core Web Vitalsをテストするときは、シークレットウィンドウを使用して不要な問題を回避します。

現在利用可能なツールがいくつかあります。私たちは灯台を好みます。多くを使用することにより、全体的な視点をより多く持つことができます。ただし、アプリケーション、技術的な習熟に必要なスキルレベル、およびレポートはかなり異なります。検索コンソールは、各サイトのCore WebVitalsダッシュボードとして非常に便利です。グーグルによれば、ウェブサイト全体の鳥瞰図を取得することは成功のために不可欠です。 Chrome拡張機能とPageSpeedInsightsは、これらの迅速なページ評価に適しています。今後、ここにさらに追加していきます。

この作業が完了したら、検索マーケティングの進捗レポートを直接お届けします。メリットをご理解いただき、楽しんでいただきたいと思います。

技術的なSEOの側面を改善するには、常に必要な賛同と開発者のリソースが必要でした。あらゆる規模の企業と協力している検索マーケターは、予算の承認に永遠に苦労してきました。今日、すべてのWebサイトのパフォーマンスには、明確な重要度スコアがあります。過去に誰かがこれを真剣に受け止めなかった場合、それは今や厳しい現実です。ランキングでペナルティが科せられるまで待つのはなぜですか？

グーグルはこれらの闘争を目撃し、SEOが何年にもわたって賛同を得るための方法を尋ねるのを聞いてきました。テクノロジーの巨人は、Google検索コンソールのレポートでパフォーマンスを透過的にし、追加のランキングシグナルとして確立することで、パフォーマンスの重要性をインテリジェントに強調しています。 Googleページエクスペリエンスは、人がWebページを操作するのにどれだけ満足できるかを測定する一連の要因として最もよく説明されます。あなたの顧客とサイト訪問者、そしてあなたのウェブサイトでの彼らの経験を彼らにとって最高のものにする方法に焦点を合わせてください。

まとめ

CRUXでGoogleが測定した、コアWeb Vitalのパフォーマンスメトリックの最適化は、将来的に大きな後押しになる可能性があります。ただし、これらのWebバイタルがランキング要素になる前でも、サイトのユーザーエクスペリエンスにプラスの影響を与えます。消費者はより速い体験を望んでいます。読み込み速度の問題を改善すると、バウンス率が低下し、ページセッションの長さが長くなり、ユーザー満足度スコアが向上し、コンバージョン率が向上し、SEOトラフィックが増加します。最終的には、これらすべてが収益の増加につながります。

ページパフォーマンスの最適化の優れている点は、比較的マイナーなコードの改善で達成されることが多いことです。