Cumulative layout shift on GOV.UK

[andysellick]

Our SpeedCurve metrics have recently (since May 25th 2023) reported an increase in the Cumulative Layout Shift (CLS) on GOV.UK, which seems to be mainly to do with the cookie banner being displayed. This is most noticeable on mobile devices.

Brief investigation suggests this is not to do with any recent changes to the cookie banner (even though it was recently modified to more closely follow the Design System component) but rather a change in how SpeedCurve measures CLS. Basically, it's always been this way, we just have better reporting now.

SpeedCurve is currently reporting a CLS score of 0.6771. Some data:

• reporting from 27th May 2023
• reporting from 4th June 2023
• comparison between 24th and 25th May

This shift is recorded at two points. Firstly when the cookie banner appears:

The second shift occurs as shown below. I'm not 100% sure what this shift is, it seems to be incredibly small, but it adds 0.0224 to the overall score.

There's also a shift that occurs between the default font and Transport loading (note the line break inserted in government services). This might be the one above - it probably varies depending on screen width.

Previous work

There has been some previous detailing of this problem as well as some past investigation into possible solutions.

For reference, the Design System website uses an inline script to determine fairly quickly on page load whether the cookie banner should be shown or not, which may be another option to consider. Note that the DS does not provide JS for a cookie banner, only the HTML and CSS.

Brief code dive

Running a lighthouse audit on a locally running GOV.UK homepage gives a CLS score of 0.285.

Possible optimisation... moving the call to this.showCookieMessage from line 40 to before the call to this.setupCookieMessage on line 17 gets straight to showing/hiding the cookie banner ahead of showing/hiding the contents of the cookie banner (which we do so that the buttons get shown when JS is enabled but hidden when JS is not). This is basically switching one kind of CLS for another but it reduces the score to 0.272 so might be worth further investigation. I don't know why the display of these buttons isn't controlled through CSS by the js-enabled class, but presumably there's a reason.

Thanks to @36degrees for bringing this to our attention.