This guide shows the 3 tips that can speed up Elementor website. This is the extended guide from my complete website speed optimization guide.
So if you,
- Have a slow site of the Elementor website.
- Want to implement the strategies mentioned at Elementor official page guide.
This guide will explain all the methods in detailed.
Let’s get started.



3 Tips to Speed Up Elementor Website
Before starting,
Below is the result of my GTMetrix report for this Elementor website after implementing the tips from my complete website speed optimization and the 3 additional tips listed below. The web hosting I’m using (A2 Hosting) helps a lot in achieving the performance, read my detailed A2 Hosting reviews here.

Tip #1. Don’t load Google Fonts again from Elementor
Elementor will request again the Google Fonts file if you are using it in the design even though you have hosted it locally.
These are the example of Google fonts loaded locally and from an external request (Elementor)

You have to explicitly disable it so that it can use the Google Fonts from local. Before doing this step, please make sure you have hosted all the fonts using in your server (local).
You can call the following code in your snippet script to disable it.
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
Tip #2. Don’t load Font Awesome again
By default, Elementor will call these 2 requests if you are using Font Awesome icons. (Even though if you already have other plugins/theme calling the same Font Awesome requests.)

To implement this tip, you have to only call once for the fonts
You can either load your desired fonts locally or the easier and better method is to use custom Font Awesome (Critical Font) from Swift Performance.
It will not load the whole pack of Font Awesome and only loads those are used in your website, hence a smaller size. It is stored locally on your server.
(IMPORTANT NOTE: Critical Font contains only Font Awesome 4 (FA4). Since the version of Elementor 2.6, it now contains Font Awesome 5 (FA5), but it still supports for FA4. If you use FA5 in your design, you can’t use the Critical Font.)
According to Elementor guide, you need to call the two lines below in your snippet to block the Elementor from requesting.
Prior to Elementor 2.6, the two lines below will work
add_action( 'wp_enqueue_scripts', function() { wp_dequeue_style( 'font-awesome' ); }, 50 );
add_action( 'elementor/frontend/after_enqueue_styles', function () { wp_dequeue_style( 'font-awesome' ); } );
However, if you want it to work also for > Elementor 2.6, you have to enqueue the Font Awesome with your local Font Awesome stylesheet at a higher priority, instead of dequeue it.
Get the file directory of your local Font Awesome stylesheet. The code shows the location of Critical Font by Swift Performance.
add_action( 'wp_enqueue_scripts', 'replace_font_awesome', 3 );
add_action( 'elementor/frontend/after_enqueue_styles', function () { wp_dequeue_style( 'font-awesome' ); } );
function replace_font_awesome() {
wp_enqueue_style( 'font-awesome', 'https://yourdomain.com/wp-content/fonts/swift-performance/fontawesome/webfont.css' );
}
After this, you will only see this request is called for Font Awesome icons to be used in your entire website.

Tip #3. Replace Elementor Icons (Eicons) with Font Awesome Icons
Elementor has created its own set of icon pack and the whole pack will be called whenever an icon is used.
You can check whether your website is calling the Eicons by checking the following requests appear in your Waterfall (GTMetrix).

Since we are using Font Awesome icon pack, you actually can replace the icons used by Eicons with Font Awesome if they are similar.
The main reason why I want to disable Eicons is becayse the Eicons is dragging my fully loaded time.

