Web

Lighthouse user flow API についてのまとめ

投稿日:2021年11月4日 更新日:

1. はじめに

Lighthouse user flows を読んだので、本記事にまとめておきます。

2. Lighthouse user flow API のまとめ

Lighthouse のAPIについての新情報

  • Lighthouseは、新しい user flow API を持っている。
  • これを使えば、コールドキャッシュだけでなくウォームキャッシュを使用した場合のパフォーマンス測定ができる(キャッシュやローカルストレージを最初にクリアさせない)。つまり、実際のユーザーが体験していることをより正確に把握することができる。
  • ソースコード

利用手順

  1. Puppeteerを使用して、ユーザーの動き(ページ遷移やボタン押下など)を記述する。
  2. その動きの中の各ポイントで、Lighthouseの user flow APIを使ってパフォーマンスとベストプラクティスを測定させる(3つの使い方がある)。

Lighthouseの新しいユーザーフローAPIを使用する方法は 3種類ある (モード)

  1. ナビゲーション (navigations)
    • 特定のURLにアクセスして測定を行う。
    • キャッシュを使ったままの測定もできる。
  2. スナップショット (snapshots)
    • ある時点での測定ができる(ページはリロードされない)。
    • Lighthouseのすべての検査がこのモードで実行できるわけではない。
  3. タイムスパン (timespans)
    • Lighthouseの監査をある期間にわたって実行する。
    • ページロード後も測定できる。
    • ページロード時以外に発生するCLSを測定するのに便利。

3. 注意点

  • Google AdSense の「モバイル全画面広告」が表示される可能性があるサイトでは、画面上の要素をプログラムで操作してページ遷移する場合に注意する(画像面の要素を取得する際、エラーにならないように)。

4. おわりに

よりリアルな CWV を計測できると SEOの向上に役立ちますが、この API が役立つのは CLS だけかなと思います。

  • LCP:普通に Lighthouse を使えばよさそう。
  • FID:この値を直接計測することはできなさそう(TBT で代用?)。
  • CLS:Lighthouse だと「セッションが切れるまで」を計測できないので、本API を使った方がよりリアルな計測ができそう。

SEO目的でない純粋な「ページのパフォーマンスとアクセシビリティの計測」で、より力を発揮する API なのではないでしょうか。

追記

本機能は、Chrome 97 で DevTools に取り込まれるようです。

? Record, replay and measure user flows – Chrome Developers

5. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

DokuWiki

DokuWiki のアクセス設定チェックが面白い

目次1. It seems your data directory is not properly secured.2. 対応方法3. 珍しいアクセスチェックの仕組み4. おわりに 1. It see …

Web

ウェブ上の「名前を付けて画像を保存」ができない画像をダウンロードする方法

目次1. 「名前を付けて画像を保存」ができない画像2. この手の画像を保存する方法3. おわりに4. Chrome のデベロッパーツールを使った別の方法(追加:2021-08-04) 1. 「名前を付 …

Web

Material の Icons (アイコン)を導入する手順

2020年8月:Material design icons 側に変更があり、手順が変わってしまったようです。 目次1. はじめに2. Icons の導入手順2-1. Google Web Fonts …

Web Components

Web Components でスタイルシートを再利用する

Constructable Stylesheet Objects の使い方を説明します。

Web Vitals

Web Vitals patterns の Responsive Images を試してみました

Web Vitals patterns に載っている「Responsive Images」を実際に試してみました。