Elementor is a popular page builder plugin for WordPress. While it makes it easy to design your own pages, it's also easy to build a slow loading website. For user experience and SEO, it's very important to keep your site loading fast. We've been able to achieve nearly perfect scores on tools like PageSpeed Insights and GTMetrix with these tips.
The creators Elementor also provide a lightweight theme called Hello Elementor. You don't need all of the styles and extra features that most themes provide when using a page builder, so Hello Elementor strips this down, giving you a basic theme to build upon.
If you need to make changes to Hello Elementor's default styles, the proper way to do this is using a child theme. Otherwise, updates to the theme will cause your changes to be overwritten.
Making a child theme is simple, but luckily, there's also a premade child theme called Hello Elementor Child. This theme does not add anything extra to your site. It simply provides a blank styles.css and functions.php for you to make changes safely.
If you're building a site with Elementor, we'd recommend using this theme, and writing your own CSS to style any pages that aren't built with Elementor, such as your blog posts, blog index and category pages, or privacy policy. It's a sure way to keep your site from loading too much JavaScript and CSS.
Elementor loads Font Awesome by default, which can be handy for quickly inserting icons into your pages. To keep your pages faster, you can instead download Font Awesome yourself, and upload the SVGs to your site from this pack instead of selecting them in the editor the default way. There are also some great icon packs like Flaticons that will allow you to download individual SVGs.
Icons are often loaded as a font file, which means every single icon in the pack has to be loaded. Whenever you're loading unused assets, it's an easy opportunity to make some optimizations and speed up your pages. By uploading the individual SVGs instead, you're cutting down on the size of files that need to be loaded.
You can prevent the Font Awesome font file from loading using the following code. Just edit your child theme's functions.php file and paste the following snippet.
/*
* Disable Font Awesome
*/
add_action('elementor/frontend/after_register_styles', function() {
foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
wp_deregister_style( 'elementor-icons-fa-' . $style );
}
}, 20);Elementor also includes a font based icon pack called "Eicons". This is used for the icons in the editor, but also is loaded on the frontend even when not used. Paste the following into functions.php to disable it for logged out users. This snippet leaves it enabled for logged in users, so the admin can edit pages without an issue.
/*
* Disable eicons
*/
add_action('elementor/frontend/after_enqueue_styles', function() {
if (!is_user_logged_in()) {
wp_dequeue_style('elementor-icons');
}
});Here are a few plugins you can use to speed up your Elementor based site. You can check out our full guide on WordPress plugins for more details. These are just a few plugins that you can use with any WordPress site for some great speed improvements.
Autoptimize is plugin that combines all of your CSS and JavaScript into single files, rather than forcing the browser to load many smaller JavaScript files. Loading a large number of files always is slower than loading a single larger file due to overhead in HTTP requests. By default, most WordPress sites load a large number of different CSS and JavaScript files, but this plugin will fix that issue.
WP Super Cache will prevent WordPress from having to regenerate pages when nothing has changed. It generates static HTML files that are served to users instead of letting WordPress regenerate the pages with each request. This will significantly speed things up and reduce load on your server.
Elementor does not slow down your site, especially if you follow these simple tips to optimize your WordPress instance. If you'd like some help implementing these changes, then reach out to us. We love optimizing WordPress sites for speed, helping to improving user experience and SEO.
