First Paint (FP) をJavaScriptで検出する

目次 はじめに FirstPaintの時間を取得する タイミングを取得する：requestAnimationFrame() タイミングを取得する：PerformanceObserver タイミングを取得する：performance.getEntriesByType('pa...

Cumulative Layout Shift (CLS) をJavaScriptで検出する

はじめに これまで、DevToolsのPerformanceタブからレイアウトシフトを確認していました。ですが、これだと目視する必要がある上に自動化できません。調べてみると、Layout Instability APIが見つかったのでそれの覚書です。 ※PageSpeed Ins...

ウェブに関する主な指標（LCP, FID, CLS）について

2020年5月末に PageSpeed Insights の表示が更新されて「最大コンテンツの描画（LCP）」「初回入力遅延（FID）」「累積レイアウト変更（CLS）」を ウェブに関する主な指標 として表示するようになりました。勉強がてらに他の関連の指標も含めてユーザーエクスペリ...

FID(First Input Delay)とはなにか？

はじめに 次の資料にFID（First Input Delay）の詳しい説明があります。ただし、この資料を読んでも筆者には、FIDが何を意味するのか正確にはわかりませんでした。そこで、記事内で紹介されているpolyfillコードやPageSpeedInsightsの表示するFID...