One commonly used Eicons is the hamburger icon, you probably need this if you are using Elementor Pro to build your website header.
Below are the steps how I block the Eicons and replace its hamburger icon with Font Awesome’s hamburger icon. There are some differences compared to the Elementor official guide in order to make it work also for >Elementor 2.6.
Put these codes in your snippet to block Eicons.
add_action( 'elementor/frontend/after_enqueue_styles', 'js_dequeue_eicons' );
function js_dequeue_eicons() {
// Don't remove it in the backend
if ( is_admin() || current_user_can( 'manage_options' ) ) {
return;
}
wp_dequeue_style( 'elementor-icons' );
}
Put the codes below to replace Eicons with Font Awesome.
Please check what class/id is used by the icon previously by opening dev tool to inspect it.
(Since Elementor 2.6, the hamburger icon class name has changed, you have to use “eicon-menu-bar”. It was “eicon” before Elementor 2.6)
.eicon,
.eicon-menu-bar {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Then assign the new icon content value based on the icons values of Font Awesome.
Below examples are the icons I used to replace the hamburger and close icons.
(You have to extra declare “font-family: FontAwesome” in order to make it works also for >Elementor 2.6)
.elementor-menu-toggle i:before {
content: "\f0c9";
font-family: FontAwesome;
}
.elementor-menu-toggle.elementor-active i:before {
content: "\f00d";
font-family: FontAwesome;
}
Now It Is Your Turn
With these 3 tips, it actually speeds up Elementor website for about 1 second for me.
So, just implement these 3 tips and my other 21 tips, you can fully speed up your Elementor website too.
If you know other tips that work for Elementor website, please let me know.
16 thoughts on “How to Speed Up Elementor Website by Removing Unnecessary HTTP Requests | 3 Actionable Tips (Updated for >Elementor 2.6)”
Hello,
Thank you for your tips. However I tried tip#3 and I still get the eicons called: /plugins/elementor/assets/lib/eicons/fonts/eicons.woff2?4.3.0
I added the snippet into my functions. Please advise. Thank you 🙂
Hi,
It should be removed after you have dequeued it. Please ensure you are not logged in as administrator and viewing it under the inspect network tab. Feel free to let me have a look on your page URL if the problem still exists? Thanks.
Thol,
I can’t get rid of the awesome fonts; could you please have a look?
https://gtmetrix.com/reports/saudepets.com.br/UC4E9bBT
Please tell me how to improve this matter. If you could sent me the codes to add to function.php, will be much appreciated.
Thanks
Bernd
Hi Bernd,
Disabling Font Awesome for >Elementor 2.6 actually is a bit tricky, and I saw that you are probably using Font Awesome 5 which I have not experimented with.
Could you provide me the code you had written to disable the Font Awesome?
Anyway, do you have other Font Awesome source which is loaded locally from your server?
If no, you need another Font Awesome source, because your website is using it, else Elementor won’t request it.
If yes, you can write the following code to see if it works for you. It replaces the Font Awesome from another source. (Change the source URL with your own link)
add_action( 'wp_enqueue_scripts', 'replace_font_awesome', 3 );
add_action( 'elementor/frontend/after_enqueue_styles', function () { wp_dequeue_style( 'font-awesome' ); } );
function replace_font_awesome() {
wp_enqueue_style( 'font-awesome', 'https://yourdomain.com/wp-content/fonts/swift-performance/fontawesome/webfont.css' );
}
Thanks
Hello Thol,
1st of all, your post & the site is GREAT, useful, clear and informative:)
I’ve a question about #tips 1 about google fonts. I’m using Astra with Child theme and elementor pro. So should I add the string into child theme functions.php ?
add_filter( ‘elementor/frontend/print_google_fonts’, ‘__return_false’ );
You’ve mentioned to add it in “snippet script”, but I’m a beginner and not exactly know where is it…..
Great Thanks
Yes. You can add the filter to the child theme’s functions.php as well. Or you can add it to the snippet’s script. What I meant the snippet is a WordPress plugin which allows you to easily add the customized code in your WordPress. This is the snippet plugin which I’m using: https://wordpress.org/plugins/code-snippets/
Cheers
This post is so incredibly helpful! Is there a way to host font awesome if you’re not using swift performance? Thanks!
Hi Randy, I personally haven’t tried other methods to host font awesome locally. But I believe it can, just like you are hosting google font locally similar concept. Thanks.
Hy and thanks for your amazing guide. Big problem with tip #3. If I understand it right (I’m on Elementor Pro 2.8.+) to get rid of eicons I have to add ALL these lines on my functions.php file right?
// disattivare eicons su Elementor ed usare solo Font Awesome
add_action( ‘elementor/frontend/after_enqueue_styles’, ‘js_dequeue_eicons’ );
function js_dequeue_eicons() {
// Don’t remove it in the backend
if ( is_admin() || current_user_can( ‘manage_options’ ) ) {
return;
}
wp_dequeue_style( ‘elementor-icons’ );
}
.eicon,
.eicon-menu-bar {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.elementor-menu-toggle.elementor-active i:before {
content: “\f00d”;
font-family: FontAwesome;
}
.elementor-menu-toggle i:before {
content: “\f0c9”;
font-family: FontAwesome;
}
If I add them I receive this error:
syntax error, unexpected ‘.’, expecting end of file
what can I do please? Thanksssss
I think it has syntax issue at somewhere from your code when you added this code. You have to recheck it. I can’t find the error from this code.
So i was wrong not adding the style part of the icon on my css file.
But what I discover is that to avoid graphic error (icon missing etc) using Font Awesome 5 you have to change the code you wrote about. See guide here (https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements). This code worked for me like a charm:
.elementor-menu-toggle i:before {
font-family: “Font Awesome 5 Free”; font-weight: 900; content: “\f0c9”;
}
.elementor-menu-toggle.elementor-active i:before {
font-family: “Font Awesome 5 Free”; font-weight: 900; content: “\f00d”;
}
Thanks for pointing out. I will check it out. Thanks a lot
The CSS has to into a files called style.css. The functions.php file is only for PHP code.
Yes. You are right. Another way is to put at the theme customizer’s Additional CSS.
Hello,
How to optimize jquery.js in elementor?
You can probably use Swift Performance to do the combination and minification for the scripts. I have a Swift Performance tutorial for the optimization.