Watch on YouTube.
Preloading page assets like fonts is used to prioritize loading of those assets. This is done to reduce Cumulative Layout Shift in PageSpeed.
At the negative side, font preloading delays Largest Contentful Paint (LCP). For this reason avoid preloading custom local fonts in WordPress.
Problems related to preloading local fonts in WordPress:
- Preloading delays Largest Contentful Paint (LCP) metric used in PageSpeed reports.
- Over time website owners switch to other custom fonts and forget to remove previously font preloading setup. Which leads unnecessary font loading even if it is not used on website.
- Font preloading problem is not visible in PageSpeed Insights report.
Solutions explained in current tutorial:
- Do not preload custom local fonts in WordPress at all. Because fonts already loaded with high priority.
- Remove custom fonts completely. (I prefer this solution.)
Font preloading is a mistake that can be easily fixed.
I discovered this problem while analyzing client website that was overoptimized. Because of this they were stuck with unstable and low PageSpeed score.
—
What is next:
- Watch full Elementor PageSpeed optimization tutorial. (design uses custom fonts)
- Additional tutorial to get 100 PageSpeed score. (custom fonts not used)
- More WordPress speed testing tools. In video tutorial I used debugbear tool. Use different tools when PageSpeed insights can’t pinpoint problem with your page.
- Optimize Google Fonts in WordPress.