CLS Issue – Astra Theme Header (Fix)

In this post I want to share how I fixed the CLS problem with the header of Astra Theme.
I personally use Astra on many of my websites, including the gaming website five-rp.de

Before the fix

Here in the GTMetrix test you can clearly see that the CLS value is very high (0.43).

And this is what it looked like (here on another website):

The desktop version briefly displayed the mobile header, which resulted in a CLS error.

How to fix the CLS error in Astra

The error occurs when you use optimizations in the caching plugin. In this case in WP Rocket.

Therefore you should turn off optimize CSS display:

After the fix

Ich habe die Funktion „Nicht benutztes CSS entfernen“ ausgeschalten und danach war der Fehler behoben: