Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

support preload on font element

rickyaut
Level 2
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
asutosh_jena
Correct answer by
Community Advisor
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
asutosh_jena
Correct answer by
Community Advisor
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