Reduce FontAwesome Load Time

@jules: Thanks! Appreciated your help. I’m sure other readers have benefited from your input as well. Cheers.

Can anyone tell me how/where to replace the FA code (as described by Jules above)?

Respectfully,
–Ivan

That’s just something you’ll have to track down in your website code. It’s different for different site configurations. Web browser Dev Tools is good for this (F12 in Chrome browser).

All,

For a list of the latest font awesome library links, click below:

URL: https://cdnjs.com/libraries/font-awesome

Currently, we’re using:

URL: https://cdnjs.Cloudflare.com/ajax/libs/font-awesome/5.8.2/css/fontawesome.min.css

Works like a charm.

Cheers!

2 Likes

This is really helpful! Thanks for sharing! Is there any way to apply the font-display rule to this url once its placed in the header?

Jules, I cannot figure out where the second loading code for fontawesome is coming from, I believe it is from elemento. So I put your preload code in the head but I am still loading fontawesome locally: www.ceelanaturals.com

It’s a wordpress site, so probably one of the plugins. If you have a local copy of the site try searching all files.

1 Like

Jules, thank you I was able to generate a local copy and found these files:

\public_html\wp-content\plugins\elementor\assets\lib\eicons\css
\public_html\wp-content\plugins\elementor\assets\lib\font-awesome\css

…elementor\assets\lib\font-awesome\js

the eicons css directory has two files, the font-awesome/css directory has many files

many files in the assets directory:

http://prntscr.com/p4zobi

I presume these are familiar to the cloudflare-font-awesome issue…

Thank you so much for your help.

David

Sorry, David, I wasn’t clear. I meant search the code of all the files to see where each plugin is loading font-awesome from. Then make sure they all match the same exact CDN url version. I recommend cdnjs:

This of course means modifying wordpress plugins - every time they get updated. WordPress sucks =)

Jules, Are you talking about the j scripts? modifying the call or in the css files? I am not a programmer, but if you give me a specific example of a before and after I can follow patterns. David

That is why I suggested searching in the local copy of the site. You can see which plugins are loading FA, find the duplicate, and comment out the javascript on one of them.

Jules, it appears that elementor is calling font-awesome. I still want elementor to use font awesome but I want elementor to call the cloudflare font awesome. If I am misunderstanding that this was not the intent of your post, please advise.

David

I now re read your advise, sorry I though this was specifically addressing the elementor plugin. I see your comment only dealt with the Link command and does nothing to resolve the issue of multiple fontawesome calls from plugins. Best wishes.

Kind souls. Would someone give a working example of this process of finding the FA code and replacing it? for example in the elementor plugin itself?

Well, sorta. You need to go through the code of the plugins and see which ones are loading FA code. Then remove the code from all but one of the plugins.

Jules, this is beyond the ken of mere non-programmers, but if you have done this for elementor successfully I am all ears and would love to see how you did it.

I’ve done this for dozens of sites. We’re getting wwwwaaaayyyyy beyond a cloudflare related issue though. If you’re non-technical, I suggest looking for a WP plugin that looks for duplicate scripts and consolidates for you.