CLS taken into account after hitting back button

[Jose Luis Hernando]

Hi all,

I'm curious if CLS can be accounted for after a user navigates back to a page.

For example:

- User on Page A scrolls down to the middle of the page.

- User hits a link to go to Page B.

- User after reading Page B hits back button to go to Page A.

- Page takes more than 500ms for first paint and page scrolls automatically to previous point (middle of the page).

Would this shift be taken into account for the CrUX report?

Thanks

[Jose Luis Hernando]

For clarification purposes, I mention the 500ms mark because the CLS documentation mentions it as a cut off point after any user interaction. So my assumption is that a "back button" hit would count as that.

Link to documentation

[Michal Mocny]

Actually, we do not consider a cross-document navigation as a user interaction, and so you do not have 500ms during loading to prevent shifts (including back button).  Instead, you have a 0.1 of acceptable total CLS "budget" and should strive to not shift during load at all.

Note: scrolling is not itself considered a layout shift.  Shifts are only related to the content on the page itself, not the viewport.  However, if you scroll below the fold during load, then other shifts which were previously not visible can suddenly become visible and then count towards CLS.

(If this is a same-document navigation (i.e. using history api), or bf-cache restore, things are a bit different... but I suspect your example of loading + automatic scroll restoration suggests this isn't the case here)

--
You received this message because you are subscribed to the Google Groups "Chrome UX Report (Discussions)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chrome-ux-repo...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chrome-ux-report/d7cf317b-1b3d-4950-82b8-09fba36d71bcn%40chromium.org.

[Jose Luis Hernando]

Hi Michal,

Thanks very much for your response. So if I understand your explanation correctly, even if I hit the back button, Page A will be judged as if it's a new load. Hence, if there is content shifting within the new viewport (for example images lazy loading, or articles lazy loading) then this would be counted as layout shift becuase in the new viewport this content actually shifts.

Let me show an example that I think would capture better my question.

- In the screen recording attached Page A (https://www.theguardian.com/international) contains a link to Page B (https://www.theguardian.com/lifeandstyle/2022/jun/03/20-cheap-lifestyle-hacks-to-try-this-summer)
- I go to Page B and soon after I go back to Page A

- Page A loads at the point I left the page and I see the "The Guardian Weekly" subscribe box pushing the content on the page and hence causing a layout shift of 0.147

Would this then be recorded as a CLS of 0.147 for Page A in CrUX?

[Michal Mocny]

On Fri., Jun. 3, 2022, 12:53 Jose Luis Hernando, <jlhern...@gmail.com> wrote:

Hi Michal,

Thanks very much for your response.

You are very welcome!

 

So if I understand your explanation correctly, even if I hit the back button, Page A will be judged as if it's a new load.

Correct.  Actually it's the same as hitting reload or navigating to a new URL.  Note: That's only true if back button actually navigates the page (or restores from bfcache).  It is not true if using the app history API to trigger on-page JavaScript (for now).

 

Hence, if there is content shifting within the new viewport (for example images lazy loading, or articles lazy loading) then this would be counted as layout shift becuase in the new viewport this content actually shifts.

Yes, exactly.  Pages don't stop measuring CLS after scroll, and measure shifts at any viewport position -- even on first load (without scroll restoration) if e.g. the user scrolls down.  Large slow images, or lazy images, or lazy content... all should be "sized" in markup (and/or show a skeleton) to prevent shifts when they are done loading.  There is a 0.1 "allowed" CLS threshold for minor shifts which are difficult to remove completely.

Let me show an example that I think would capture better my question.

- In the screen recording attached Page A (https://www.theguardian.com/international) contains a link to Page B (https://www.theguardian.com/lifeandstyle/2022/jun/03/20-cheap-lifestyle-hacks-to-try-this-summer)
- I go to Page B and soon after I go back to Page A

- Page A loads at the point I left the page and I see the "The Guardian Weekly" subscribe box pushing the content on the page and hence causing a layout shift of 0.147

Would this then be recorded as a CLS of 0.147 for Page A in CrUX?

I just opened that first link locally for the first time, no back/forward buttons used, and just scrolled to the bottom during load: I got 0.11 CLS (just above threshold) on a large desktop screen.

I hit reload on that same page, to test scroll restoration: 0.049 CLS.  Since the page was cached and load was very quick, and the viewport didn't move as much, I saw fewer shifts overall.

Just to be clear: scroll is not considered a shift, including scroll restoration, just the content on the page which had previously been shown in one layout position and then shifted around.