サイトの重要指標 Core Web Vitals について

morita

こんにちは、森田です。
最近、サイトの重要指標 Core Web Vitals について色々と調べております。
今回は簡単に解説できればと思っております。

Web Vitals

via: Google Developers

Google は サイトの健全性を示す重要指標として Web Vitals という取り組みを行っています。これは、ウェブで優れたUX(ユーザーエクスペリエンス)を実現するために重要と思われる品質シグナルの統合ガイドを提供する取り組みだそうです。

Core Web Vitals

via: Google Developers

その Web Vitals の中でも特に重要な共通シグナルを Core Web Vitals と呼びます。

最近、このキーワードを耳にすることが多くなったのですが、その理由は Google の検索ランキングにこの Core Web Vitals が影響すると発表があったからです。
Google としては UX の高いサイトはより多くのユーザーが見るべきサイトとして評価する訳ですので、これは当然のことと思いました。

Core Web Vitals の重要な共通シグナルは3つあり、それぞれ頭文字から LCP, FID, CLSと分類されています。それぞれを数値として評価します。

Google Developers の記事 を参考に3つの指標を確認してみましょう。

LCP (Largest Contentful Paint)

ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。

https://developers-jp.googleblog.com/2020/05/web-vitals.html

ざっくり言うとページの表示スピードの評価のことなのは分かりますが、「最も有意義なコンテンツ」って何?と思いますよね🤔
最も有意義なコンテンツとは、ビューポート内の最も大きいコンテンツ(要素)のことを指します。
この表示が2.5秒以内にレンダリングできれば LCP のスコアは良いとされます。

つまりページ全体のページスビードも大事ですが、今後は最大コンテンツの表示スピードをより考慮しないといけないことになりそうです。

FID (First Input Delay)

最初の入力までの遅延を表します。応答性を測定して、ユーザーが最初にページを操作しようとする場合に感じるエクスペリエンスを定量化します。

https://developers-jp.googleblog.com/2020/05/web-vitals.html

「ユーザーが最初にページ操作」、つまりクリックや入力などを行えるようになる時間のことを指します。この操作が100ミリ秒未満で最初の操作が行えると FID のスコアは良いとされます。

これは CSS や JavaScript の書き方や読み込み順などブラウザのレンダリングも考慮する必要がありそうですし、そもそものサーバースペックなども関係しそうですね。

CLS (Cumulative Layout Shift)

ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。

https://developers-jp.googleblog.com/2020/05/web-vitals.html

「視覚的な安定性」、簡単に言いますとページの読み込みなどでガタガタしないサイトのことを指します。

例えば、リンクをクリックをしようとした瞬間に新たなコンテンツが読み込まれてリンクの位置が変わり、違うリンクを誤クリックし意図しないページに飛んでしまう経験をされたことありませんか?
このようなリンクやコンテンツの位置が安定しないことをレイアウトシフトと呼び、レイアウトシフトスコアとして数値化します。
ページ全体の累積レイアウトシフトスコアが0.1未満になると CLSスコアは良いとされます。

「視覚的の安定性」という個人的にあまり聞き慣れないものを考慮する必要が出てきました。ただ、解説を読むと、なるほど重要だなと思えるものですね。

Core Web Vitals を確認する方法

Core Web Vitals のサイト評価は2021年頃と発表されていますが、現状でもスコアを確認することはできます。

Chrome拡張

つねに確認する方法として最も簡単なのは Chrome の拡張機能をインストールすることです。
拡張機能をインストールするだけで見ているサイトの Core Web Vitals スコアをが表示されます。

Chrome ウェブストア – Web Vitals

https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

PageSpeed Insights

PageSpeed Insightsでも測定の一番先頭に Core Web Vitals のスコアが表示されています。

このブログの PageSpeed Insights の測定画面

修正する箇所の表示などもしてくれるのでスコア改善に役立ちます。

また、Google Search Consoleを利用している場合はサイトレポートでも確認することもできます。

まとめ

簡単でしたが Core Web Vitals について解説させていただきました。

私もまだまだ学習途中で試行錯誤中ではありますが、各指標のスコアの改善方法などを掘り下げて次回の記事にできればと考えております。

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか? 「腕の良いエンジニアに重要でない作業まで任せてしまっている」「腕の良いデザイナーに主業務以外も任せてしまっている」「すべての手が足りず細かいことまで手が回らない」などなど… 。

そんなときは、相談相手としてGaji-Laboにお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!

関連リンク


morita

投稿者 Morita Sou

フロントエンドグループ内チームマネージャー。
適切な技術提案やコミュニケーションを出来るように心掛けています。CSS設計・CMS構築や開発環境の構築などを得意としています。Macやエディタ、開発環境などを快適にすることにいつも燃えています。