I was doing some testing with a blank website, to determine how much of a hit Elementor makes to the load speed of a website.

When I performed my lighthouse tests, editing a page in Elementor took a simple page from 97 down to 75.  That’s a 22 point drop.

This is, of course, because Elementor has its own set of CSS and JavaScript files which add to load time, but I found a few easy hacks that will let you trim off some of the excess fat (as long as you’re not using them).

You can add these codes to the functions.php file in your theme. (Note: only do this if you have a basic understanding of WordPress themes and/or child themes).

/*--- Remove Google Fonts ---*/
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
/*--- Remove Font Awesome ---*/
add_action( 'elementor/frontend/after_register_styles',function() {
	foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
		wp_deregister_style( 'elementor-icons-fa-' . $style );
	}
}, 20 );
/*---  Remove Eicons:  ---*/
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 ); 
function remove_default_stylesheet() { 
	wp_deregister_style( 'elementor-icons' ); 
}

Adding these codes bumped my score up by about 10 points.

Ensure text remains visible during webfont load

Another thing that Lighthouse will complain about is text being invisible while the web font loads.  Most tutorials assume you’re locally hosting your web font, but in my experience, most people use Google Fonts.

So here’s how to make your Google Fonts load asynchronously…

Add the &display=swap parameter to the end of your Google Fonts URL:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&display=swap" rel="stylesheet">

Turn off Elementor Pro (if you don’t need it)

Elementor Pro is a powerful and very worthwhile plugin, but it you’re creating a fairly simple website that doesn’t use the advanced features, you might as well stick with the basic version.

Fantasy Novel: Badgerblood Awakening book standing on stone floor.

Looking For An Exciting Fantasy Adventure?

Meet your newest fandom.

Why?

Elementor Pro adds about 500kb of extra resources.  Turning that off can improve your page speed and lighthouse score.

Remove Gutenberg CSS Files

If you’re not using the Block Editor, there’s no need to load it’s CSS either.

Add the following code to your functions.php file to remove it.

//Remove Gutenberg Block Library CSS from loading on the frontend
function smartwp_remove_wp_block_library_css(){
 wp_dequeue_style( 'wp-block-library' );
 wp_dequeue_style( 'wp-block-library-theme' );
}
add_action( 'wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css' );

Want more Tips?

How to Speed Up Your WordPress Website This one covers things like choosing a light-weight theme, website caching, disabling unneeded code, and more.

How to Speed Up a Slow Site With Elementor this article contains codes you can use in your functions.php file to disable certain Elementor features.

 

9 Comments
  • Anton says:

    After 4 days on serfing internet your article helped me. Thanks a lot!

  • David Walker says:

    Great article

    You can also use this new filter to add the &display=swap to the elementor custom fonts which improves the lighthouse speed .

    If you disable the google fonts (as you described) and just add the custom fonts you need, plus use the filter below it drastically improves the lighthouse score from my testing

    add_filter( ‘elementor_pro/custom_fonts/font_display’, function( $current_value, $font_family, $data ) {
    return ‘swap’;
    }, 10, 3 );

  • Any Possibility that there are any other scripts that one could enqueue without using the asset cleanup plugin? Thanks

  • Thanks a lot, Saves a ton of time and fantastic thinking, as this is logically SUPER important for website speed, hence it being important for website rankings on Search Engines.

  • Adam Somer says:

    Amazing. Increased my score by 28. Thanks so much.

  • Chris says:

    Thanks, I saved about 2 seconds in speed time with this. I couldn’t figure out how to get rid of this issue. I preloaded it specifically in WPRocket and it actually started breaking my site, this was the best solution!

  • Greg says:

    Can’t seem to get font-awesome to go away still =/

  • Michael Ang says:

    Thanks for the sharing.
    But i prefer using code snippet instead adding the code into childtheme.

  • Fazil says:

    This blog helped me much more than spending an hour on youtube! Thank you

Leave a Reply

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