Did you know popular page builders like Elementor, WPBakery, and Divi come equipped with optimization options right out of the box? Read on to learn how you can maximize these little-known settings.
If possible, it’s always best to optimize your page builder’s theme first. This creates an excellent foundation for other optimization methods, like using performance plugins and a great managed WordPress host.
In this post we’re looking at some simple optimization techniques that can be employed straight from three popular page builders’ admins.
I’ll then give you several tips across the board that will further help optimize your WordPress site for speed and performance.
Here’s exactly what we’ll be covering if you want to skip ahead:
Optimizing Elementor
Optimizing WPBakery
Optimizing Divi
Across the Board Optimization
By the end you’ll have a great understanding of what optimization capabilities are (and aren’t) available for each page builder — and how to implement them!
Kicking things off with Elementor.
Optimizing Elementor
Elementor is no stranger as a page builder.
Elementor is the crowd favorite page builder (over 5+ million users), and it comes with several optimization options you can customize, along with some general tips.
These include:
Using a Lightweight Theme
Optimized DOM Output
Optimizing Asset Loading
Elementor’s Responsive Mode
Let’s take a look at them in more detail.
Hello Elementor, Astra, and OceanWP. All can be found on wp.org.
Hello Elementor is a great choice for a free, lightweight theme.
Whatever lightweight theme you choose, be sure it works well for your WordPress site design and with Elementor in mind.
Optimized DOM Output is an experiment Elementor is doing to improve performance by decreasing the number of wrapper elements in the HTML that Elementor generates.
This was established starting with Elementor 3.0 to boost speed and performance. Removing wrapper elements from the DOM adds to more simplified code output, better readability, and less complexity.
Currently, it’s only available for new sites since it’s in experimental mode.
In the Elementor dashboard, go to Settings>Experiments>Optimized DOM Output. Then select Active from the dropdown menu and Save Changes.
Once you click Active, you’re all set!
Optimized DOM output is an easy way to enhance optimization in one click.
Improved Asset Loading is another experimental feature that Elementor is working with that reduces the amount of JS code loaded on the page by default. Once it’s activated, sections of the infrastructure code will be loaded asynchronously — when needed.
To activate this feature, go to Settings>Experiments>Improved Asset Loading. Select Active from the dropdown and Save Changes.
Elementor is still experimenting with this feature, so it’s subject to change.
Elementor mentions that activating this may cause conflicts with incompatible plugins, so be aware of any issues that you may come across. If you have any, this may be worth deactivating or contact Elementor support. Or, if you’re a WPMU DEV member, our 24-hour support can assist as well.
in this article on Elementor’s website.
To sum it up, here’s a short video that shows you an overview of responsive options in Elementor.
Elementor has also recently made some plans to improve Core Web Vitals. According to their announcement:
“The company has optimized its development cycle and created a five-track plan fixated on specific performance areas such as Optimized Asset Loading, JavaScript/CSS Libraries, Optimized internal JavaScript and CSS, Optimized Backend and Rendering Processes, and more slim code output.
Elementor’s plan ensures that all aspects of performance receive significant improvements, front, and back.”
For additional tips, we published an article, How to Optimize Elementor for Free Using Our Smush and Hummingbird Plugins. Be sure to check it out for really taking your Elementor optimization to a new level.
Optimizing WPBakery
WPBakery is here to cook up some optimization tips.
WPBakery is another popular page builder for WordPress (4.3 + million users isn’t too shabby).
As you’ll see, it doesn’t offer a ton when it comes to optimization right out of the box.
You’ll need to have good hosting and optimization plugins to really enhance your site. However, there are a few things you can do and some tips.
The main option you have is setting up Responsive Options for Columns. As we just went over with Elementor, a responsive WordPress site tends to load faster, so it’s an important optimization element.
WPBakery lets you control columns across numerous devices. This is all done by going to the Responsive Options tab in Settings from any of the columns.
The Responsive Options tab is easy to get to for tweaking settings.
This area will allow you to adjust settings for Column Width and Offset for the default column size, additionally for other devices & screen sizes, too.
You’ll notice there are a lot of options for the width.
To adjust columns for different screen sizes, you can control the Width, Offset, and Visibility settings. Plus, you can Hide columns for specific devices if you don’t want a certain block to appear on a mobile device that has a fixed screen size.
Adjust accordingly so the site response is in your control.
The Device area is for setting different column behaviors for various screen sizes (e.g. desktop, with a screen size larger than 1200px).
Offset represents the amount of space to the edge of the page and can be set for each column.
These little tweaks can make a big difference in your WPBakery optimization when it comes to a responsive WordPress site.
For more about the responsive settings, check out this video:
One other tip about optimizing WPBakery is: If your site is slow, try a different browser.
I know that may sound elementary, however, this may fix the problem. Often, the primary browser may have a lot of cache elements in its memory or extensions that can interfere with WPBakery’s Page Builder functionality.
Be sure to read our article about optimizing WPBakery for free with the help of our Smush and Hummingbird plugins. We created a speed test and show you step by step how to adjust your site for complete optimization — taking our WPBakery site from a grade of a D to an A!
Optimizing Divi
Divi is no stranger.
Last but not least, let’s take a look at optimizing another crowd favorite – Divi.
Along with being an awesome page builder, Divi has quite a few built-in speed performance enhancements that you can make.
We’ll be looking at how to:
Minify and Combine Javascript Files
Minify and Combine CSS Files
Enable Responsive Images
Enable Static CSS File Generator and Output Styles Inline
Check Recommended Server Settings for PHP
As you’ll see, everything is quick and easy to do directly from the Divi admin.
Hummingbird can help minify and cache the entire HTML of a page.
srcset attribute for images element.
You’re one click away from having responsive images.
in this article.
With Divi’s popularity soaring, we have another article that covers the complete optimization of a Divi website with the help of our plugins, Smush and Hummingbird that you can view here.
like we have) provides a more WordPress-centric approach by offering servers explicitly built with WordPress in mind, helping optimize your site.
Remove Unnecessary Plugins: Plugins increase requests and can also cause issues, such as security breaches. Delete any inactive or outdated plugins.
Ensure theme and plugins are Up to Date: Like removing unnecessary plugins, ensure your theme and plugins are all up to date, or they can become a security risk and bog down your site.
Load Scripts in the Footer: This doesn’t decrease requests or file sizes; however, it will make certain essential content is loaded first. Our Hummingbird plugin can take care of this in the Asset Optimization area.
Image Optimization: Image optimization is crucial for speed, and our free Smush plugin can handle image optimization in bulk or individually.
Enable Caching: Caching can be the best method to use because it leads to the most significant improvements. In a nutshell, it saves an HTML copy of a website for a given time, and the next time your site loads, it will load the HTML from memory instead of getting the server to process it. A good caching plugin like Hummingbird can help.
CDN: Content Delivery Network is to place requested resources geographically closer to you so that content is delivered quicker. It’s great to have for improved optimization and speed.
This is just a shortlist. There’s a lot more when it comes to optimization. Be sure to read our article, The Ultimate Mega Guide for Speeding Up WordPress.
