Layout shifts

These cards are in the Design tab. Hover a row to outline its element on the page, and click it to select it, which fills the Element tab.

Layout shifts lists every time something on the page jumped without being asked to: a late banner pushing the text down, an image with no size, a font swapping in. It shows the page's Cumulative Layout Shift (CLS), the measure Google uses for it, rated good up to 0.1 and poor above 0.25.

• Shifts from loading the page are listed too, even when you turn Nitpique on afterwards. New ones are added as they happen, while scrolling for instance.
• Each row says when it happened, what moved most (and how many others moved with it), how far and its score. The rows that make up the score are in bold: CLS is the worst burst of shifts, not the total.
• Hover a row to see the shift on the page: where the element was, dashed, and where it went, in red, with an arrow between. Click it to select the element. Show all draws every shift at once.
• Shifts within half a second of a click or a key are expected, so they are crossed out and not counted.
• Under what moved, the likely cause when one shows: Image without a size above (an image above it with no width and height, or aspect ratio, had just loaded), Content added above (an element was added above it just before, which Nitpique sees only while it is on), or Web font swap (a font file had just loaded).
• The replay button at the start of a row plays the shift again on the page: the box moves from where it was to where it went, twice. The page itself is not touched.

Largest paint and interaction#

Below the shifts, Largest paint is the page's Largest Contentful Paint (LCP): when the largest text or image in view was painted, from the start of loading, rated good up to 2.5 s and poor above 4 s. Interaction is Interaction to Next Paint (INP): how long the page took to show a response to a click, tap or key, the slowest of them (one in fifty is left out on busy pages), rated good up to 200 ms and poor above 500 ms. It fills in as you use the page; press Refresh to read it again. Hover either to outline its element.

Interactions from before Nitpique was turned on count only when they were slow, about 100 ms or more, as those are the ones the browser keeps.