How we passed our Core Web Vitals — CLS — show/hide cookie banner on server

TL:DR We moved the logic to show/hide the cookie banner from the client to the server to reduce CLS on every page.

This was the very first ticket we had incredibly high hopes for. Based on our lab data it was our main source of CLS. (this was a lie, lab data lies, a lot).

The problem

We show the cookie banner on every page to customers who have not dismissed the cookie banner.

We decide whether to hide/show it based on a cookie in the customer’s browser.

Move logic from client to server for initial check

Because we were doing this check client-side the banner appeared at the top of the page moving everything down the page and causing huge CLS issues.

By moving this check to the server we got rid of the CLS.

TODO: Add before/after check gifs.