2021年03月18日SEOの新基準「ウェブに関する主な指標(Core Web Vitals)」の基礎まとめ

要点

ウェブに関する主な指標(Core Web Vitals)に関する解説

1. 2021年5月以降、大型要素の表示速度・反応遅延回避・不安定性回避が検索順位の判定要素に追加される
2. Search Consoleで概況を把握し、PageSpeed InsightsやChrome開発者ツールで診断
3. 評価に問題のあるページを見つけたら、問題点を特定して改善

「ウェブに関する主な指標」とは

「ウェブに関する主な指標(Core Web Vitals)」は、Googleが2020年4月に新たに提唱した、Webサイトに関する使いやすさの指標です。以下の3種類で構成されています。

• Largest Contentful Paint(以下LCP)
  表示画面内最大要素表示完了までの時間(⇒ページの表示待ち時間を測る指標)
• First Input Delay(以下FID)
  初回ボタン/リンク押下時に反応が遅れる時間(⇒ページのインタラクティブ性を測る指標)
• Cumulative Layout Shift(以下CLS)
  読み込み中のレイアウト順次変更の有無(⇒ページの表示安定性を測る指標)

Googleはコンテンツ(情報)の有用性・信頼性による従来の検索順位評価とは別に、サイトの使いやすさや信頼性に関わる指標を、検索順位用のページ評価に取り入れています。

• モバイルフレンドリー(スマートフォン対応)
• セーフブラウジング(フィッシングサイトや不正アクセスの排除)
• 常時HTTPS化
• 操作の妨げとなるインタースティシャル(ページ遷移間)表示の排除
• 読み込み速度

等が代表例で、そこに2021年5月から加わるのが「ウェブに関する主な指標」の3要素です。

Web検索からの流入増を狙うには、情報の有用性・信頼性はもちろん、サイトの使いやすさでも他サイトとの競争に勝つ必要があります。「ウェブに関する主な指標」はその助けとなる3要素が数値化されたもので、コーディングによるSEOの改善度合いを測定するのに役立ちます。

各指標の詳細

Largest Contentful Paint(LCP、直訳すると「最大コンテンツ描画」)は、初期表示(ファーストビュー)の中で最大の要素の表示完了までに必要な時間です。推奨値はページの読み込み開始から2.5秒以内です。

LCPの対象要素は、主に静止画、テキスト等を含むブロック要素とされています。画像はimg要素だけでなく、videoのサムネイル(poster)や、CSS等で背景画像扱いとなるものも含みます。また、SVGイメージも、image要素内に含まれる場合はLCPの対象になります。それ以外のSVGや動画は、現状LCPの対象には含まれていませんが、将来的に追加される可能性があります。

First Input Delay(FID、直訳すると「初回入力遅延」)は、リンク押下などの初回アクションに対して、起こりうる反応遅延の長さを計測したものです。推奨値は100ミリ秒(0.1秒)以内です。

ブラウザはHTMLやCSS・JavaScript等の読み込みを読み込んだあと、解析・実行処理を行います。ここで時間がかかると、ボタンを押しても反応が遅れ、ユーザーの不快感を招くことになります。

Cumulative Layout Shift(CLS、直訳すると「累積レイアウト移動」)は、サイト表示の安定性に関する指標です。推奨値はスコア0.1ポイント未満です。

大半のWebブラウザは、画像やテキストやその他の各種要素を、読み込まれたものから表示しつつ、そのたびにレイアウトを随時組み換えています。このとき、読み込みの早い要素と遅い要素にタイムラグが発生すると、ボタンを押す直前に別の要素(広告等)が割り込まれ、そちらを誤って押してしまうような悲劇が発生します。

CLSでは、レイアウト変動を一瞬でも起こしうる要素の有無を判定し、一定の計算式をつかってスコア化します。

Search ConsoleやPageSpeed Insightsでサイトを診断

サイトの状況を調査するには、以下のツールを使用すると便利です。

• 全体を把握…Search Console
• 個別に診断…PageSpeed Insights・Chrome開発者ツール

Google Search Console

Google Search Consoleは、Googleが無料提供するサイト管理ツール(要Google ID)で、主にSEO関連の機能が集約されています。ここに自サイトを登録(※)することで、評価がついたページの集計が見られます。

