Admit it! Elementor makes your website go slower than if you design your website only with a WordPress theme and the editor blocks.
Want to know how to avoid it?
It’s a fact, Elementor loads many more elements of code than WordPress by default, and each code that has to be executed on your site will make your pages take longer to load completely.
However, there are ways so you can continue using this web design tool without having to offer loading times that prevent your website from navigating smoothly.
In this guide we are going to look at the main techniques for making your website with Elementor load quickly.
Choose a high quality hosting
Although you may find it tiresome to have to read this almost every time we talk about web optimization, it is a reality, and we would be better off if we make sure that our website, our online brand, even our business, works on a quality platform.
Everything else we do to speed up our website will have much less relevance and results if we have our website hosted poorly.
None of the techniques and tricks you’ll see later on will make any difference to the speed of your site if it’s hosted on a mediocre web hosting that doesn’t provide the latest specialized web optimization technologies for WordPress.
We’re going to talk about software versions, caches, optimization tactics, and if your hosting company is not prepared to offer you the latest, everything you try to optimize will be like trying to kill dinosaurs with a spoon, it won’t do any good or almost nothing.
My advice is to host your professional web in a quality hosting like SiteGround, which offers you:
- Optimized state-of-the-art server hardware.
- SSD disks for maximum speed.
- Triple cache system optimized for NginX and Apache.
- Proprietary script and content optimization plugin.
- Free WebP conversion.
- Specific tools for WordPress.
- 24/7 support specialized in WordPress and Elementor.
That said, if you already have your website in a professional hosting, let’s see specific techniques and tricks to accelerate Elementor. If you are not wasting your time.
Always use the latest versions of PHP, MySQL, available memory, etc
The next thing to keep in mind to optimize the load of Elementor is to use versions of the optimized base software for speed and security.
According to Elementor’s specifications the minimums would be the following:
- PHP 7 or higher
- MySQL 5.6 or higher
- 64 MB of available memory for WordPress
However, you should not stop there, because the latest versions of the base software make huge differences in the performance of a website.
Thus, in each new version of PHP, the loading speed is improved.
As you can see in the previous screenshot, each new update of PHP is faster than the previous one, so you should always run the latest stable version of PHP on your server if there are no incompatibility problems with other applications.
WordPress is compatible, and in fact recommends always using the latest stable PHP version (currently 7.4.x), so make sure you can update your server to the latest PHP version at no cost to you.
For example, in SiteGround this is just a click away in the Site Tools.
Once in the Site Tools, you can choose the managed version, in which SiteGround technicians will update the PHP version to the latest versions, or select it manually.
In addition, SiteGround offers optimized versions of PHP, which offer up to 30% faster loading of your pages, which can be activated with one click.
Another important variable is the memory available for WordPress, and although the Elementor website recommends a minimum of 64 MB I recommend you to increase it up to 256 MB.
You can force this memory increase by adding the following line to the wp-config.php file:
define( 'WP_MEMORY_LIMIT', '256M' );Code language: JavaScript (javascript)Here you will depend on the limitations of your hosting company (again), so if you see that there is no appreciable change in the load of Elementor talk to your hosting.
In SiteGround you can increase it up to 768M in shared hosting and much more in cloud hosting.
And, of course, always use the latest secure versions of .
- WordPress
- Theme
- Plugins
Use a fast-loading theme
Next in importance when offering a fast-loading website is the active WordPress theme.
The ideal theme, not just for Elementor, should have some fundamental speed features:
- Low code weight.
- Few database queries.
- Little use of external scripts.
- Modular, that you can choose which features to activate and which not.
There are many themes compatible with Elementor, actually most of them, but some are specially optimized for Elementor, and they are recommended in the official website itself.
Of all of them, the WordPress themes optimized for Elementor and with the fastest loading in all tests are…
Optimize images and videos
It is so easy to add images and videos in Elementor modules to design our pages that sometimes we do not realize that we are overloading our website.
Images and videos are, by far, what they contribute most to the loading of the web pages, and consequently what slows down their speed.
That is why it is especially important to control the amount, but above all the weight of the media we insert in our pages.
Ideally, you should always reduce the weight of images and videos before uploading them to your website, but if you can’t do that you can use some tricks to achieve it.
- Convert your images to WebP, a new generation image format that offers the same quality at lower weight, and you can do it automatically.
- Optimize your images automatically as you upload them to your website with plugins like Smush, TinyPNG or SG Optimizer.
- Optimize the loading of your external videos from YouTube and other lazy loading services.
- Postpone the loading of your images (lazy load).
- Control the images that WordPress generates automatically.
One exercise I always recommend to my students is to compare an optimized image with the same un-optimized image, and they practically never notice any difference between them.
Here is an example, of the following two images, which would you say is the most optimized?
The one on the right weighs less than half as much as the one on the left, 143 Kb versus 303 Kb, and the difference in quality is negligible. Now multiply what it would take to load your pages by reducing the size of all your images – at least – to half their current weight, without losing quality.
Reduces the use of external scripts
This is a universal truth, the more external script code you need to display a web page the longer it will take to load completely. And by external scripts we are referring to such common web codes as .
- Google Maps
- YouTube Videos
- Analytics tracking codes
- Social Networking Streams
For your pages to show the above-mentioned Google map, your latest tweets or analyze your traffic have to connect to the external service through the script or plugin and, after collecting the external data, show it on your pages. The more external scripts that use your pages, the longer they take to load.
The best advice is not to load any script or external resource unless it is strictly necessary for you or your visitors, and by necessary I don’t mean cool or whatever you want to call it, I mean a resource that really adds value to your web content.
And, if you have no choice but to load some external script, because it is essential for your website or your visitors, then apply some WPO technique of lazy loading or preloading external DNS.
Optimizes and reduces the load of fonts and icons
Although it would go in the category of external resources of which I spoke before, the sources are of a special typology, since they are not strictly scripts, but equally at the moment there is a tendency in loading the sources of the themes and plugins from external services, like for example Google Fonts.
The reality is that most of the current themes load their fonts from Google Fonts (and many plugins), and although it is a good tactic to offer nice fonts that can be seen in any browser and client, it is still a load of external resources, which like scripts, generate queries to an external site, and slow down the loading of your pages.
Delay the loading of Google Fonts
To remedy this you can apply very different strategies, and the most painless and safe would be to postpone the loading of the Google Fonts, something you can do with plugins like Autoptimize or SG Optimizer.
Another, more technical, way to address this problem might be to disable Google Fonts and load them locally.
And now, focusing on Elementor in particular, if you do not use them, you can disable fonts that load by default.
Disable Elementor’s Google Fonts
With the following code, added at the end of the functions.php file of the child theme you disable the Google Fonts that Elementor loads:
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );Code language: JavaScript (javascript)Disable Elementor’s Icon Families
You can also disable the icon families that Elementor loads by default.
With this code we will disable the Font Awesome icons:
add_action( 'elementor/frontend/after_register_styles',function() {
foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
wp_deregister_style( 'elementor-icons-fa-' . $style );
}
}, 20 );Code language: PHP (php)And with this one the Icons:
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );
function remove_default_stylesheet() {
wp_deregister_style( 'elementor-icons' );
}Code language: JavaScript (javascript)Minimize all web codes
To display the content of your WordPress website, it converts all the plugin code and theme to display HTML, CSS, and JavaScript, and all this code can be minimized so that it weighs as little as possible.
This minimization technique usually has no negative effect on the display of your pages because it simply removes everything that’s left over in the code (spaces, tabs, orphaned lines, comments).
You can do it easily with plugins like SG Optimizer…
Or also with Autoptimize…
Use cache to create static HTML
Do you remember the concept of Headless WordPress? Well, it’s basically offering your visitors a static version of your content as long as it doesn’t change, and this in WordPress we do with caching systems.
Fortunately we have lots of free plugins to deliver cached content, these are just some of the best…
- SG Optimizer: SiteGround plugin offers 3 cache levels (static, dynamic, Memcached)
- Cache Enabler: Very powerful page cache, makes static disk versions of all your content.
- WP SuperCache: Page cache and disk objects plugin, very easy to use.
Provide static content from a CDN
Another strategy to speed up Elementor’s loading times is to serve all your static resources (images, codes, etc.) from a CDN, a global content delivery network.
What CDNs do is host your static content in the cache of their high-speed servers spread across the planet, thus showing visitors the resource from the server closest to the location from which it connects.
It’s easier than you think, and tremendously effective.
Optimize Elementor DOM output
Since version 3.0, Elementor has a configuration that considerably reduces the loading of elements in the DOM of each page, because it optimizes the amount of elements that are loaded in each page.
To activate this optimization, simply go to the Elementor settings page in the WordPress administration, under Elementor > Settings > Advanced and activate this optimization.
Optimizes other WordPress resources
Once all the above is done you can apply further optimizations to WordPress resources, to load only what is necessary and avoid unnecessary consumption of resources that slow down the loading of your website.
To do this WPO Tweaks plugin, with which you optimize lots of aspects of WordPress just by installing and activating it, without having to configure anything.
Just by activating it you apply the following optimizations:
- GZIP compression.
- Browser cache.
- It eliminates scripts and styles of Dashicons.
- Postpones the loading of JavaScript.
- Removes request strings.
- Disables the REST API.
- Reduces the Heartbeat API range.
- Reduces HTTP headers.
- Disables jQuery Migrate.
- And many more…
Optimize the database
Finally, something that we always forget, and that is to optimize the size and performance of the database that uses WordPress and, logically, Elementor.
The basic techniques for optimizing the database are these:
- Regularly repair the database.
- Delete tables of plugins that are no longer installed.
- Optimize the options table.
Avoid using unnecessary or resource-intensive plugins
I understand that this is difficult to apply, since logic dictates that we only have the plugins we need active, but I take this opportunity to remind you that you must apply the same maxim we talked about at the beginning of this guide of only installing those plugins that are really necessary for the web and our visitors.
My advice is that every time you install a new plugin you should perform a performance check of your website in services such as GTMetrix, to see if it has caused any negative effect on the loading of our pages, in which case the smart thing to do would be to look for an alternative plugin, which does the same thing, but without slowing down the loading of our pages or consuming too many resources from our server.
Well, and so far, I hope these tips will be useful to accelerate Elementary. If you have used some technique or strategy that is not in the guide we will thank you all for sharing it in the comments.
Read this post in Spanish: Más de 10 trucos y técnicas para acelerar una web creada con Elementor
