はい、6月21日、火曜日ですね、時刻は朝9時を回りました。
今日も東京はいい感じの天気で、むしろ昨日よりもどんどん暑くなってきて、もう夏が近づいたという感じですね。
はい、おはようございます。ゆめみのキースことくわはらです。
では本日も朝活を始めていきたいと思います。
えーと、昨日、なんだっけ、アンケートをツイートするって言っておきながら全然できてなくてですね、はい。
あの、まだ送ってないんですけど、ちょっと本当にこの後送ろうと思います。
で、今日読もうと思ってる記事ですけども、タイトルにあるとおり、Web Vitalsっていう、いわゆるパフォーマンス周りの記事ですね。
ちょっと古いんですけど、2020年なんですけど、花火になるというか、僕はちゃんとWebのパフォーマンスとか、計測周りとか全然やったことなかったので、その辺を読んでいこうかなと思います。
で、もう一個は、昨日Twitter見てて流れてきた、IPAが出している情報セキュリティ10大脅威ですね、知っておきたい用語や仕組みっていうところ、
そこを改めて読んで、セキュリティ周りの基礎知識をもう一回復習しようかなと思った次第ですね。
はい、じゃあ早速、前者のWeb Vitalsの方から読んでいきたいかなと思います。
はい、Core Web Vitalsってやつですね。
Core Web Vitalsの測定およびレポートを実施するためのスコアを改善するための推薦事項として、
その辺のWeb Vitals含まれているその他の指標とか進化を続けるWeb Vitalsっていうところを読んでいこうかなと思っています。
はい、じゃあ早速読んでいきたいかなと思います。
ユーザーエクスペリエンス品質の最適化っていうのは、ウェブ上に存在するあらゆるサイトに適応可能な長期的な成功を目指す上での秘訣であるといえます。
Web Vitalsは、ビジネスオーナー、マーケティング担当者、開発者などによる、自身が運営するサイトのユーザー体験の数値化や改善可能なポイントの特定をサポートします。
今から概要に入りますね。
Web Vitalsは、ウェブ上の優れたユーザー、優れたユーザーエクスペリエンスの提供に欠かすことのできない品質シグナルに関する統一的なガイダンスの提供目的としたGoogleによるイニシアチブであります。
Googleではパフォーマンスの測定及びレポートに関し、長年にわたり数多くのツールを提供してきました。
一部の開発者たちは、すでにこれらのツールの使用に精通しているものの、その他のユーザーにとっては、こういった豊富に存在するツールや指標に関する学習を進めていくことは結構難しく感じられてしまうようです。
ユーザーに提供されるエクスペリエンス品質を理解するために、サイトの所有者がサイトパフォーマンスの達人となる必要というのは本来ありません。
ウェブバイタルズのイニシアチブというのは、必要な観点をシンプルに整理し、最も重要な指標であるコアウェブバイタルズへと注力できるようにすることを目標としています。
では早速、コアウェブバイタルズとは何ぞやってどこに入っていきますか。
コアウェブバイタルズとは、すべてのウェブページに適用可能なウェブバイタルズのサブセットのことを指します。
そのすべてのサイト所有者にとって測定する価値のあるもので、Googleが提供するあらゆるツールで採用されています。
コアウェブバイタルズに含まれている各指標は、ユーザーエクスペリエンスに関する特徴的な観点を提供し、フィールドデータの測定が可能であり、ユーザーを中心とした重要な結果に基づくユーザーの体験を反映します。
このフィールドデータというものと、ユーザーを中心としたというところにリンクが貼ってあって、それぞれ別の記事が貼ってますね。
WebDevというサイトなので、Googleの出した記事だと思いますけど、こちらまで読んでいくとちょっと長そうな気がしているので、ちょっと軽く開いてみますね。
それぞれユーザーのユーザーセントリックパフォーマンスメトリクスとかですね、本当に指標とかの話をしてますので、かつこの記事だけで一本またすごく長いので、ここは割愛します。
後ほどこの今読んでいる記事のリンクをツイートしているので、そこからたどっていただけると嬉しいなと思います。
続いていきたいと思いますね。
Core Web Vitalsを構成する指標というのは、時間の経過とともに進化していて、2020年現在のセットというのはユーザーエクスペリエンスが持つ3つの観点、
いわゆる読み込み時間とインタラクティブ性、そして視覚的な安定性に焦点が当てられていて、以下の指標及び各指標の指揮地というのが含まれます。
大きく3つですね。
LCPと言われるものとFIDと言われるものとCLSです。
LCPというのはLargest Contentful Paint、最大視覚コンテンツの表示時間ということですね。
これは読み込みのパフォーマンスを測定するための指標です。
優れたユーザーエクスペリエンスを提供するためには、ページの読み込みが開始されてからのLCPを2.5秒以内にする必要があります。
今2.5秒に下がったんですね。僕の認識は3秒だったんですけど、2020年時点で2.5秒なんですね。
よりパフォーマンスを求められるようになりましたね。
そこがグッドと言われるものですね。
そこでNeeds Improvementですね。
最低でも4秒は必要だよなと言っていて、4秒以上かかるのはすでにそのサイトではプアだと言っていますね。
続いてFIDです。
こっちはFirst Input Delayというやつで、初回入力までの遅延時間ですね。
これはインタラクティブ性を測定するための指標です。
優れたユーザーエクスペリエンスを提供するためには、ページのFIDを100ミリ秒以下にする必要があります。
グッドは100ミリ秒で、Needs Improvementが300ミリ秒です。
それ以上はプアだと言っています。
この辺は分かるかもしれないですね。
入力しているのに0.3秒待たされる。
結構人間としては感覚が遅いと思われると思いますね。
続きまして、ラストですね。
CLSです。
これはCommulative Layout Shiftというやつですね。
これは類席レイアウトシフト数ACというものですね。
視覚的な安定性を測定するための指標です。
優れたユーザーエクスペリエンスを提供するためには、ページのCLSを0.1ミリ秒以下に維持する必要があります。
グッドは0.1ミリ秒で、Needs Improvementが0.25ミリ秒です。
それ以上はプアだということですね。
上記の各指標について、ほぼ全てのユーザーにとって好ましい推奨目標値を確実に達成するために、
モバイルデバイスとデスクトップデバイスに分けた上で、
総ページロード数の75パーセンタイルを敷地として測定しています。
一応さっきのLCPとFIDとCLSですね。
それぞれについてちゃんとWebDevがページを押さえて説明していますので、
この辺も見てもらうと、わりと参考になるんではないかなと思いますね。
Core Web Vitalsへの準期を評価するツールというのは、
上記の3つの指標全てにおいて75パーセンタイルという推奨目標値を達成している場合に、
そのページを合格として判断するように設定されていますというところでした。
これらの推奨事項の根拠となる調査及び方法論に関しては、
Core Web Vitalsの指標の敷地の定義というページも用意されているので、
そこを参照してくださいというところですね。
この記事リンクだらけで、Core Web Vitalsをちゃんとやるためには
そもそも予備知識が大量にいるということはよくわかりました。
続いてCore Web Vitalsの測定及びレポートを実施するためのツールとして入ってきますけど、
GoogleではCore Web Vitalsをあらゆるウェブエクスペリエンスにおける重要な指標として捉えています。
その結果として人気のある全てのGoogle製ツール、これもリンクが貼ってますね。
これらの指標の採用に結構取り組んでいます。
このセクションではCore Web Vitalsをサポートするツールについて詳しく説明していこうかなと思います。
続いてそのツールの説明ですけれども、
Chrome User Experience Reportという記事があります。
これもちゃんと別のリンクを貼ってますね。
これはdevelopers.google.comなので別の記事ですね。
ここにあるものが非特定化された実際のユーザーによる測定データを
Core Web Vitalsの各指標ごとに収集するツールです。
このデータを活用すればサイト所有者はページに手動でアナリティクスツールを設置しなくても
報判数を素早く評価できるようになり、
PageSpeed InsightsやSearch ConsoleのCore Web Vitals Reportなどのツールを
強化することもできるようになりますよと言ってますね。
一応他にもツール2つ載ってて、
Chrome User Experience ReportとPageSpeed Insightsと
Search Consoleですね。
Core Web Vitals Reportといういわゆるレポートだったり
そういうインサイツを使って自分たちのサイトを計測できますよと言ってます。
ちゃんとそれぞれ、LCPもFIDもCLSも測定できるような項目があるよ
ということを示してますね。
もちろんこれらのツールの使い方であったりとか
ユースケースごとに最適なツールの選別に関するガイドラインとか
ガイダンスですね、というものがまた別の記事にもあります。
Web Vitals測定の概要というのがあるので
もし導入しようと思っている方は
そっちの記事のリンクを見てくださいということでした。
続いてGoogle Chrome User Experience Reportというのが提供する
データの活用によってサイトのパフォーマンスを
素早く評価できるようにはなりますが
正確な診断、監視、パフォーマンスの低下に対する
迅速な対応などは実施するために必要となる可能性がある
詳細なページビュー単位のテレメトリーというのは提供されません。
そのためサイトには実際のユーザーを監視する仕組みを
独自に設定しておくことはもちろん強くお勧めしますよ
ということでした。
もちろんサポートはできますけど
これに依存するんじゃなくてというところですね。
監視とかというのは実際このツールではできなさそうなので
これは良い補足ですね。
続いてJavaScriptでCore Web Vitalsを測定するというところですね。
これより具体的な話ですね。
Core Web Vitalsの各指標というのは
標準のWeb APIを使用してJavaScriptで測定することができます。
Core Web Vitalsの各指標を全て測定するためには
Web Vitals JavaScriptライブラリを使用するのが最も簡単です。
Web Vitalsというリポジトリがありますね。
そのリンクが貼っています。
これはGoogle Chromeのオーガニゼーションの中に
入っているリポジトリですね。
JS製なのでこれをインポートしてくださいということでした。
NPMにそのまま公開されているっぽいですね。
このライブラリというのは前述した
全てのGoogle製ツールでレポートされている方法に
完全に一致する方法で各指標を測定することができる
基本的なWeb APIを集めた小さなラッパーですよと言ってますね。
これすごく分かりやすいとかありがたいですね。
このライブラリを使用することによって各指標の測定というのは
単一の関数の呼び出しと同じくらい簡単になります。
詳細な使用方法とかAPIに関するドキュメントというのは
それぞれのリンクがありますので見てくださいと。
このリンクというのがこのWeb Vitalsライブラリの
ReadMeに詳細なものが書いてあるので
その辺を見てくださいということでした。
簡単なソースコードが出てきているんですけど
使い方としては簡単で
Import FromでWeb Vitalsをインポートします。
ちゃんと名前を明示的にインポートします。
名前はGetCLSとGetFIDとGetLCPという
これも完全にメソッドですね。
というのをインポートしてそれぞれについて
実行してもらえればその通知が測定できますよと言ってます。
サンプルコードには関数が1個定義してあって
SendToAnalyticsという関数を定義してますね。
引数としてはメトリックというのを引数に受け取ってます。
そのメトリックはJSONオブジェクトで渡してくださいということですね。
中ではJSON Stringifyしてそれを変数に受け取って
あとはそのナビゲーターとかだったり
なんたらかんたらですね。
あとフェッチだったりとかそして
データを取得したりするよということをしてますね。
その辺の処理ガチャガチャやったものというのを定義して
それをGetCLSとかGetFID、GetLCPというメソッドに
引数として渡してあげて
それを実行するという感じですね。
なのでそれぞれの関数というのは
引数に関数を受け取るという感じですね。
ちょっと口頭で説明でイメージしづらいかもしれないので
これは上段の記事のコードを見てもらうといいなと思います。
続き読んでいきますね。
WebVitalsライブラリを使用して
Core Web Vitalsデータを測定し
Analytics Endpointへと送信するようサイトを構成したら
次のステップはそのデータの集計及びレポートを実施し
推奨指揮値、ページ別訪問数の少なくとも75%を
満たしているかどうかを確認することができます。
一部のアナリティクスプロバイダーには
Core Web Vitalsの各指標のサポート値が
最初から組み込まれていたりしますが
そうでない場合であっても
Core Web Vitalsを各ツール上で測定可能にするための
基本的なカスタム指標機能が備わっているはずです。
その一例として、サイトの所有者が
Google Analyticsを使用して
Core Web Vitalsを測定することができる
Web Vitalsレポートというのがありますよと言っていますね。
これもGitHubリポジトリのリンクが貼っていますね。
これはGoogle Chrome Labsという別のオーガニゼーションですね。
それの中にWeb Vitalsレポートという
リポジトリが入っている感じです。
その他のアナリティクスツールを使用して
Core Web Vitalsを測定する場合のガイダンスについては
Web Vitalsをフィールド測定するためのベストプラクティス
という別の記事があるのでそこを見てくださいということでした。
またWeb Vitals Chrome拡張機能というのもあるらしいですね。
これもリンクが貼ってあって
これはさっき出てきたGoogle Chromeという
オーガニゼーションの中に入っているリポジトリですね。
またこれもChromeのエクステンションで使えるんだと思います。
これを使用すればコードを記述しなくても
Core Web Vitalsの各指標をレポートすることができるようになります。
なのでざっくりやりたい人は
普通にChrome拡張でインポートして
そのまま使ってもらえればということですね。
それをちゃんとソースコードレベルで
ここのメソッドだけにピンポイントでとか