5 Hacks to Speed Up Your Elementor WordPress Website

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.

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?