Finally, I found the difference between "core web vitals", "origin" and "lab data" in the CLS numbers of Google PageSpeed Insights.

やっと分かった、Google PageSpeed InsightsのCLSの数値に出てくる「core web vitals」「オリジン」と「ラボデータ」の違い

公開日: 使い方など
やっと分かった、Google PageSpeed InsightsのCLSの数値に出てくる「core web vitals」「オリジン」と「ラボデータ」の違い

2021年6月のアップデートから始まる、Googleの検索結果の指標にCLSを算入するという話。気にされている方はいろいろと対策をされていることと思います。

ちなみにCLSというのは「Cumulative Layout Shift」の略で、ページが表示される間に起きるブレのこと。平たく言うとパッと表示した後で後からズルズルと修正される部品がそのページの中にどれだけあるのかという数値なんです。表示されながらレイアウトが変わるから訪問者にとってはあまりよくないことでしょ!というものを数値化してあるんです。当然これが少なければ見やすいページになる訳で、それをGoogle検索結果の順位に反映させようというのが今回の検索アルゴリズムアップデートなんだそうです。

かくいう私も一応【ha-Basic】というテーマを配布している身でもあり、自身で作成しているサイトもこのテーマを使用していることもあって、テストサイトと実サイトとで検証を繰り返していました。

でもなんだか芳しくないんですよ、これが。問題点から「ここか?」と改善しても一向に数字が変わらずの数日間でした。Google PageSpeed Insightsは、問題点は指摘してくれてもどこをどう直せばというところは全くヒントも与えてくれないので、本当に苦労しますね。

しかも結果画面には2つ指標があって、何をどうしても変化しない上側の表示と、ビビッドに反応する下の数字があり、いったいどっちが大切なのか?どちらが正しい数値なのかがわからないんです。

そこで見つけたのが以下の記事。

How To Reduce Cumulative Layout Shift To “0” in WordPress

英語のページですが、Google翻訳の力を借りて読んでみると、CLSの問題が発生する場所を特定する方法や修正の仕方などが、実に詳しく分かりやすく書かれています。

CLSの改善については、日本のページも洗いざらい検索してみましたが大抵は画像に縦横の比を示す数字を設定するというもの(これも重要ではあります)で、それ以外にはあまり有用なものは見つかりませんでしたから、本当に感謝です。

そこで紹介されている累積レイアウトシフトデバッガーを使うと、のCLSの状態を知ることができます。また、どこがどのように表示時にズレるのかがGIF動画で表示されるレイアウトシフトGIFジェネレーターも「どこ」を知ることができて大変重宝します。

また、データは以下の3種類表示されます。

  1. モバイルとパソコンのテストデータ(本当に今の値)
  2. テストされたURLの実際のユーザーCLS測定
  3. ホスト名(オリジン)の実際のユーザーCLS測定

・・・とこれはそれぞれ何なの?もページ内に解説されています。

テストされたURLの実際のユーザーCLS測定

実際のユーザーがホスト名(オリジン)で累積レイアウトシフトをどのように体験するか、およびGoogleがコアWebバイタルに使用するもの:テストされたURLの実際のユーザー測定からの集計データ。データはChromeユーザーエクスペリエンスレポートAPIからクエリされ、過去28日間の移動平均を表します。

累積レイアウトシフトデバッガー

ホスト名(オリジン)の実際のユーザーCLS測定

実際のユーザーがホスト名(オリジン)レベルで累積レイアウトシフトをどのように体験するか、およびGoogleがコアWebバイタルに使用するもの:テストされたURLの関連するホスト名(オリジン)全体の実際のユーザー測定からの集計データ。データはChromeユーザーエクスペリエンスレポートAPIからクエリされ、過去28日間の移動平均を表します。

累積レイアウトシフトデバッガー

あくまでも日本語訳を読んでの解釈ですが、「テストされたURLの実際のユーザーCLS測定」は、過去28日間に実際にアクセスのあったページを総合した結果、「ホスト名(オリジン)の実際のユーザーCLS測定」は同一ドメイン上(ホスト上)にあるページの過去28日間の総合結果ということだそうです。

これを読んで納得。28日間の移動平均だったんですね。そうなると、改善させても結果的には28日後にならないと改善されていったかどうかはわからない(今流行している新型コロナとおんなじ)ということなんですね。

いろいろと調べると、実際に検索結果決定時の指標となるのは「core web vitals」の数値なので、Google PageSpeed Insightsの画面で言えば、一番上に表示される数値ということにはなるのですが、現在が改善されていればそのうち修正されていく(28日平均なので)のですから、今のうちに改善して果報は寝て待てでいいのでしょう。

ここまで紹介しておいてアレなのですが、本記事を読んでいただいて分かる通り、「だろう・・」「のよう・・・」が多いことから、私が専門家でないことは明白ですし、ネットに転がっている情報も「これで大丈夫!」という確信的なものはないと思いますので、1つや2つの記事を鵜呑みにするのは危険です。いろいろな記事を読んでいただいて、正しいと思えるものを判断するようにしてくださいね。

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。