Useful tool for debugging Cumulative Layout Shifts

Super chuffed to have fixed this issue.

Having watched last nights live stream I thought I would have a go at fixing my performance issues on desktop with Cumulative Layout Shifts. I spent hours playing with the settings for my banner header with no effect. Whatever I did I was scoring 76% on desktop in Page Speed Insights. So I went hunting for a debugging tool and found this one https://webvitals.dev/cls

It was only after seeing the Cumulative Layout Shift Desktop Visualisation section that I realised that my menu bar might be the culprit and not the banner header underneath it as I had been previously thinking.

I used CSS Scan to check the height of the menu bar and then applied a height swatch to the container and bingo! My score went from 76% to 100% in PSI.

4
2 replies