Cumulative Layout Shift and cookies popup

Question

I want to improve my google page speed results. I discovered that one of my main problem is Cumulative Layout Shift. I realized that this problem is caused because of cookies and promotion popups.

Do you have any tips how to fix this google page speed problem? I think that delay rendering cookies popup is not a correct and google can check this and mark as a problem.

Answer 1

You can fix this by adding position:fixed to the popup. This will take it out of the document flow and not cause a layout shift. (assuming it is more like a toast that covers the bottom of the screen rather than a dialog box style popup)

You need to ensure that this style is applied inline within the HTML before the popup to stop it moving around once it receives styling.

Alternatively you can make the popup a bar at the top of the page (doesn't have to be position: fixed as it can push the content down), at which point it will render correctly (assuming you inline your CSS).

Added bonus this is where your cookies consent / GDPR compliance should sit within the HTML so that people who use a screen reader on your site can approve before they interact with anything.

Cumulative Layout Shift can be solved by inlining all critical CSS and ensuring that items that load in later have correctly sized placeholders (i.e. images that are to load in later have a placeholder the same height and width so the layout doesn't change when the image loads in)