aem-guides-wknd icon indicating copy to clipboard operation
aem-guides-wknd copied to clipboard

Don't load font from CSS - but from HTML head to improve LCP

Open keepthebyte opened this issue 2 years ago • 1 comments

Now with Page V3 - that all JS is executed async - this is no longer the long-pole for LCP. Now the font loading within the CSS becomes to long-pole.

This request is slowing down LCP: https://fonts.gstatic.com/s/asar/v7/sZlLdRyI6TBIbkEaDZtQS6A.woff2

This should not be loaded within the CSS - but from the HTML head with preload like the other font we load today

<link rel="preload" href="/etc.clientlibs/wknd/clientlibs/clientlib-site/resources/fonts/wknd-icon-font.ttf" as="font" type="font/ttf" crossorigin/>

keepthebyte avatar Feb 25 '22 19:02 keepthebyte

When its comes to loading fonts used in LCP.. this is the order of possibilities:

3rd Party Host

  • Best
    • Pre-connect via https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link
    • Preload font file in before CSS
  • Better
    • Preload font file in before CSS

Origin Host

  • Best
    • Preload font file in before CSS

keepthebyte avatar May 16 '22 20:05 keepthebyte