How To Utilize Page Builders Built-In Optimization Options

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:

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:

Let’s take a look at them in more detail.

Using a Lightweight Theme

Lightweight themes can generate a 50% or more reduction in page load times, in some cases.

This rings true for all of the page builders we’ll be looking at: the lighter the theme, the better.

Some good free choices for Elementor include Hello Elementor, Astra, and OceanWP. All can be found on wp.org.

Whatever lightweight theme you choose, be sure it works well for your WordPress site design and with Elementor in mind.

Optimized DOM Output

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.

Optimized DOM output is an easy way to enhance optimization in one click.

Optimizing Asset Loading

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 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.

Elementor’s Responsive Mode

Responsive designs will normally load faster than mobile-only WordPress sites. Background images in Elementor are automatically device-responsive, however, there are some other great tools at its disposal for control over mobile options.

You can adjust settings for Mobile, Tablet, and Desktop. The most frequently used adjustments are for Text Size, Margin, and Padding of Elements.

To get started, click on the Viewport icon next to any individual element you want to control. Doing this, you then select the specific device you want to edit settings for, which include Desktop, Tablet, or Mobile.

Pick between Desktop, Mobile, and Tablet.

I mentioned that the Background Image in Elementor is automatically device-responsive, but still — you can adjust more options for it.

For example, choose a different image for each device. That can include the same image with different sizes or a completely different image altogether.

The edit background section of Elementor.

Additionally, you can choose Background Image Display Options (e.g. size, position, etc.).

When it comes to Visibility, Show/Hide a Section according to the device by going to Section Setting>Advanced>Responsive. It’s all done with one click!

Choose what devices you want a specific section to show up on.

A few other responsive options include Changing Mobile & Tablet Breakpoints and Columns Ordering. You can see more about these features 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 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.

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.

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

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:

As you’ll see, everything is quick and easy to do directly from the Divi admin.

Minify and Combine Javascript Files

Minifying and combining Javascript files will help speed up your site’s page load.

Minification is the process of removing white space and comments from code, which leads to smaller file size and faster download.

When combining JS is enabled, all the JS files and inline scripts are merged into one single JS file, which reduces the number of HTTP requests on your WordPress site.

Simply put, minifying helps your web browser read files faster.

To set this up, simply go to Themes>General tab.

Once you’re here, you’ll need to scroll down a bit, but you’ll see the option to enable Minify and Combine Javascript Files. Click Enable and then Save.

The minify and combine javascript files area.

Minify and Combine CSS Files

Similar to minifying and combining Javascript files, you can minify and combine CSS files. It’s located in Themes>General tab. This is to help improve your site’s page load time.

Keep in mind that with these minification options, Divi doesn’t minify the HTML output. So, a 3rd party plugin like Hummingbird can help minify and cache the entire HTML of a page.

Enable Responsive Images

In the Themes>General tab, there is also an option for images. By enabling the Responsive Images option, you’ll get responsive image size generated when uploading images and including srcset attribute for images element.

Enable Static CSS File Generator and Output Styles Inline

When Static CSS File Generation is enabled, the builder’s inline CSS styles for every page will be cached and served as static files. By enabling this, you can also enhance your site’s performance.

To enable this, go to Theme Options>Builder>Static CSS File. Just click Enable and Save Changes, and you’ll be in business.

You’ll notice as well that once you enable this feature, the Output Styles Inline option comes up as well. It will automatically be enabled.

This option is there because, with previous versions of the builder, CSS styles for the modules’ design options were output inline in the footer. When enabled, this will restore that behavior.

Static CSS file generation and out styles inline.

If you have any conflicts with 3rd party plugins, try disabling some of these options. If you’re not using any other optimization plugins, you should be in good shape by enabling these to enhance your Divi site.

Check Recommended Server Settings for PHP

Divi has a report that you can access at any time that includes recommended server settings for PHP. PHP is important to have up-to-date to ensure that your site is optimized for performance by leading to fewer memory and CPU-related issues.

To access the report from the Divi admin, click on Support Center. At the top, you’ll see an area that says System Status.

From here, you can see a full report by clicking on the Show Full Report option.

Once you click, you’ll get a full report that covers everything from Display Errors to Memory Limit to Max Input Time and more.

However, for optimization purposes, we’ll focus on PHP. You can see there’s a PHP Version area that shows what version you’re running and if it meets their recommendation.

You can read more about keeping your PHP up to date 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.

Across the Board Optimization

Regardless of what page builder you use, there are some essential boxes to tick when it comes to your site’s optimization. This is pretty consistent amongst all WordPress sites.

So, here’s a quick rundown of several ways to optimize your WordPress site before you start to optimize a page builder.

Good Host: Managed WordPress hosting (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.

Building Complete Optimization

As you can see, a lot can be done to optimize your page builder that’s built into their platforms; whether that be Elementor, WPBakery, or Divi.

Knowing how to optimize your theme first is a good rule of thumb. Once you have your theme optimized, you can begin thinking about other ways of enhancing your site’s performance and adjust accordingly.

No matter what page builder you’re using for your WordPress site, building good optimization starts from the ground up.