support preload on font element

Question

Our client got a Lighthouse report on their AEM site, the reports pointed out some performance issues caused by font files(*.woff2) files being loaded slowly, here is the suggested method to fix:

Consider using '<link rel=preload>' to prioritize resources that are currently requested later in page load

However as font files are referenced by css, which is included in clientLib, the OOTB method of including clientLib does not allow us to add "rel=preload" into source code, I am wondering what is the best approach.

I tried adding hard-coded lines to preload font files directly by updating template file, however, the new Lighthouse report pointed out that the preloaded file was not used by the browser.

How to handle the request of adding "preload" to improve performance

Asutosh_Jena_ · Accepted Answer

Hi @rickyaut

I had the similar requirement and implemented the preload on the page component, "headlibs.html" file.

<link rel="preload" href="/etc.clientlibs/brand/clientlibs/clientlib-site/resources/fonts/0078f486-8e52-42c0-ad81-3c8d3d43f48e.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/etc.clientlibs/brand/clientlibs/clientlib-site/resources/fonts/a59168c1-917d-4de9-a244-0316c057c357.woff2" as="font" type="font/woff2" crossorigin="anonymous">

These fonts will be included in the clientlibs as below:

@font-face {
    font-family: "Font Name";
    src: url("../../resources/fonts/0078f486-8e52-42c0-ad81-3c8d3d43f48e.woff2") format("woff2"),
        url("../../resources/fonts/908c4810-64db-4b46-bb8e-823eb41f68c0.woff") format("woff");
    font-display: swap;
}

When the browser will make the calls to load these resource, these fonts will be loaded first and there will not be any flicker in font load as well as it will improve the performance. You can see the impact by running lighthouse report on the website.

Hope it helps!

Thanks!

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded