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,

This guide will explain all the methods in detailed.

Let’s get started.

How to speed up elementor website
How to Speed Up Elementor Website
How to speed up Elementor website with 3 tips. #wordpress #wordpresstips #wordpressforbeginners #websitespeed

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.

GTMetrix Long

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)

Elementor google font

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.)

Elementor font awesome

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.

Custom Font Awesome Critical Font

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).

elementor eicons

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.

eicons drag load 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.

Affiliate Disclosure – Some blog posts and web pages within this site contain affiliate links, which means I may earn a small commission if you click the link then purchase a product or service from the third party website. For instance, A2Hosting, Astra Pro and Swift Performance affiliate links. Purchasing a product or service from the links does not increase your purchase cost, but it is a great way to say ‘thanks’ to me if you enjoy my content and find my suggestions helpful. Please note that I only recommend products and services that I have personally used or have thoroughly researched. The guidances are based on my personal experience and research. I really appreciate your action of clicking my links to purchase, this is a great motivation for me to keep going.,

Comments

Please feel free to comment below if you have questions, requests or feedbacks from my blogs. I will be glad to hearing your responses and reply to you as sooner as possible.

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

  1. 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 🙂

  2. 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

  3. This post is so incredibly helpful! Is there a way to host font awesome if you’re not using swift performance? Thanks!

  4. 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

Leave a Comment

Your email address will not be published. Required fields are marked *

About Me

Hey, I’m Tyson. I hope the tutorials provided are useful for you. I will keep maintaining the tutorial and producing new and great tutorials time by time. Be sure to subscribe to my newsletter, I will keep you updated. Enjoy the tutorials.
Wordpress Tutorial
Website Speed Optimization
Swift Logo
All-In-One Cache Plugin
Reduce Page Load Time < 1s
Swift PRO Comes With Extra:
Unlimited Image Optimization
Compute API
Server Push
Premium Customer Support
Code: WPBM40 for 40% OFF
Scroll to Top