-
Posts
-
Hi Team and other Enfold users,
High LCP Score? Check your custom fonts
I just wanted to point out an observation with a customers website.I always upload google fonts, converted to Woff2 format to reduce the file size. I then manually add a pre-load tag and @fontface as critical CSS.
However – I used a font on the site below that was only available with extra characters so even when converted was 533kb in size.
This caused the LCP score for the first ALB color section to rocket. Even with Font-Display set to Swap.By changing the font to a smaller alternative (61kb) – The LCP score fell by almost 3 seconds.
The site scores up to 97/100 on web vitals as a result when tested in Chrome Lighthouse.
No problem Rikard,
Some basic instructions to compress fonts with Enfold:
You can use Font Forge to remove unused characters and save as WOFF2Font Forge is open source but they do ask for donations.
I have just reduced the size of the font that was causing the problems from 533kb down to 19kb so I may reinstate it providing it functions correctly.Download Fontforge
https://fontforge.org/en-US/Instructions for producing optimised WOFF2 fonts
https://www.grantojanen.com/videos/pg/optimize-fonts.htmlNote that if you are using a translation plugin or you require translations. Ideally the font needs to contain any symbols / characters required for those languages.
- You must be logged in to reply to this topic.