CSS一行で強制レイアウトが27.3ms→1.8msに — content-visibility実測
同じHTML・同じバイト数なのに、CSSを一行足しただけで強制レイアウトが27.3msから1.8msに縮んだ。400セクションのページを二つ作りChromeトレースで content-visibility: auto の削減量を測り、contain-intrinsic-size と落とし穴まで整理する。
タグ
Core Web Vitals
4件の記事
クリック1回に264ms — 同じ処理を刻んだら56ms、INP実測記
INPは2024年にFIDを置き換えたCore Web Vitalsの応答性指標だ。同じ220msの処理を一気に回す場合とscheduler.yieldで刻む場合をEvent Timing APIで直接測定し、264ms(改善が必要)が56ms(良好)まで落ちる過程をコードとログで詳しく記録した。
ボタンを押す瞬間、画面がずれた — CLS 0.559を0.014まで下げた実測記録
読み込み中にレイアウトがずれるのは好みの問題ではなく、数値で測れる指標だ。同じページを二通り作り、layout-shift PerformanceObserverでCLSを計測。画像サイズの予約とスロット確保だけで0.559(POOR)を0.014(GOOD)まで下げた過程を、コードとログで残す。
ヒーロー画像は117KB、なのにLCPは1.2秒 — ブラウザが画像を「遅れて見つける」理由
LCPが遅いのは画像が重いからではない。ブラウザがその画像を「いつ発見するか」の問題だ。CSS背景画像がプリロードスキャナに見えない現象をChrome DevToolsで実測し、fetchpriority・preload・レンダーブロッキング除去でLCP 1247msを109msまで落とした記録。