'Why h2 get CLS > 100 - h2 is on category page Prestashop
(mobile page) CLS checker for chrome and metrics show bad element h2 on category page? Why? I know how CLS works, but in this case I have no idea why I have CLS so high. The bad result is also visible in the GSC
Solution 1:[1]
In a quick review it looks like the fallback font is smaller than your loaded font "popins".
There are a few options here
use a default system font.
Change how the font gets loaded this will require a little reading, and being prestashop it probably wont be easy. See this article on css tricks https://css-tricks.com/the-best-font-loading-strategies-and-how-to-execute-them/
- Set the font-display property in css
- add a pre-load meta tag to the head of your page for each font file you will use, be careful not to load the same font twice in different formats. (see https://3perf.com/blog/link-rels/ for more info) e.g
<link rel="preload" href="https://fonts.gstatic.com/s/poppins/v19/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2">
Set explicit width and heights on your title (not ideal if you are using a CMS)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | andrew hutchings |