Audit: Layout Stability

[ithinkihaveacat]

Content should not move around as resources load (Layout Stability Level 1?), a page is scrolled (Level 2), or the user navigates to a different page, and then hits "back" (Level 3). For example a paragraph of text should not move (relative to the top of the physical screen) as ads appear.

• Content can move in response to user interaction (e.g. user taps on "read more" or "show answer" button). (Scrolling does not count as an interaction.)
• By content "not moving around", I mean that the physical number of pixels from the top of the screen remains the same. It is acceptable for an ad (or an image) to appear in a previous blank (or placeholder-filled) location, as long as it does not move anything else.
• Level 3 includes the case of the user interacting with a page to show more content (e.g. "read more"), tapping a link within the content, and then hitting back. In this case the user should see the "read more" content.

[ithinkihaveacat]

This is related to a few elements on PWA checklist:

• Content doesn't jump as the page loads
• Pressing back from a detail page retains scroll position on the previous list page

[paulirish]

Upstream metric is being implemented and tracked here: https://bugs.chromium.org/p/chromium/issues/detail?id=581518

when ready we'll surface.

[paulirish]

fixed by #9037

http://web.dev/cls measurement shipped in LH 6.0