サイトの重要指標 Core Web Vitals について
こんにちは、森田です。
最近、サイトの重要指標 Core Web Vitals について色々と調べております。
今回は簡単に解説できればと思っております。
Web Vitals
Google は サイトの健全性を示す重要指標として Web Vitals という取り組みを行っています。これは、ウェブで優れたUX（ユーザーエクスペリエンス）を実現するために重要と思われる品質シグナルの統合ガイドを提供する取り組みだそうです。
Core Web Vitals
その 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 のスコアが表示されています。
修正する箇所の表示などもしてくれるのでスコア改善に役立ちます。
また、Google Search Consoleを利用している場合はサイトレポートでも確認することもできます。
まとめ
簡単でしたが Core Web Vitals について解説させていただきました。
私もまだまだ学習途中で試行錯誤中ではありますが、各指標のスコアの改善方法などを掘り下げて次回の記事にできればと考えております。
Gaji-Labo は SSR / SSG / SPA 開発実績があります
SSR / SSG / SPA の開発実績があるフロントエンド開発の専門家が御社の開発チームに入ることで、バックエンドも含めた全体の開発効率が上がります。
「フロントエンドの人手が足りず信頼できるエンジニアを探している」
「フロントエンド構築をどうしたらいいか分からない」
「手を付けてみたけどいまいち上手くいかない」
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にご相談ください。
オンラインでのフルリモート開発とチーム参加にも対応しています。
フロントエンドの相談をする！関連リンク
