Advanced Elementor page speed optimisation: tips to score well on PageSpeed (Core Web Vitals)

Want to make sure that your cool website built on Elementor is also as fast as possible and gets a good Google PageSpeed score? After all, it’s one of the keystones of Googles new Core Web Vitals. I’ve put together a list of tricks that will get you the best improvement in a short time. (This article is a work in progress, STEP 1 is finished, working on next ones – check in later ;)

How to speed up elementor in a few steps:

1. Remove built-in icons (Font Awesome + Elementor icons) + create your own set or use special characters instead of icons

It’s generally a good idea not to overdo it with icons, but it’s even more valid if you use Elementor. If you add just a few icons from various built-in sets, Elementor will load them from Font Awesome library(or multiple), which are quite big. It could be just one (say Font Awesome Brands for social network icons) or multiple files (Regular, Solid). They do make life much easier, but they also slow down your website.

Here’s how to keep using icons, but increase your site load speed:

• Finish your website first – so that you know the final number of icons you’ll need
• go to Fontastic.me and create an account
• create a new icon set and add all required icons (plus throw in some potentially useful ones, or alternatives just in case!)
• Download the icon set (no need to Publish, just go to the Publish tab and download it)
• Go to WP Admin Elementor>Custom Icons and add a new set, upload your file, publish it
• when ready, edit your website as usual and replace all built in icons with your own ones like this:

Need icons for commercial purposes?

There is a good list of various icon sources + their free and paid commercial use limits in websiteplanet.com’s article “18 Websites To Download The Best Free Icons For Commercial Use“.

Even faster icons – Don’t use Icon fonts – replace icons with special characters (no icon set is loaded, fastest option)

Best thing you can do for website speed is not to use any external icon fonts. They are heavy and… they are external. Modern browsers can render so many icons, there’s almost no need for icon fonts. You just need to know where to find the special characters or their code (different codes for HTML, CSS, Java etc).

Check whether a special character exists for the icon you need on alt-codes.net and copy it by clicking on it or a wider selection on HTMLsymbols.xyz or Copy Paste Characters.

Insert this special character, into any text just by pasting it, like this: ☺.

You need to get more creative with CSS if you want to replace say a hamburger menu icon and insert this special character into the before element, like so: (and likely some additional CSS to make it look the way you need it)

Here are some useful codes – how to replace Elementor menu icons (submenu indicator + hamburger menu open/close)

.elementor-nav-menu--indicator-none .elementor-nav-menu .elementor-item.has-submenu .sub-arrow {
    display: inline-block;
}
.elementor-nav-menu--indicator-none .elementor-nav-menu .elementor-item.has-submenu .sub-arrow:before {
    content: "↓" !important;
}

.eicon-menu-bar:before {
    content: "☰";
    font-style: normal;}

.elementor-menu-toggle.elementor-active i:before {
    content: "⊗";

}

…or upload your own SVG icons instead

(note – use SVG carefully, they are a potential security hole)

• find the icon you need on websites like flaticon.com and download it
• upload the file directly in the Elementor icon editing section:

• and just upload the file into your media library as you would an image

Which method is the fastest you ask? The special characters one as it doesn’t involve loading almost anything. But it has it’s limitations of course, there’s no social networs special character icons. It’s a good way to reduce the number of actual icons you load, so the resulting custom icon set file is as small as possible.

☼ GOOD TO KNOW:

• Check whether your theme is loading Font Awesome – in most cases, it’s likely it does, so disable it there too
• Even if you don’t use any Elementor icons on a page, the libraries might still be loaded, so one more step is needed – unload Font Awesome and Elementor Eicons with this snippet in your functions.php:

/* unload Fonnt Awesome*/
add_action( 'elementor/frontend/after_register_styles',function() {
	foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
		wp_deregister_style( 'elementor-icons-fa-' . $style );
	}
}, 20 );

/* Unload Eicons */ 
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 ); 
function remove_default_stylesheet() { 
	wp_deregister_style( 'elementor-icons' ); 
}

soource: Elementor documentation – if above code doesn’t work, check this documentation, they update it if the code changes.

/*Unload eicons for non-admin roles only */ 
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' );
}

OR VERSION 2

/*Unload eicons for non-admin roles only */ 
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_deregister_style( 'elementor-icons' ); 
}

source of the last snippet + many other useful tricks: wpbuildermaster.com.

Alternatively, you can use plugin Code Snippets to run any code only on frontend.

Remove dashicons too

