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 😄