Divi’s Visual Builder Is Now Faster Than Ever Before!

Creating The Visual Builder Performance Profiler

In order to test and verify performance improvements, we built a Visual Builder performance profiler that performs different actions within the builder and records how long they take to complete. We used this tool throughout development to identify parts of the builder that were slow, fix them, and then compare the differences. Everything in the builder is faster now, but let me run through a few common actions and let you know just how much we improved them.

Examining The Speed Improvements

Let’s jump right into the stats. After months of work, we ran the profiler on the new version of Divi and compared its speed to the old version of Divi. We used a complex layout to make sure that each action was slow enough to reduce the affect of minor anomalies (that’s why the spreadsheet shows higher numbers than you might have experienced personally). We ran the test three times for each action and then compared the averages. Here are the results

Hover Action Improvements

First off, basic actions like hovering over modules, rows and sections are much faster. The time it takes for buttons to appear when you hover over a module is now twice as fast, so everything feels much snappier as you are moving your mouse around the page.

Adding, Deleting And Duplicating Improvements

Next up we have actions like duplicating, deleting, copying and pasting. In these areas we improved things drastically with speed increases in the range of 500-600%. That’s up to 6x faster.

Adding new elements is faster than before, with the biggest improvements being seen when adding new columns. Deleting elements is also much faster, with speed improvements in the range of 500-600%.

Module Editing Improvements

We also significantly reduced the time it takes to open and close settings pop-ups. The time it takes for the settings pop-up to appear after clicking the gear icon on a text module, for example, is now 630% faster. The time it takes to close the pop-up is 120% faster.

View Mode Switching Improvements

Another place where you will notice a huge speed difference is when switching between view modes and interaction modes. Switching between Hover/Click mode, for example, is between 3-4x faster and switching between different responsive views is between 2-4x faster.

When you add all these things up, they really go a long way. Our goal was to make the entire builder faster without sacrificing anything, and we definitely accomplished that goal.

How We Did It

So, why are things so much faster? Whenever something in the builder appears, disappears or changes, those elements need to be re-rendered in the browser. The speed at which those things re-render comes down to the power of your computer, the speed of your browser, and the efficiency of the application itself. Through lots of small improvements and a few big changes, we were able to speed up those re-renders and reduce unnecessary re-renders. The result is a faster builder.

General Code Refactoring

Over the years, Divi has become bigger and better, but also increasingly complex. The most important thing we did in this feature was embark on the painstaking process of combing through every function and looking for inefficiencies that could be refactored in order to speed up or reduce unnecessary re-renders. We looked at everything and we made a lot of changes. It just came down to thinking of creative ways to re-work the logic of the application and make Divi smarter.

Conditional Rendering In The Visual Builder

We also came up with some creative ways to improve performance inside the Visual Builder. One of those is “conditional rendering.” Using conditional rendering, we only render the part of the builder you are currently seeing within your browser viewport. Beyond that, outside of your view, we are dynamically removing objects that aren’t needed so that they don’t affect performance. That means you won’t experience the same level of performance degradation as your pages get bigger and more complex, at least not to the same extent as before. We did the same thing inside of settings pop-ups. This gives Divi a lot more scalability and more runway for new features.

Reduced File Size & Module Caching

We also found ways to reduce the size of the Visual Builder’s files and implemented new forms of caching for the builder’s CSS output to improve module rendering speeds. Caching duplicate module output helps speed up module duplication, copying and pasting. It also speeds up the adding of new modules.

Updating React & Addressing Compatibility Issues

Finally, we took this opportunity to update React and other dependencies so that Divi could benefit from their inherent performance improvements. React is the foundation that the Visual Builder is built on, so it’s important to stay up to date (kind of like keeping PHP up to date on your website).

These Visual Builder performance upgrades are available today, so download Divi and take them for a spin. Let us know what you think in the comments and don’t forget to check back soon for even more great Divi features coming your way. This is just the first of multiple performance upgrades that we are working on, so stay tuned for more speed improvements in the future