1

I'm working on reducing largest contentful paint for a Beaver Builder/WordPress site. I've had some issues where the Heading text is getting repainted late and causing high LCP scores despite the text being visible and styled almost immediately.

I've tried moving the themes fonts into the head in a <style> tag and I've marked them with important but I don't know if that's doing anything. I have locally hosted Google fonts that are preloaded.

<style>
html, body{
    font-family: Poppins, sans-serif !important;
}
    
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6, 
.fl-heading-text,
input[type="button"], input[type="submit"], [role="button"]{
  font-family: 'Teko', sans-serif !important;
}
</style>

I can see that my theme is loading system fonts in as a font family later that are being overridden via !important however I am wondering if this avoids a repaint?

Hunter Nelson
  • 1,707
  • 3
  • 20
  • 37
  • 2
    !important is entirely orthogonal to repaints. Its only effect would be to stop a particular style change from modifying the cascade result. If the cascade result doesn't change, then there wouldn't be box-tree change, or a re-layout or a repaint. – Alohci Nov 07 '22 at 20:15

1 Answers1

1

!important doesn't avoid a repaint any more that other CSS (except perhaps that it is unlikely to be overridden by later loaded CSSO). Especially this case you are using a web font so say to use a web font ('Poppins' or 'Teko') when they are loaded, and fallback to default san-serif in the meantime.

This article gives more details on how to improve web font loading: https://web.dev/font-best-practices/

Barry Pollard
  • 40,655
  • 7
  • 76
  • 92