評価はPC・モバイルの2種類に分かれ、[良好(緑)][改善が必要(黄)][不良(赤)]の3段階で集計されます。改善が必要～不良のページはスコアと該当ページのURLが表示されます。URL一覧は各ページのPageSpeed Insights評価ページにリンクされており、個別ページの診断に移ることが可能です。

※登録時にサイトの管理権を要する作業が必要です。また、既に誰かがSearch Consoleにサイトを登録済みの場合は、現管理者から自分のGoogle IDにサイト(ドメイン)単位でアクセス権を付与してもらうと、管理画面にアクセスできます

PageSpeed Insights

PageSpeed Insightsは、Googleが無料提供するサイト診断ツールで、主にページの表示速度の測定に使用します。指定した個別ページについて、読み込み速度や遅延等に関する様々な測定結果が表示されます。

改善ポイントが見つかった場合、項目別に原因になっているファイルと、改善案が表示されます。また、Largest Contentful Paintの対象要素や、Cumulative Layout Shiftのペナルティ対象要素も指定されます。

メリット：日本語化が進んでおり、初心者でも導入しやすい

PageSpeed Insightsは日本語化が進んでおり、フォームにURLを入れるだけの簡単設計など、導入のしやすさが魅力です。Webの軽量化・高速化チューニング初心者向けの導入ツールとして特に適しています。

結果表示URLのパラメーター内に診断先URLが含まれる仕組みなので、Excelでサイト管理用のディレクトリマップを作っていれば、そこからPageSpeed Insightsの診断URLを生成しておき、好きな時にURLをクリックして再診断する、といった使い方も可能です。

デメリット：非公開サイトを診断できない

PageSpeed Insightsの診断対象は公開サイトのみで、BASIC認証等で非公開になっているサイトは診断できません。この場合は後述のChrome開発者ツールを活用します。

Chrome開発者ツール

Google Chrome(PC版)でサイトを表示中に[F12]キー、もしくは[Ctrl]+[Shift]+[i]キーを打つと、開発者ツールが表示されます。この中の[Lighthouse]タブでPageSpeed Insightsの元になっている診断ツール「Lighthouse」が使えます。

1. Categoriesに[Performance]をチェック
2. Deviceは[Mobile][Desktop]のいずれかをクリックで選択
3. [Generate report]をクリック

しばらく待つと診断結果が表示されます。

メリット：非公開サイトでも診断できる

Chrome開発者ツールは、表示中のページであれば、BASIC認証等の入った非公開サイトでも診断できます。ページ改良作業中の診断に威力を発揮します。

デメリット：英語が苦手だと使いにくい

メニューや診断メッセージは全て英語なので、英語が苦手な人には敷居が高めです。日本語化の進んでいるPageSpeed Insightsで診断項目の内容に親しんでおくと、英語のメッセージでも内容を掴みやすくなります。

課題の特定と改善

PageSpeed InsightsやChrome開発者ツールでページを個別に診断すると、[ウェブに関する主な指標]を含む各種診断項目の結果が表示されます。

Largest Contentful Paint (LCP) の改善

Largest Contentful Paintの測定値は、PageSpeed InsightsやChrome開発者ツールの診断結果冒頭に表示されます。

LCPと認識されている箇所は、[「最大コンテンツの描画」要素(Largest Contentful Paint element)]で確認できます。

LCP対象要素自体の軽量化

LCPと認識された箇所のファイルサイズが必要以上に大きい場合は、JPEGで画質・ファイルサイズを調整したり、よりファイルサイズを抑えられる形式への移行により、該当要素を軽量化できます。

LCP対象要素以外の高速化

LCPはページ全体の読み込み開始からの時間なので、LCP対象要素だけを軽量化しても、そこに至るまでの道のりが長ければ意味がありません。そこで、LCP対象要素以外での軽量化・高速化も意識する必要があります。

• 読み込まれているJavaScriptやCSSが肥大化している場合、無駄な部分をカットして軽量化する
  ※必要な部分を削ってしまわないよう注意が必要
• CSS読み込みを非同期化しても表示に影響を与えない場合は非同期化して、冒頭の読み込み時間を短縮
• HTTP/2を使用する(要サーバー設定＆サイト全体の常時SSL化)
• キャッシュ有効期間の設定もしくは期間延長
• サーバーの高速化やCDNの追加

