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.
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?
9 Comments
After 4 days on serfing internet your article helped me. Thanks a lot!
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.
Amazing. Increased my score by 28. Thanks so much.
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!
Can’t seem to get font-awesome to go away still =/
Thanks for the sharing.
But i prefer using code snippet instead adding the code into childtheme.
This blog helped me much more than spending an hour on youtube! Thank you