Did you know that your Elementor website can be fast and score the highest page speed results? This article aims to explain the right approach to speed optimization for Elementor and Elementor Pro plugins.
Introduction
This article presents a way to optimize your Elementor website and squeeze the most out of the speed and performance.
Elementor and its companion Elementor Pro are highly capable website builder plugins allowing you to create websites with complex layouts and functionality.
Creating media-rich content and adding complex layouts to pages like carousels, sliders, parallax, and animations can result in poor performance. More complex pages with lots of HTML elements will get rendered slower in the Browser, not to mention that it also affects the website loading speed.
Also, please note that the steps we are about to take here should be done before adding any kind of caching plugin.
So, let’s begin!
Optimizing Elementor for Speed & Performance
The first thing we need to do is to adjust the Elementor settings to make sure we are getting the most out of the already built-in performance tweaks.
As you might know, every page builder plugin adds a lot of HTML elements for styling the content made with it. When it comes to Elementor, you should be aware that Elementor inserts many <div> elements on the widgets to provide styling features, animations, and more. When there are too many HTML elements on the page, it affects the DOM and browser performance.
Pages with too many HTML elements will definitely become harder for browsers to render and you might even notice the lag in page performance.
Optimize DOM output
To resolve this, Elementor introduced the Optimized DOM Output experiment. This experimental feature will reduce the total number of HTML elements to lower the impact your website might have on the DOM.
You can enable this experimental feature inside Elementor > Settings > Experiments.
Inline your CSS styles
Loading of CSS also affects the website performance, maybe not so much as JavaScript and images. Even if your website is served over an HTTP2 connection, it can still play a significant performance role.
The browser starts rendering the page by opening the index page first. Then it starts parsing the data and once it starts working on the <head> section, it will go thru and download all CSS files called from the head section before it starts rendering the page. Only after it loads and parses all those CSS files, it will continue to the <body> section.
This can cause a significant waiting time until the CSS files are parsed and ready.
CSS is generally considered a render-blocking resource, thus we need to make it inline.
To do so, just access Elementor > Settings > Advanced and set the CSS Print method to Internal Embedding.
This will inline the styles from the Elementor plugin, make sure to regenerate CSS after activating this option. You can do so inside Elementor > Tools > Regenerate CSS & Data.
Google Fonts loading method
If you are using Google Fonts, which is the case for most websites today, you need to make the fonts visible during the website loading. Loading of the Google fonts might take some time, depending on the number of fonts and their subsets.
To fix the problem with font loading time, you need to set the font loading method to “swap” to make the browser render the font placeholder until the font loading is finished.
Leaving fonts loading in the default manner will affect the website performance reports.
To set the Google Font loading method in Elementor, just access Elementor > Settings > Advanced and find the Google Fonts Load option to set it to swap. Like this.
After this step, all Google fonts registered via Elementor will be loaded using the swap method and it will successfully pass the page speed test regarding the well-known warning message “ensure text remains visible during Webfont load”.
Improving Assets loading
In the default setup, Elementor will load all scripts and styles on each page no matter if some of the features are used on that page. For example, even if you are not using a hotspot widget or form, the editor will still enqueue these widgets assets on every page.
As Elementor decided to optimize this workflow, there is a new experimental feature called Improved Asset Loading. This experiment will load website assets dynamically based on their usage per page.
So, head to Elementor > Settings > Experiments and enable Improved Asset Loading.
Improve CSS loading
The same as for the above-mentioned assets loading improvements. There is an experimental feature that will load CSS styles based on the widget usage on-page. I don’t even need to tell you that this feature will make your pages load faster and also score much better results on speed tests.
To use it, access the Experiments page again and make Improved CSS Loading to active.
Inline Font icons
The next step is to optimize the font icons payload by enabling yet another experimental feature – Inline Fonts Icons. This experiment will inline the FontAwesome icons in SVG format instead of loading them via their icon-font files.
After this step, your Elementor settings are ready for Speed and Performance.
Now we can move to the caching setup.
Setting up caching for Elementor and WordPress
Before we begin setting up the caching process we need to mention a few things. The steps we took prior to this will ensure that Elementor is prepared to provide the best performance, but to make the entire website load faster, we need to cache our entire WordPress website.
The caching will include many actions that need to be taken to ensure the best possible speed and performance results.
There are a couple of caching plugins for WordPress that will provide us with all the needed features. We will review them in the next step, below.
The topics we are about to cover here are also related to any other caching plugin and by learning the way caching works, you should be able to achieve great results using any tool or plugin.
How does caching in WordPress work?
Basically, the caching process works in a way of making the web server spend less time and resources to render the page.
PHP caching
As you might know, PHP will execute many actions and create many PHP objects each time we visit a page. The query loops that are run on each page will be executed each time someone visits the page.
On the website will decent traffic, this kind of behavior can generate a notable lag as the server will be spending resources like CPU and RAM on each loading cycle. This is where caching comes in.
So, the caching process needs to create cached results for objects, queries, and requests, so that we don’t render them on each cycle. This will make pages loaded much faster as we are not rendering the data, just passing them from the cached results.
Generating & Compressing HTML from pages
We also need to create HTML pages out of our PHP code. The generated HTML pages are much faster as the PHP will not take any time to render the results. We also need to compress our pages and make them smaller.
CSS & JS Minification
It’s important to optimize the size of your CSS and JavaScript files. All caching plugins are coming with options to minify these files. This will result in smaller files and it’s advisable to utilize the option to remove comments from the files as it will also make them smaller. Every bite counts.
Deferring and Asynchronous loading
One of the useful features of caching plugins is the ability to make certain JavaScripts files load asynchronously or to just wait until user interaction. This will definitely affect the website loading speed and make the page start rendering faster.
DNS Pre-fetching and Preloading
Prefetching DNS requests and preloading important files with significant payload, like custom fonts, for example, can significantly improve website loading time, especially on mobile networks.
Lazy loading
This is a crucial step in overall website speed and performance optimization which allows the loading of images, video, or iframes once the visitor access the image placeholder. The lazy load will load the media files asynchronously and speed up the pages with lots of media files.
Database caching and performance optimization
As you might know, MySQL is not the fastest database around, but it serves its purpose. We can use a caching plugin to cache most used database queries which will save a lot of time when rendering the page.
It’s also a good thing to keep the number of revisions in your WordPress database at a reasonable number.
Web server choice
It’s important to choose the proper web server for your WordPress website. You can choose between Apache, NGINX, and Lightspeed servers as the top solutions available.
I personally recommend NGINX, as it plays well for small and big websites. The true power of NGINX is visible when you hit decent traffic.
Nginx can be set up to act as a proxy for CSS, JS files, and images without them going thru the PHP, which significantly boosts the processing speed and also saves server resources.
HTTP2 protocol
It’s quite important to enable HTTP2 on your server/website. When the HTTP2 is in use, you should not use combine options for CSS and JS files as this protocol handles parallel connections without problems.
Redis cache
Redis caching offers the option to cache WordPress/PHP objects in the server memory, which makes those objects accessible in matters of milliseconds.
Choosing the best caching plugin for your Elementor website
There are many caching plugins for WordPress and many of them are quite capable and mature products.
We are using these caching plugins for all of our projects. They are tested and trustworthy.
WP Rocket
WP Rocket is no doubt one of the most popular, if not the best, caching plugin for WordPress. One of the coolest features of this plugin is that it can be installed and run without spending too much time on setting up everything.
The plugin features all of the above mentioned features regarding the caching in WordPress. It is recommended that you choose options based on your website and server needs.
We are not going to dig deeper into configuration as we have a dedicated article on How to setup WP Rocket for Elementor.
W3 Total cache
One of the oldest and most powerful caching plugins for WordPress. W3 Total cache comes in a free and paid version. Both version are more that capable of providing top-notch caching solution for WordPress.
One of the coolest feature of this plugin are the options to configure and tweak everything. The plugin support many platforms, many additional server caching solutions like Opcode cache, Memcached, Redis and more.
We also have an article on How to setup caching with W3 and Elementor. It’s strongly recommended to see how we set up the options for best performance.
Conclusion
We hope that this article brought you some ideas on how to optimize the Elementor for best performance and also to add caching as a topping.
If you have any questions regarding the optimization or caching, let us know in the comments section below.
Great article, thanks for putting it together. Just wondering you mentioned that there is an article on “How to setup WP Rocket for Elementor”, any chance you can publish this?