How to Speed Up Elementor Website by Removing Unnecessary HTTP Requests | 3 Actionable Tips (Updated for >Elementor 2.6)

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.

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.