CLS (Cumulative Layout Shift) too high on WordPress

How to fix

1. 1

   Specify image dimensions

   html

   <!-- Always define width and height on images -->
   <img src="image.jpg" width="800" height="600" alt="...">
   
   /* Or via CSS with aspect-ratio */
   img {
     aspect-ratio: 4/3;
     width: 100%;
     height: auto;
   }

2. 2

   Reserve space for ads and embeds

   css

   /* Reserve space for a 300×250 ad block */
   .ad-wrapper {
     min-height: 250px;
     width: 300px;
   }

3. 3

   Preload web fonts

   html

   <link rel="preload" href="/fonts/mapolice.woff2" as="font" type="font/woff2" crossorigin>

4. 4

   Avoid CSS animations that modify the layout

   Use transform and opacity for animations rather than width, height, top, left which trigger a layout recalculation.