Finding sites that report layout shifts before content is displayed

Analysis
1

WebPageTest added a counter for the number of layout shifts that happened before FCP (when there was no visible content to actually shift). This will extract the URLs for pages as well as the timing of the first shift relative to FCP and Start Render.

SELECT 
    url,
    JSON_EXTRACT(payload, '$._LayoutShiftsBeforePaint.count') AS NumBeforePaint,
    JSON_EXTRACT(payload, '$._LayoutShifts[0].time') AS FirstShift,
    JSON_EXTRACT(payload, '$._firstContentfulPaint') AS FCP,
    JSON_EXTRACT(payload, '$._render') AS Render
FROM `httparchive.pages.2021_02_01_mobile`
WHERE cast(JSON_EXTRACT(payload, '$._LayoutShiftsBeforePaint.count') as int64) > 0

For the February 2021 mobile crawl, there were 241k sites that reported a layout shift before content painted. Since both metrics are reported by the browser it should not be possible (though technically non-content layout shifts could happen but kind of defeats the spirit of the metric).

Some were quite substantial and showed most of the page shifting before the first frame. i.e. WebPageTest - Visual Comparison

2 Likes
2

That is weird. Do you want to report it as a bug against WPT, browsers, the spec, something else?

3

Already working with the Chrome team on it. Chrome 89 fixed the case where anti-flicker snippets hide the content with opacity:0 so it should change significantly after that is released.

We also found some cases where the page navigation triggers a document reload after a layout shift and WPT was reporting the second FCP instead of the one from the first navigation (that was fixed Friday).

Keeping the query handy here so we can re-run it after the Chrome 89 release is in a full HTTP Archive run (April would be my guess).

1 Like