Update July, 2020: WP Rocket v3.6 recently added this functionality. Here's a tutorial on how to preload Elementor fonts with WP Rocket. While this solution still works, WP Rocket offers more value.

A common problem Elementor users will encounter when it comes to performance optimization is pre loading fonts. Surprisingly, Elementor does not pre load its Font Awesome font files (nor does it have a setting to toggle this on or off), which highly impacts your pagespeed score and loading times.

Properly optimizing icon font families is essential, as they’re large and slow loading. In many cases, preloading Elementor icons and Font Awesome icons would make a major difference in your page speed loading time.

In the above example, preloading both of the Font Awesome fonts that come shipped with Elementor could save up to 5.1 seconds.

This is the typical path of both of the font awesome .woff2 files:

• wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-brands-400.woff2
• wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-solid-900.woff2

When you run your Google PageSpeed report, if you haven't manually optimized Elementor, you will most likely fail the "preload key requests" audit category.

In this category, it will display all of the fonts that are not preloaded. Typically it's the font icons, the Eicons (Elementor default icons), and any custom fonts you may have installed into your website.

There are few ways to fix this. If it's just font awesome icons and you don't use that in your website, you can choose to remove font awesome from your website altogether.

This will seriously speed up your loading time, but in some cases it is impossible because you're using them in your website. Common use cases of Font Awesome icons with Elementor are for social media icons and arrows.

That means your next best option is to preload them.

The official recommendation to preload fonts is to simply add a rel=preload link attribute. It should look something like this:

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>

This explains what preloading does and why it works. https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

In simple terms, preloading fonts allows them to load earlier in the render process, which lets your page load quicker. Here's a good visual that shows what preloading does to fonts.

If you'd like to read more about the mechanics behind this, check out this blog post (it's where we sourced the above graphics from).

Unfortunately, with Elementor and many other fonts this is difficult to do as they are hard coded into the actual plugin. After Googling, many people come to this realization and simply leave the fonts as they are.

Luckily, there's a very simple and easy fix that will allow you to preload fonts in Elementor called Asset Clean Up. This is one of our favorite speed optimization tools, as you can use it for many different things, not just font optimization.

Asset Clean Up allows you to preload fonts by simply adding the URLs to a text field. It will do everything else for you.

The first thing you need to do is identify the URLs of the font(s) that you need to preload. This is fairly simple to do - all you need to do is run a Google PageSpeed report, and it will give you the URLs that you need to address. You can right click on them and copy the link there.

Next you need to open up the asset cleanup plugin and navigate to the “Local Fonts” tab.

This tab gives you a couple options that you can use to preload and optimize local fonts. In our case, all you need to do is paste/enter in the URL's of the font files that you need to preload. For our agency website, we've preloaded all of the Elementor fonts, as well as some custom fonts that we have installed ourselves.

Now, all you need to do is click "update all settings" and run another Google PageSpeed report. The preload key requests audit should now not show as you have resolved the issue.

If you're interested in learning how to optimize your websites speed further, feel free to check out our blog what about performance optimization. If you have a slow Elementor website and need a professional speed optimization service, we offer that through our subsidiary SpeedOpp.com.

Finally, if you want to learn more about Google PageSpeed and how to pass all of the audits, we wrote a book called "How To Boost Your WordPress Website's PageSpeed Score" that is available on Amazon.