Blocking frame breakdown
The blocking animation frame behind that interaction: script, forced reflow, style/layout, other (lab).
At a glance the headline numbers for Blocking frame breakdown
The blocking animation frame behind that interaction: script, forced reflow, style/layout, other (lab).
Script accounts for 73ms of the typical blocking frame.
Where the milliseconds go the phases at the median, against the budget
At the median the whole stack uses 79ms, inside the 200ms INP budget. The biggest piece is Script ms at 73ms, 92% of the total. computed
Passing CLS per phase the share of sites passing, by how long each phase takes
Each line is one phase: left = sites where it is quick, right = sites where it drags (buckets, short to long). The steeper the fall, the more that phase decides CLS.
Forced reflow ms falls hardest: from its fastest to its slowest bucket the CLS pass rate drops 4 points, down to 85%. computed
The 2 distributions how each phase spreads across sites - color is the share passing in that range
Script ms stays green across its whole range: it never decides CLS. Script ms turns red in its tail - the failing sites live there. computed
Why this matters for the Core Web Vitals, and where to start fixing it
The long animation frame behind a slow interaction splits into parts. Script time is JavaScript running. Style and layout time is the browser recomputing the page after changes. Forced reflow is the expensive special case: a script writes to the DOM, then reads a layout value back, and the browser must stop mid-script and lay out the page to answer.
The split decides the fix. Script time wants less work or yielding. Style and layout time wants a smaller scope: a smaller DOM, containment. Forced reflow wants reordered code: batch the reads first, then do the writes.
Chrome field data from 189,915 sites, representing millions of real page loads. How we measured.
Live queries (8) — admin only
SELECT COUNT(*) AS count,
quantile_disc(m.inp.loaf.script_ms, 0.10) AS p10,
quantile_disc(m.inp.loaf.script_ms, 0.25) AS p25,
quantile_disc(m.inp.loaf.script_ms, 0.50) AS p50,
quantile_disc(m.inp.loaf.script_ms, 0.75) AS p75,
quantile_disc(m.inp.loaf.script_ms, 0.90) AS p90,
quantile_disc(m.inp.loaf.script_ms, 0.99) AS p99
FROM sites WHERE m.inp.loaf.script_ms IS NOT NULL;SELECT CASE WHEN m.inp.loaf.script_ms >= 0 AND m.inp.loaf.script_ms < 100 THEN 0 WHEN m.inp.loaf.script_ms >= 100 AND m.inp.loaf.script_ms < 200 THEN 1 WHEN m.inp.loaf.script_ms >= 200 AND m.inp.loaf.script_ms < 300 THEN 2 WHEN m.inp.loaf.script_ms >= 300 THEN 3 END AS bucket_idx, COUNT(*) AS n,
quantile_disc(crux."phone".cls, 0.5) AS median,
COUNT(*) FILTER (WHERE crux."phone".cls IS NOT NULL AND crux."phone".cls <= 0.1) * 1.0 / NULLIF(COUNT(*) FILTER (WHERE crux."phone".cls IS NOT NULL), 0) AS good_pct
FROM sites WHERE m.inp.loaf.script_ms IS NOT NULL GROUP BY bucket_idx;SELECT COUNT(*) AS count,
quantile_disc(m.inp.loaf.forced_reflow_ms, 0.10) AS p10,
quantile_disc(m.inp.loaf.forced_reflow_ms, 0.25) AS p25,
quantile_disc(m.inp.loaf.forced_reflow_ms, 0.50) AS p50,
quantile_disc(m.inp.loaf.forced_reflow_ms, 0.75) AS p75,
quantile_disc(m.inp.loaf.forced_reflow_ms, 0.90) AS p90,
quantile_disc(m.inp.loaf.forced_reflow_ms, 0.99) AS p99
FROM sites WHERE m.inp.loaf.forced_reflow_ms IS NOT NULL;SELECT CASE WHEN m.inp.loaf.forced_reflow_ms >= 0 AND m.inp.loaf.forced_reflow_ms < 100 THEN 0 WHEN m.inp.loaf.forced_reflow_ms >= 100 AND m.inp.loaf.forced_reflow_ms < 200 THEN 1 WHEN m.inp.loaf.forced_reflow_ms >= 200 THEN 2 END AS bucket_idx, COUNT(*) AS n,
quantile_disc(crux."phone".cls, 0.5) AS median,
COUNT(*) FILTER (WHERE crux."phone".cls IS NOT NULL AND crux."phone".cls <= 0.1) * 1.0 / NULLIF(COUNT(*) FILTER (WHERE crux."phone".cls IS NOT NULL), 0) AS good_pct
FROM sites WHERE m.inp.loaf.forced_reflow_ms IS NOT NULL GROUP BY bucket_idx;SELECT COUNT(*) AS count,
quantile_disc(m.inp.loaf.style_layout_ms, 0.10) AS p10,
quantile_disc(m.inp.loaf.style_layout_ms, 0.25) AS p25,
quantile_disc(m.inp.loaf.style_layout_ms, 0.50) AS p50,
quantile_disc(m.inp.loaf.style_layout_ms, 0.75) AS p75,
quantile_disc(m.inp.loaf.style_layout_ms, 0.90) AS p90,
quantile_disc(m.inp.loaf.style_layout_ms, 0.99) AS p99
FROM sites WHERE m.inp.loaf.style_layout_ms IS NOT NULL;SELECT CASE WHEN m.inp.loaf.style_layout_ms >= 0 AND m.inp.loaf.style_layout_ms < 100 THEN 0 WHEN m.inp.loaf.style_layout_ms >= 100 THEN 1 END AS bucket_idx, COUNT(*) AS n,
quantile_disc(crux."phone".cls, 0.5) AS median,
COUNT(*) FILTER (WHERE crux."phone".cls IS NOT NULL AND crux."phone".cls <= 0.1) * 1.0 / NULLIF(COUNT(*) FILTER (WHERE crux."phone".cls IS NOT NULL), 0) AS good_pct
FROM sites WHERE m.inp.loaf.style_layout_ms IS NOT NULL GROUP BY bucket_idx;SELECT COUNT(*) AS count,
quantile_disc(m.inp.loaf.other_ms, 0.10) AS p10,
quantile_disc(m.inp.loaf.other_ms, 0.25) AS p25,
quantile_disc(m.inp.loaf.other_ms, 0.50) AS p50,
quantile_disc(m.inp.loaf.other_ms, 0.75) AS p75,
quantile_disc(m.inp.loaf.other_ms, 0.90) AS p90,
quantile_disc(m.inp.loaf.other_ms, 0.99) AS p99
FROM sites WHERE m.inp.loaf.other_ms IS NOT NULL;SELECT CASE WHEN m.inp.loaf.other_ms >= 0 AND m.inp.loaf.other_ms < 100 THEN 0 WHEN m.inp.loaf.other_ms >= 100 THEN 1 END AS bucket_idx, COUNT(*) AS n,
quantile_disc(crux."phone".cls, 0.5) AS median,
COUNT(*) FILTER (WHERE crux."phone".cls IS NOT NULL AND crux."phone".cls <= 0.1) * 1.0 / NULLIF(COUNT(*) FILTER (WHERE crux."phone".cls IS NOT NULL), 0) AS good_pct
FROM sites WHERE m.inp.loaf.other_ms IS NOT NULL GROUP BY bucket_idx;