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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Chrome

Chrome 77 デベロッパーツールの新機能

目次1. はじめに2. 主な新機能要素のスタイルをコピーするレイアウトシフト (layouts shifts) を表示する使い方Audits パネルの Lighthouse 5.1[Performan …

SQLite

PHP から SQLite を使う手順

PHP から SQLite を使う手順について説明します。

ICTリテラシー

無料レンタルサーバーとDokuWiki で作る自分用情報サイト

本サイトに パソコン内に自分専用の情報データベースをつくる というページがあります。詳細はリンク先を見て頂くとして、本ページではこれに関連して、「自分専用の情報サイトを作る」ためのオススメの方法につい …

Web

TypeSquare の導入手順

Webフォントサービスである TypeSquare の導入手順について説明しています。

Web Vitals

highlight.js のハイライト処理を Web Workers で実行する

highlight.js のハイライト処理を Web Workers で実行する方法を紹介します。