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

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

関連記事

Web

HTTP の Range ヘッダフィールドを使い、ページの一部分だけを取得する

HTTP/1.1 の Range ヘッダフィールドを使って、ページの一部分のみを取得する実験です。 目次1. Range ヘッダフィールドとは?2. 環境3. 使うツール4. 対象ページ5. 実験6. …

Google App Engine

GAE (PHP 7) で Cloud Firestore を使う手順

Google App Engine で Firestore を使う手順について説明します。

DokuWiki

DokuWiki の Tips

DokuWiki の設定やカスタマイズなどの細かい Tips をここにまとめておきます。 目次きれいな URL にするデザインを変えるファビコンを変更する(ファイル名や拡張子を変更する場合)外部リンク …

Chrome

Chrome 78 の新機能

ome 78 の新機能について簡単に説明します。

Web Components

1つのWebページに複数のHTML要素サンプルを記述する

1つのWebページに複数のHTML要素サンプルを記述する方法を紹介します。