Prevent Visual Builders from Bogging Down Your Site

Elementor, WP Bakery, and more can be optimized

One of the main reasons Mr. WPress prefers custom themes is because they’re much less likely to be slowed down by unnecessary code. Visual builders, while certainly handy for ease-of-use and quick changes, come with a plethora of extra code. Every single element or widget must be accounted for, whether a site uses it or not. And that code, even when it’s not called, has an impact. Especially when there are hundreds of elements and potential interactions of visual builder components. We’ve talked before about optimizing website performance, and those tips still apply. This blog is about advice specifically for visual builders.

Don’t Use it When Unnecessary

A common feature among visual builders is the option to simply not use it on certain pages. Tools like Elementor and Avada make you specifically click a button to use the builder, in fact. So, when a page is simple enough (just text, maybe a few images), just don’t use the visual builder! Stick with the standard WordPress editor that’s much more lightweight. The visual builders will still call their code in the background, but it prevents up to hundreds of lines of code creating the wrappers and containers necessary for the visual builder to work. This won’t make your entire site run better, but it can give a boost to individual pages that don’t need to be bogged down. Especially consider this on eCommerce pages like the cart or checkout, where a delay or slow loading experience could cause a lost sale.

Disable Unused Elements

Another feature that’s rising in popularity among visual builders (and especially weighty add ons to those builders) is the ability to turn off elements that aren’t needed. A quick search through the settings may reveal a section that allows you to turn off elements. This will make them unavailable when creating a page, but also prevents them from loading in the first place. Just turning off one or two isn’t a big deal, but if there’s a wide swath of modules that you don’t use, then it may be worth disabling them to shave some precious time off your loading speed.

Unregister or Combine Files

If the visual builder you’re using doesn’t have the option to disable elements, or you want to go for more drastic measures, you can go right to the code itself. This tip is a little more technical, but you can deregister entire scripts called by the visual builder plugin. You then have the option to pick and choose which declarations you want to keep, and put them into a single CSS or JavaScript file with any other code you have (maybe from previous optimizations). Then instead of your site having to make dozens of different calls to different file locations, it can find all the code it needs in one place, which is a huge boon to loading speeds.

This method does come with some extra work down the line, though. Whenever the visual builder is updated, the code you manually put into a separate file won’t be. You’ll have to find a changelog and see if there’s anything new that’s necessary to add, or any changes or potential breaks you’ll need to address. It’s up to you make the judgement call whether this extra work down the line will be worth the boost to loading time.

Pick and Choose Your Fonts

In the trend of visual builders loading more than you may need, they also like to load numerous fonts that you can choose between. One of the worst offenders to load speed, even on sites without visual builders, is Google Fonts. Calls using the Google Fonts API can take literal seconds to go through during busy periods, putting a hit on your load time and user experience. Thankfully, this isn’t the only way to get to these fonts. Google allows you to download the font files, and put them directly on your server. This way, instead of making a call to a third party service, your site only has to look to its own files to load the desired font.

This is especially critical on sites with visual builders, when numerous Google Fonts can be loaded that may not even be used! Each one is different, but you’ll need to find the way to deregister these font scripts in particular, and then serve them locally instead. Font Awesome is another potential offender here, as many visual builders like to use its icons. Consider locally hosting this font family as well to improve your loading time.

Don’t Forget The Usual Site Optimizations

The usual site optimizations still apply to visual builder websites, too! Don’t forget to implement things like:

• Page Caching
• CDN (Content Delivery Network)
• File minification and combination
• Lazy loading

In fact, a strong file combination solution can solve many potential problems, and may make unregistering visual builder scripts unnecessary. There are ways to go about all of these manually, but an optimization plugin like WP Rocket can make it easy to get up and running in a few minutes.

Decide if the Visual Builder is Worth It

At the end of the day, you’ll need to decide if the visual builder is just worth the potential drop in load times. Many people find the accessibility and fine control over their site more valuable than having the fastest site speed on the market.

But if you’re willing to put in some time to learn the more technical sides of WordPress, then it’s hard to beat the benefits of a custom theme. You may have less direct control over the exact layout of every page, but you can go a long way with custom fields and unique templates. Your site will run faster than ever, too, with no extra code from either unused elements or layers of content wrappers.

Need some help optimizing your site, or ready to make the move to a custom theme? Don’t hesitate to reach out to us at Mr. WPress for a free quote! We’d be delighted to help turn your website dreams into reality.