こんにちは、りぱです。

今日はWeb制作者や運用者にとって、2021年注目の話題である

Core web vitals　(コアウェブバイタル）

についてお話したいと思います。

Webの検索順位周り(SEO)や広告収益、Webデザイン(UI/UX)にかかわってくる部分でもあるので是非ご参考ください。

普段は私の趣味を中心にnoteを発信していましたが、自分の勉強のためにも仕事で関係しているWeb周りのニュースについても発信していこうと思います。

また、業界の傾向的にアップデートも早く、いろんな人や会社からいろんな見解が出ています。

今回の記事も私の解釈となりますので、あくまで参考としてご確認頂けますと幸いです！そして、違う見解や良い情報があれば是非教えてください！

それではレッツスタート！

▼こんな人にオススメの記事

・ブロガー/アフィリエイター/サイトを運営者/IT担当等
ウェブサイトにかかわる方
・SEO対策について調べている、効果的は方法が知りたい方
・Googleのアップデートに興味がある方

▼この記事を読むとこんなことがわかります

・Core Web Vitalsとは、どんな指標なのか
・Core Web Vitalsの必要性
・どのようにCore Web Vitalsに対応すればいよいのか
・広告収益性とのバランス
・便利なツール

Core Web Vitalsについて

「Core Web Vitals（コアウェブバイタル）」とは、2020年にGoogleから発表されたWebサイトにおける最新のUX重要指標となります。

CWVでは「LCP」「FID」「CLS」の3つの要素を、サイト健全性を示す重要指標として明示しています。
モバイルデバイスとデスクトップデバイスでのページ読み込みの75％タイルを測定の基準とするとのことです。

Web Vitals　の目的
・サイトパフォーマンスの測定をシンプルにする
・UXへの影響を重視した指標
・サイト運用者へのUX改善のサポート

またこの指標は年に1回Googleによって見直されています。

よりユーザー視点にたったUI、UXの高いサイト運用ができるような指標として、フォーカスされています。

ユーザーエクスペリエンス(UX)の3つの重要な構成要素

・読み込みパフォーマンス
サイトにアクセスした際に、ローディングになった記憶はありませんか？
読み込みが遅いと、離脱に繋がります。

・インタラクティブ性
反応は早いか？例えばクリックした後ページが全然変わらなければ、何度もクリックする等が発生するかと思います。

・視覚的安定性
見た目が快適か？表示崩れ、がたっとなる等が対象です。

それでは、早速3つの重要な指標について見ていきましょう。

LCP：Largest Contentful Paint
読み込みパフォーマンス

ビューポートに表示される最大のコンテンツ要素（画像またはテキストのブロック）がレンダリングされるまでの時間を測定します。

「コンテンツの読み込みスピード」というわけです

2.5秒以内にロードされる状態が良好とされています。

LCPが長くなる要因
・サーバーの対応に時間がかかっている
・リソースの読み込みに時間がかかっている
・クライアント側でレンダリングが行われている
・JavaやCSSによりレンダリングが妨げられている場合

FID：First Input Delay
インタラクティブ性

ユーザーが最初にページを操作したときから、ブラウザがその操作に応答するまでの時間を測定します。

「最初のアクションの反応が良いか！」

・リンクをクリックしてから画像やリンク先がすぐに表示されるか
・アクションをおこなった後の反応がすぐに見えるかどうか

0.1秒以内に反応すると良い。

FIDが長くなる要因
・タスクが長い
・Javaの実行に時間がかかっている
・Javaのバンドルが大きい
・Javaによりレンダリングが妨げられている

できるだけタスクを減らして、Javaを実行時間を減らすのが重要

CLS：Cumulative Layout Shift
視覚的安定性

ページのライフスパン全体で発生した予期せぬレイアウトシフトの合計スコアを算出します。

「ガタっとしないか、ずれないか」

0.1までが良好とされている

CLSが発生する要因
・画像サイズが指定されていない
・広告の読み込み、iFrameのサイズが指定されていない
・コンテンツが動的に挿入されている
・ウェブフォントが FOIT（Flash of Invisible Text）/ FOUT（Flash of Unstyled Text）を引き起こしている

対応するメリット

以下のような指標が改善する可能性があります。
・page/session
・pageview
・離脱率
・直帰率
・回遊率
・平均掲載順位
・RPM

ただし、運用型広告等CLSやサイトスピードに少なからず（？）大きく（？）影響する広告において制限を加えることで、収益性にはインパクトがあるとも考えられます。

サイズ固定することで、よびだされる案件の限定や領域確保による空表示の発生等は避けては通れないのでは？と考えられますね。。

SEOにどの程度影響するのか

https://developers.google.com/search/blog/2020/05/evaluating-page-experience

これまでよりSEOへの重要性は高まると考えられます。
ただしまだアップデートの予定が決まっていないため、すぐの対応は必要ないと考えられますが、Google曰く6か月前にはリリースがあるとのことです。

Core Web Vitalsを測るツール

ツールについては、別途記事をかこうと思います！
詳細は以下リンクにあるのでご確認ください！

またChormeの拡張機能もご参考ください
https://github.com/GoogleChrome/web-vitals-extension

①Page Speed Insight (PSI)

まずはこちらのデータで内容を確認

②Search Consple (サーチコンソール)

https://search.google.com/search-console/about?hl=ja

レポート
https://support.google.com/webmasters/answer/9205520

③Chromeユーザーエクスペリエンスレポート

対策方法について

https://web.dev/optimize-lcp/#slow-resource-load-times

LCP・・
画像や動画のサイズを小さくしたり、表示スピード自体をあげること。

重要なレンダリングパスを最適化する
●CSSの読み込みによる遅延を抑える
●CSSを小さくする
●重要でない CSS の読み込みを遅らせる
●重要な CSS をインラインで読み込む
●JavaScript の読み込みによる遅延を抑える

リソースの読み込み時間を最適化する
●画像を最適化して圧縮する
●重要なリソースをプリロードする
●テキストファイルを圧縮する
●ネットワーク接続に応じて異なるアセットを配信する（配信の自動調整）
●Service Worker を使用してアセットをキャッシュする

クライアント側のレンダリングを最適化する
●重要な JavaScriptを最小化する
●サーバー側のレンダリングを使用する
●事前レンダリングを使用する

FID
JavaScriptの実行時間を減らす、長い処理を分割して実行する。

JavaScript の実行を最適化する
●長いタスクを分割する
●ページのインタラクティブ性を最適化する
●Web Worker を使用する
●JavaScript の実行時間を削減する
https://web.dev/vitals-tools/
https://web.dev/optimize-fid/#long-tasks
https://web.dev/optimize-fid/#optimize-interaction-readiness
https://web.dev/optimize-fid/#reduce-javascript-execution

第三者のコードを最適化する
・第三者のコードをオンデマンドで読み込む

CLS
サイズ不定な要素を無くし、レイアウトのズレを解消する。

静的な、またはスケルトン UIのプレースホルダを使用する
●画像のサイズを指定する
●固定または最小の高さを指定する
●広告スロットのスペースを静的に確保する
●固定されていない広告をビューポートの上部付近に配置する場合は慎重に行う
●広告スロットをプレースホルダで確保する場合に、広告が返されなくても確保したスペースの表示が崩れないようにする
●広告スロットのサイズを最大限に確保してレイアウトの崩れを防ぐ

広告対応について

・表示領域を確保して広告表示範囲を固定させることでずれを少なくする。
・また呼び出しサイズを高さ固定させる（ATFは特に）
・ただしオーバーレイ広告の場合や横はば100％フィット等はどうしてもＣＬＳに影響すると考えられます。
・また広告がよばれない場合、領域確保については空白が発生する場合があります。
・対処として、空白が発生しないように自社広告を設定するなり、固定サイズの高さを半分で設定しておくなども検討しないとかもしれません。

参考になるnoteも纏めましたのでご参考ください！

2021年絶対にやっておくべきSEO対策3選

SEO担当者なら知っておきたい「2021年のSEOトレンド」｜【15,000文字】

【最新】2021年式SEO対策について、解説｜コアウエブバイタル（Core Web Vitals）とは何か？

以上、お読み頂きありがとうございました。

みなさんのお力になれれば幸いです。

なにかあれば是非質問してください！

りぱ