Divi 5 marks a major step forward in terms of pace and functionality. Efficiency is a core tenant of Divi 5, no longer within Visible Builder but also in the online front end of the website. Divi 5 is 2 to 4 times ahead of Divi 4!
In the last article I will provide an explanation why and illustrate the variation with some direct comparisons. I’ll also find some tips for developing super-fast web pages with Divi 5.
Find out more about the Divi 5 Public Alpha and the methods to obtain it.
Download Divi 5 Public Alpha
Google’s best mobile PageSpeed ​​ratings out of the box
You can get top Google PageSpeed ​​ratings with Divi 5 out of the box, without any fancy performance plugins. I created two websites using Divi hosting through SiteGround to complete it.
You will need a reputable host with very important options like web page caching, object caching, and a CDN, which is why I selected SiteGround. However, any experienced wordpress host will do.
I built two layouts: a simple layout to get a baseline and a larger one in line with one of Divi’s default designs. Each scored 100 on Cell and Desktop, with the large and easy format besting the largest format by 200ms over First Contentful Paint.
Google simulates a gradual 4G connection when scoring for the cellular network. Desktop ratings are even faster!
What makes Divi 5 so fast?
- A completely new backend framework: We started from scratch and recreated the basics of Divi with a focus on efficiency. The time it takes for your server to process your format and transform your possible design choices directly into a working web page has been reduced by 40-80%, depending on the format.
- Significantly reduced JavaScript size: Divi’s basic JavaScript size has been reduced 276KB the whole way down TO 45KBwhich is the best thing 16KB after GZIP compression. Reducing JavaScript usage also complements browser rendering instances, which is why Divi 5 has an overall block time of 0ms in the tests demonstrated above.
- Lots of micro improvements: We didn’t prevent there. We’ve analyzed Divi’s code base and looked for every single advantage we’ll find. We’ve combined tons of micro improvements to dramatically increase efficiency in more than a few spaces. Loading Visible Builder, navigating wordpress admin, navigating your website online, and saving pages is faster in Divi 5 (to name a couple).
5 Fast Divi Efficiency Pointers
Don’t forget that it’s no longer a question of what equipment you use, but how you use it. You need to use the fastest theme at the fastest host, however, for those who place a single large unoptimized symbol on your hero, it will crash your efficiency ratings. Listed below are a couple of tricks for building Divi websites first that you may no longer have thought of:
- Reduce your use of Google Fonts: Google fonts are render-blocking and loaded from an external source. Using local machine fonts corresponding to Arial and Helvetica can look great and significantly increase your PageSpeed ​​ratings.
- Remove Above The Fold animations: When Google measures the efficiency of your website, it no longer simply measures how long it takes the web page to load. Measure the time it takes for your web page to become interactable. If your FCP Above the Fold part is animated, the dummy extension wastes your client’s time and Google counts it against you.
- Compress your photographs: It’s really easy to accidentally upload a 10 MB symbol for your web page and damage your upload instances. While this has nothing to do with Divi, don’t forget to compress your photos!
- Stay away from YouTube movies: External sources, corresponding to YouTube embeds, are unusually heavy, basically due to the way wordpress creates the embed. Thankfully, Divi 5 caches these embeds! However, if efficiency is a concern, consider putting off YouTube movies.
I implemented these ideas into the layouts used in this post to eliminate confounds, such as additional reaction time when requesting external sources from Google and YouTube, which can be tracked by Divi in ​​the open.
Rating from Divi 4 to Divi 5 in a cache-free atmosphere
How much sooner will Divi 5 be than Divi 4? Let’s run some checks to determine this. Pages do not have to be cached to enjoy true distinction. For these comparisons, I have grown to be out of online website and browser caching and I didn’t use any efficiency plugins. We want to see how Divi responds when forced to fully support his weight!
With caching enabled, identical layouts are loaded up to 50 ms. That’s great, but it definitely defeats the purpose of this test, which is to evaluate the relative difference in Divi’s processing speed.
For example, we will look at server reaction times and web page size.
Easy comparability of formats
Let’s start by evaluating the simple layout I used in the previous PageSpeed ​​test. Divi 5 reduced reaction instances up to 41% and web page size up to 47%.
Divi 4 handles this simple web page well, but Divi 5 is almost twice as fast. The more advanced the web page becomes, the more Divi 5 will surpass Divi 4 in terms of reaction instances.
At the page size input, this simple format shows a noticeable relief in the base page size between Divi 4 and Divi 5. In Divi 5, we have modularized all of Divi’s JavaScript record data to be queued on demand when needed.
Wide comparability of formats
Next, we’ll take a look at the larger layout used in the PageSpeed ​​look from the previous one. Based on this comparability, Divi 5 has reduced reaction cases up to 51% and web page size up to 17%. The relative difference in web page size is much less noticeable here as each size variation includes the same ~800kb in photographs.
On the other hand, you will see that the variation in reaction instances is much more important as the format becomes more advanced. Divi 5’s reaction instances rarely moved.
Large format comparability
We go one step further and push each variation of Divi to its limits with a large format. As part of the following comparison, I imported the touchdown web page format from Divi’s Water None Profit format package, which is already an excessively long format. So, I imported it once again to make the web page twice as long, much longer than any web page you could probably build on a real online website.
In this case, you will see the Divi 4 framework start to fight. However, the server reaction for Divi 5 is slightly changed compared to our previous two checks. With a reaction time 74% reliefDivi 5 as much this format three times before compared to Divi 4.
The size of the web page starts to converge because 90% of the size of the web page in this format comes from its photographs, no longer from Divi.
Also the builder visible a little earlier
Divi 5’s efficiency improvements aren’t limited to the speed of front-end web pages. Everything is faster in Divi 5, especially Visible Builder. Here’s a video where I compared the time it takes to release Visible Builder. Divi 5 is 2-3 times earlier. It’s so instant that the preloader animation didn’t have time to animate!
The larger the format and the slower your host, the more you will notice the variation.
Can you see Divi 5 in motion?
However, we have explained how Divi 5 offers faster performance trying it out for yourself is one of the easiest ways to grasp these adjustments.
Divi 5 continues to be at its Alpha level, so there are bugs and glitches they experience but they need to be discovered and stopped. Please share your comments and report bugs to help us make the overall free level even higher.
The post How fast is Divi 5? The front-end page speed test (3 real examples) gave the first impression on Elegant Themes Blog.
wordpress Maintenance Plans | wordpress hosting
Read more