※参照：Optimize Largest Contentful Paint - web.dev
　https://web.dev/optimize-lcp/

First Input Delay (FID) の改善

First Input Delayの数値は、PageSpeed Insightsの[ラボデータ]には含まれず、[フィールドデータ]もしくは[Origin Summary]でのみ確認可能です。Origin Summaryはサイト全体の集計結果であり個別ページの結果ではないので、フィールドデータがないページはOrigin Summaryがあればそこからサイト全体の状況を大まかに把握することになります。

JavaScriptで重い処理がメインスレッドで走っている場合、以下の対策を検討する必要があります。

• 既に使用されていない処理がJavaScript内に含まれている場合、除去してファイルを軽量化する
• 非同期化できる処理は非同期化していく
• 長いタスクが分割できる場合は分割・非同期化
• Web Workerを使用してスレッドをバックグラウンド化する

細かく分析をしたい場合は、Chrome開発者ツールのPerformanceタブから、ブラウザ実測値ベースでの表示パフォーマンスや待ち時間が分析できます。

※参照：Optimize First Input Delay - web.dev
　https://web.dev/optimize-fid/

Cumulative Layout Shift (CLS) の改善

Cumulative Layout Shiftの数値は、PageSpeed InsightsやChrome開発者ツールの診断結果冒頭に表示されます。

[レイアウトが大きく変わらないようにする(Avoid large layout shifts)]の項目を開くと、CLS増加の要因となっている要素と、影響度のスコアが表示されます。また、スクリーンショット表示でページのレンダリング状況が確認できるため、ファーストビューにレイアウト移動要素がある場合は、目視での確認も可能です。

画像の読み込みに伴うレイアウト移動を回避

PageSpeed InsightsやChrome開発者ツールで[画像要素で width と height が明示的に指定されていない(Image elements do not have explicit width and height)]を開くと、該当する画像要素が一覧表示されます。

これらにそれぞれwidth・heightを指定することで、ブラウザが画像読み込み前でも指定されたサイズに基づいてレンダリング処理を行うため、レイアウト移動を回避できます。

ソーシャルプラグイン等外部読み込み要素によるレイアウト移動を回避

SNS投稿ボタンやタイムライン埋め込みなど、各SNSが埋め込み用コードを提供しているものを埋め込む場合、これも読み込んでみるまでブラウザからは縦横の寸法がわからないことになります。

• 埋め込み用iframeにあらかじめwidth・height属性を入れられる場合は入れる
• 読み込み要素を含む部分をdivで囲み、そこにheightやwidthのサイズ指定をつけることで、あらかじめ表示枠を確保しておく

等の対応により、ソーシャルプラグインを含む部分のレイアウト移動を回避し、表示を安定化できます。

※参照：Optimize Cumulative Layout Shift - web.dev
　https://web.dev/optimize-cls/

注意点

粘り強い試行錯誤が必要なこともある

ウェブに関する主な指標の改善は、簡単な改修で済むものもあれば、仮説の検証や試行錯誤を粘り強く繰り返す必要があるものもあります。改修コストの予算感によっては、試験的改修ですぐに良い結果が出たもののみの適用にとどめる選択も重要です。

パートナー企業に依頼する場合は、変更への柔軟な対応力があるところと組むと、軽い改修から粘り強い改修まで幅広く進めやすくなります。

根深い問題は、サイトのリニューアルタイミングを見据えつつ判断

サイトの根幹をなすCSSやJavaScriptに根深い原因がある場合、運用レベルの改修では改善が難しい場合もあります。

その場合は、該当項目を次期リニューアル用の課題として一旦対応を保留する、という選択肢を含めた総合的な判断が必要となります。小手先のSEOだけでなく、サイト全体のリニューアルまでしっかりサポートしてくれるWeb制作会社と組むことが重要です。

まとめ

ウェブに関する主な指標の改善は、サイトの診断結果と改善対象の要素指定を見れば、ある程度までは改善の道筋が立てやすくなっています。SEO関連の実装・Webサイト運用が得意で、かつ柔軟な対応力のあるパートナー企業等の力を借りて、挑戦してみることをおすすめします。