Core Web Vitals(コア・ウェブ・バイタル)に向けてWEB担当者がやるべきことは何か?

WEBマーケティング

Core Web Vitals(コア・ウェブ・バイタル)に向けてWEB担当者がやるべきことは何か?

こんにちは、そめです。

2020年5月28日、Googleが正式にCore Web Vitals(コア・ウェブ・バイタル)を検索エンジンの検索結果に反映させると発表しました。

 

▼ 米国のGoogle Webmaster Central Blog

 

▼少し遅れて(6月5日)日本のウェブマスター向け公式ブログでも

 

日本向けWEBマスター公式ブログにはCore Web Vitals(コア・ウェブ・バイタル)という言葉は出てきませんが、Googleが今回のアップデートで目指す方向性に関して記述してある内容は同じです。

では、WEB担当者・SEO担当者・WEBマスターはこれから、Core Web Vitals(コア・ウェブ・バイタル)の導入に向けて、何をしていかなくては行けないのでしょうか?

解説していきたいと思います。

 

Core Web Vitals(コア・ウェブ・バイタル)とは何か?

スマホを持った手

WEBサイトへ訪問したユーザーへの体験向上を目的とし、googleが導入した、Web Vitals というコンセプトがベースにあります。

Web Vitalsを下敷きにした、「体験向上」の具体的な指標を

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)

と、定め、この3つをまとめた総称をCore Web Vitals(コア・ウェブ・バイタル)と呼びます。

この、Core Web Vitals(コア・ウェブ・バイタル)をランキングのシグナルとして採用することを決めたようです。

※それぞれの意味はこの後

 

導入時期は?

2021と書かれた紙

2021 年以降になることが発表されており、導入の6ヶ月前までには、アナウンスがあるようです。導入までに十分な時間が与えられていますが、対応に時間がかかる企業もあると思いますので、現時点で対応可能なことは何か?解説していきます。

 

対応すべき3つの指標

紙に書かれたグラフ

 

Largest Contentful Paint

Largest Contentful Paint

Largest Contentful Paint

FCP © web.dev

First Paint と First Contentful Paint という表現があり、これらはそれぞれ「一番最初に描画されたもの」「一番最初に描画された画像や文字などのコンテンツ」という意味合いです。いづれもファーストビューにおいて、ユーザーが初めにサイトの情報に触れるまでの時間を指標化したものです。

それと同様に、Googleが重要指標と位置づけたのが、Largest Contentful Paintです。「最大コンテンツの描画」のと表現することができます。つまり、ファーストビューに表示される最も大きなコンテンツ(文字や画像)が表示されるまでの時間を指標化したものです。

上記の画像を参考にした場合、一番左が「First Contentful Paint(FCP)」となり、一番右側の画像部分が「Largest Contentful Paint(LCP)」となります。

値は数値(秒数)で表され値が小さいほど評価が高く、UXに優れていると判断されます。

仮に上記の図が左から右へ描画されたイメージだとした場合を例に挙げてみましょう。画像を最大コンテンツだとGoogleが評価した場合、画像の表示速度を上げることがこの場合の対策となります。

 

計測方法

何が、Largest Contentful Paintであると判定されているかは、▼PageSpeed Insightsで確認することができます。

 

 

例えば僕のブログ記事であれば

▼PageSpeed Insightsの診断の箇所から

PageSpeed Insightsの検索のスクショ

 

▼Largest Contentful Paint element を探します。

PageSpeed InsightsのLargest Contentful Paintのスクショ

対処方法

この場合、アイキャッチ画像が「Largest Contentful Paint element」と判定されていますので、アイキャッチ画像を軽量化やリサイズ・リフォーマットするなどして、画像の表示速度を上げる努力をすることとなります。

 

First Input Delay

First Input Delay

First Input Delayは「初回入力遅延」という意味です。

噛み砕くと、ユーザーが最初にページ内で何かしらのアクション(クリック・タップ・入力など)を行った時に、その操作に対して、反応を返すのにかかった時間のことを言います。

値は数値(秒数)で表され値が小さいほど評価が高く、UXに優れていると判断されます。

計測方法

