G

Web Vitalsについて

2020/5/5にアナウンスがありましたが、Web Vitalsというプログラムが始まっています。

Core Web Vitals

先の記事では、Web Vitalsで導入される共通シグナル(Core Web Vitals)として、LCPFIDCLSの3つが紹介されています。

これはユーザーエクスペリエンスの質を測定するためにGoogle主導で進められる取り組みで、ウェブパフォーマンスを意識するエンジニア(ないしはウェブマスター)にとっては今後無視できない指標になっていくんじゃないかなと思います。

では、それぞれの指標を見ていきましょう。

LCP

LCP (Largest Contentful Paint) は以下のように定義されています。

The Largest Contentful Paint (LCP) metric reports the render time of the largest content element visible within the viewport.

ページの中で一番大きい要素がビューポートの中で見えるようになるまでにかかるレンダリングの時間ってことですね。

この値は、初回ロード時に2.5秒以内になるよう設計されることが推奨(GOOD)とされていまして、それを超えると要改善(NEEDS IMPROVEMENT)、4.0秒以上かかると非推奨(POOR)とされています。

FID

FID (First Input Delay) は以下のように定義されています。

FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.

ページに訪れたユーザーが入力を行えるようになるまでの待ち時間のことです。ページ表示されてるのにボタンやリンクが押せないこと(押してるはずなのに処理が走らないこと)ありますよね?あの時間です。

この値は、初回ロード時に100ミリ秒未満になるよう設計されることが推奨(GOOD)とされていまして、それ以上になると要改善(NEEDS IMPROVEMENT)、300ミリ秒以上は非推奨(POOR)とされています。

CLS

CLS (Cumulative Layout Shift) は以下のように定義されています。

CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.

ページが表示されてからレイアウトが変わってしまう変わり具合をスコア化したもので、算出方法はコチラ。なるほど、わからん。という方へ。スクロールしてる途中でいきなり広告読み込まれたりしてレイアウト変わることありますよね?あの度合いです。

この値は、0.1以下になるよう設計されることが推奨(GOOD)とされていまして、それ以上になると要改善(NEEDS IMPROVEMENT)、0.25以上は非推奨(POOR)とされています。

ここまでで指標の概要がつかめました。「じゃあどうやって測るの?」と言うことで、測定方法を以下でご紹介。

拡張機能

これが一番簡単でわかりやすいです。正式版リリースされたのでぜひ。インストールすれば、ページを訪れるだけで自動的にスコア出してくれます。

その他

こんな感じでやりようはイロイロありますが、拡張機能で十分だと思いますね。Lighthouse、Chrome DevTools、Page Speed Insights、Search Consoleでも実装が予定されていますので、今後に期待しましょう。サチコで使えるようになるとウェブマスター的には嬉しいですよね。

所感

UXの軸として、ようやく「表示速度」がスポットライトを浴びそうですね。嬉しい限りです。

あと僕はAMP信者なので、CLSが導入されたことも嬉しいですね。AMPはそもそもCLSが0になるように設計されていますので、Googleとしての強い意志(AMP推し)を感じます。いつになるかわかりませんが、これらの指標がSEOに影響してくるのも時間の問題でしょう。「スコアが良ければプラスの評価が得られる」というよりは「パフォーマンス悪いサイトが順位落ちる」みたいなパッチだと思いますけど。(アナウンスは出てます

やれ5Gだので「読み込み速度を気にしなくて良くなる」とか囁かれてますが、パフォーマンスがSEOに影響しだすと結局相対評価になるので、表示速度最適化へのニーズは引き続き上り調子でしょうね。

そうであって欲しい。

もっと言うと、そういった時代の潮流の後押しを受けて、ソリューションとしての表示速度改善が注目されるようになって欲しいですね。現状、表示速度改善ってLPOの側面で捉えられがらですが、コチラの記事にあるようにユーザージャーニーという考え方のもと、サイト全体でより真摯に向き合っていくべきことだと思っていますし、LazyLoadとかの小手先でこちょこちょうやるパフォーマンス改善ってもう通用しなくなってきているので。

地味で面倒だけど、積み上げていくしかないのです。デカめのサイトでガッツリやってみたいなー。