Elementor [advanced] speed optimization: hacks to score well on PageSpeed (Core Web Vitals)

Click to rate this post!
[Total: 1 Average: 5]

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

Hi, I’m Lukas and I’ve been building websites for 9 years now. I’m an early Elementor adopter and love it since the beginning – it’s the best visual builder for WordPress around. I like nimble tricks and hacks that make life easier, best of which I share on this website.

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:

And here’s how to replace icons with special characters (no icon set is loaded, fastest option)

There are certain icons that have a special character equivalent that every good browser can render. Check whether a special character exists for the icon you need on alt-codes.net and copy it by clicking on it.

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)

…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

/*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' );
}

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

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

…work in progress, check in soon :)

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:

elementor image sizes

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 >

For the Desktop widget, select:

  • bigger image size
  • Hide on Mobile + Hide on Tablet = ON

For the Mobile widget, select:

  • smaller image size
  • Hide on Desktop = ON

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:

  • 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. I have good experience with Siteground – good UI (recently upgraded), fast customer service response time and good speed results for my websites, for example sensimism.com. That’s if you don’t want to pay a bit more – they are probably the fastest out of the budget options.

Further reading

Leave a Reply

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