0

(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

shop cavaricci

Adam Jasiński
  • 1

1 Answers1

0

In a quick review it looks like the fallback font is smaller than your loaded font "popins".

There are a few options here

  1. use a default system font.

  2. 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">

  3. Set explicit width and heights on your title (not ideal if you are using a CMS)

andrew hutchings
  • 343
  • 1
  • 5
  • 18