こちらの計測には、▼PageSpeed Insightsで確認することができます。

 

するとこのような表示が出てきます。

参照:https://www.asobou.co.jp/blog/web/psi

こちら、お借りしてきた画像ですが、なぜ僕のサイトのものを載せなかったっかというと。

載せれなかったからです…

PageSpeed Insightsは、その時々の表示速度ではなく、Chrome経由でアクセスしたユーザーのアクセスデータを元に、計測結果を表示しています。

つまり、僕のようなまだ、開設して2週間10記事程度しかないサイトですと、まだアクセス数が不足しており、データ表示されません。

その際は▼こんな感じで表示されますので、ご注意ください。

レポートに十分なアクセスがありません

対処方法

というわけで、こちらに関しては「ユーザーがどんなファーストアクションを行ったか?」によって、計測速度は変わってきますので、「ここを対処すればOK」というより、htmlの構造からjsによる遅延の影響など、サイト内のアクションに関わる部分全般の高速化が求められることになります。

Cumulative Layout Shift

Cumulative Layout Shift

Cumulative Layout Shiftは「累積レイアウト変更」のと言う意味です。

一番言葉として意味がわかりにくいですが、まず下記の画像を御覧ください。

Cumulative Layout Shiftのイメージ

 

左の状態から、コンテンツを見ていると、後から読み込まれた要素が今見ていたコンテンツを押し出すようになる現象です。

このようなユーザーの意図しない、レイアウトのズレがどれくらい発生したかを数値化したものと考えてください。数値の測定方法ですが、ユーザーが開いているブラウザの画面内で「ユーザーが操作していない」時に発生した画面のズレの数値化したものです。

値は数値だけで表され値が小さいほど評価が高く、UXに優れていると判断されます。

 

 

計測方法

こちらの計測方法は、Lighthouse(chromeの拡張機能)で計測が可能です。

 

対処方法

こちらも「ここを対処すればOK」というものはありません、htmlの構造からCSS、jsによる遅延の影響など、サイト内の表示遅延によるレイアウトの崩れ全般に対応する必要があります。

例えば、画像が予めCSSで、高さ(height)が指定されていない場合、予め高さが指定されていませんので、画像を読み込んでからレイアウトを変える形になります。

画像の高さを固定しても問題ない、レイアウトの場合予め高さ(height)を指定するなどが、一つの対処法になります。

 

▼こちらもぜひ参考にしてみてください

 

 

便利な3つの指標の計測方法

さて、PageSpeed InsightsやLighthouseをご紹介してきましたが、3つの指標を一目瞭然で評価してくれるChromeの拡張機能があります。

chrome拡張

こちらでページを計測してみると、このような形で表示がなされます。

Chrome拡張機能のWeb Vitals表示イメージ

 

残念ながら、僕のサイトではまだ、First Input DelayとCumulative Layout Shiftはお預けでした、、、。

 

 

その他参考になる記事

ソースコードの最適化

 

画像の圧縮

 

まとめ

スマホを持つ手

いかがだったでしょうか?

今までは、単純にページの表示速度や、モバイルフレンドリーなど、大枠の対応が必要でしたが、UX(サイト上でのユーザー体験)向上が更に至上命令としてGoogleから与えられた形です。

WEBマスターは、さらにコンテンツに加え、エンジニアやテックチームとの連携が求められ、小手先のSEOだけでは通用しない状態です。

コンテンツ担当ーSEO担当ーフロント担当ーバックエンド担当

この担当領域がチームになって初めて効果的なユーザー体験を提供でき、そのディレクション能力が今まで以上に求められそうです。

ーーーーーーーーーーーーーーーー

最後までお付き合い、ありがとうございました!!

ではでは、気が向いたらブックマークやSNSでのシェアをお願いいたします。

 

▼応援クリックもこちらから

ワンクリックで応援

 

  • この記事を書いた人

そめ

上場企業・ベンチャーなどを歴任し、現在は某社でCMOとして、勤務。企業コンサルティングなども行っております。ブログにて、実践的なノウハウを提供中。お問合わせはTwitterDMにて。

-WEBマーケティング
-, ,

© 2020 とあるCMOのマーケティング実践記(と雑記)