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 it’s own set of CSS and javascript files which add to load time, but I found a few easy hack that will let you trim off some of the excess fat (as long as you’re not using them).

/*--- 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 got generally bumped my score up by about 10 points.

Ensure text remains visible during webfont load

Another things 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" 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.

Why?

Elementor Pro adds about 500kb of extra resources.  Turning that off can improve your 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.

 

No Comments

Leave a Reply

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