Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

support preload on font element

Avatar

Level 2

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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! 

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

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!