// remove dashicons in frontend to non-admin 
    function wpdocs_dequeue_dashicon() {
        if (current_user_can( 'update_core' )) {
            return;
        }
        wp_deregister_style('dashicons');
    }
    add_action( 'wp_enqueue_scripts', 'wpdocs_dequeue_dashicon' );

source StackExchange

2. Delay loading as many scripts and css as possible until the site is loaded + use a preloader to hide the ugly unformatted site

The Asset Cleanup plugin is a great tool to stop unecessary scripts from loading on specific pages. Not all Elementor (or other plugins / theme) scripts are needed everywhere. Only load ones that actuallly serve a purpose on a given post / page.

But be careful – this is also an easy way to break things… test every step thoroughly, take frequent backups.

Something new came up recently, I’m still testing, but check out this FlyingScripts video, looks pretty good, and so do the author’s other speed related plugins.

3. Ensure you’re using the smallest image size possible for each element + create mobile only widgets with thumbnails

(I’m assuming you are already doing the basics like Lazy Loading all images and optimising them using a plugin or sites like tinypng.com)

The first step is probably obvious to you – don’t use a 1000px wide image in a 300px box. Make sure you have the right thumbnail / image sizes set up (this guide will help you get started) + select the correct ones in Elementor:

But… today, desktop screen sizes are pretty big and you don’t want to use a 300px wide image – it’s going to show pixels. But using a 768px size image will unnecessarily slow down mobile load speed.

What to do? Create a copy of the same widget and make it mobile only + turn off the original widget for mobile. Then give the mobile only widget a smaller image size.

To make it mobile only, go to Advanced > Responsive >

4. Test several speed optimisation / caching plugins or their combination

Many times a different optimisation plugin works better on a different website. Or sometimes a combination of two is best. Keep testing until you find the best results. I have found the best results with:

• Litespeed Cache – seems to be doing wonders to this website recently, definitely worth a try!
• Asset CleanUp – caching, optimisation and also ability to turn scripts or CSS off by post type or individual pages – very powerful! Even more powerful if you buy the PRO version.
• Hummingbird – caching, optimisation, asset management (not by page, but still pretty useful)
• Cache Enabler – simple but efficient, least conflict prone
• WP Supercache – simple yet has more featured and easy to set up
• Autoptimize – reliable, easy to use

5. Ensure you’re using a fast and reliable hosting company

All above steps will be less efficient, if your website is running on a slow host. Actually, sometimes you can optimise the hell out of a website and it won’t matter if your hosting is shit – like generic Bluehost for example. (BTW, the reason why many top results recommend Bluehost isn’t because they are good. But because they pay very good – recurring affiliate rewards). I have migrated my sites from Siteground to WPX hosting in 2020, which is BLAZING FAST at the same cost as Siteground. They also offer free migration from your current hosting including setting up W3 Total Cache and Autoptimize to optimal settings for their servers.

One of my websites – nimblecamper.com was previously ranking around 65/100 on mobile. On WPX hosting it’s ranking 83/100 on mobile (99/100 on desktop) and 90+/100 on posts. That’s the fastest hosting I’ve seen so far + at a very good price – $21 per month for up to 5 domains. Their support is also blazing fast – ticket response within minutes or chat response within seconds. And on top of that, they also run a dog/animal shelter, isn’t that just amazing :). Check out my expanded recommendation of WPX hosting.

6. Don’t use Elementor for everything

Yep, I did just write that. Gutenberg is becoming quite easy to use and has columns / blocks support, covering mostly used types of content. There are also useful Gutenberg extensions from KadenceWP (Free and Pro) or GenerateBlocks from Generatepress. (who btw are also two companies that have some of the fastest and best themes – free and pro – available. Check out my comparison of the fastest WordPress themes).

7. Elementor CSS internal embedding if you use a caching plugin (careful with this one…)

Test this and see if it works for you – it’s a double-edged sword and might not bring you better Google positions, see how it works on your site:

Go to Elementor settings > Advanced > CSS print method > and turn on internal embedding. This will inline the main Elementor CSS file (Frontend.min.css), which results in fewer connections, but increases your DOM size. It’s recommended to keep your critical (inline) CSS below 14Kb and just the Elementor inlined CSS will be around 40Kb.

Test and see which setting brings better results for you. The feedback in the WordPress speed community is that this could be only improving your stats on PageSpeed, but it will actually make mobile loading and UX worse.

When I tested it on this site, the results were not significant enough so I am not using this feature.

Further reading

• this post from Onlinemediamasters.com is choke-full of good advice too.