Divi 5 marks a significant leap forward in terms of speed and performance. Performance is a core tenant of Divi 5, not only in the Visual Builder but also on the website front-end. Divi 5 is two to four times faster than Divi 4!
In today’s post, I’ll explain why and illustrate the difference with some direct comparisons. I’ll also give you some tips for creating super-fast websites with Divi 5.
Learn more about the Divi 5 Public Alpha and how to download it. 👇
Perfect Mobile Google PageSpeed Scores Out Of The Box
It’s possible to achieve perfect Google PageSpeed scores with Divi 5 out of the box, without fancy performance plugins. I built two test sites using Divi Hosting by SiteGround to prove it.
You’ll need a decent host with essential features such as page caching, object caching, and a CDN, which is why I chose SiteGround. But pretty much any seasoned WordPress host will do.
I built two layouts: one simple layout to get a baseline and a larger one based on one of Divi’s premade designs. Both scored 100 on Mobile and Desktop, with the super simple layout edging out the larger layout by 200ms in terms of First Contentful Paint.
Google simulates a slow 4G connection when scoring for mobile. The Desktop scores are even faster!
What Makes Divi 5 So Fast?
- A Completely New Backend Framework: We started over and recreated Divi’s foundation with a focus on performance. The time it takes for your server to process your layout and turn your design choices into a functioning page has been reduced by 40-80%, depending on the layout.
- Significantly Reduced JavaScript Size: Divi’s baseline JavaScript size has been reduced from 276kb all the way down to 45kb, which is only 16kb after GZIP compression. Reducing JavaScript usage also enhances browser rendering times, which is why Divi 5 has 0ms Total Blocking Time in the tests shown above.
- Hundreds of Micro Improvements: We didn’t stop there. We scoured Divi’s codebase and looked for every edge we could find. We combined hundreds of micro improvements to boost performance in various areas significantly. Loading the Visual Builder, navigating the WordPress admin, browsing your website, and saving pages is faster in Divi 5 (to name a few).
Five Quick Divi Performance Tips
Don’t forget that it’s not just about what tools you use but how you use them. You could be running the fastest theme on the fastest host, but if you place a single giant unoptimized image in your hero, it will send your performance scores crashing. Here are a few tips to build faster Divi sites that you might not have considered:
- Reduce Google Fonts Usage: Google Fonts are render-blocking and loaded from an external source. Using native system fonts such as Arial and Helvetica can look great and improve your PageSpeed scores significantly.
- Remove Animations Above The Fold: When Google measures your site’s performance, it’s not just measuring how long the page takes to load. It measures how long it takes for your page to become interactable. If your FCP element above the fold is animated, the artificial delay wastes your visitor’s time, and Google counts it against you.
- Compress Your Images: It’s so easy to accidentally add a 10mb image to your page and destroy your loading times. While this has nothing to do with Divi, don’t forget to compress your images!
- Avoid YouTube Videos: External resources, such as YouTube embeds, are surprisingly heavy, mainly due to how WordPress builds the embed. Luckily, Divi 5 caches these embeds! But, if performance is a priority, consider removing YouTube videos.
I applied these concepts to the layouts used in this post to remove confounders, such as the added response time when requesting external resources from Google and YouTube, which are outside Divi’s control.
Comparing Divi 4 to Divi 5 In An Uncached Environment
How much faster is Divi 5 than Divi 4? Let’s run some tests to find out. The pages mustn’t be cached to experience the true difference. For these comparisons, I turned off website and browser caching and didn’t use any performance plugins. We want to see how Divi responds when forced to carry its weight in full!
With caching enabled, these same layouts load in as little as 50ms. That’s amazing, but it defeats the purpose of this test, which is to assess the relative difference in Divi’s processing speed.
To illustrate the improvement, we’ll compare server response times and page size.
Simple Layout Comparison
Let’s start by comparing the simple layout I used in the PageSpeed test earlier. Divi 5 reduced response times by 41%Â and page size by 47%.
Divi 4 handles this simple page nicely, but Divi 5 is almost twice as fast. The more complex the page becomes, the more Divi 5 will outshine Divi 4 regarding response times.
On the page size front, this simple layout illustrates a considerable reduction in baseline page size between Divi 4 and Divi 5. In Divi 5, we modularized all of Divi’s JavaScript files to be enqueued on demand only when needed.
Large Layout Comparison
Next, we’ll test the larger layout used in the PageSpeed test from earlier. In this comparison, Divi 5 reduced response times by 51%Â and page size by 17%. The relative difference in page size is less noticeable here since both layout versions contain the same ~800kb in images.
However, you can see the difference in response times is even more significant as the layout becomes more complex. Divi 5 response times hardly budged.
Massive Layout Comparison
Let’s step things up a notch and push both versions of Divi to their limits with a massive layout. In the following comparison, I imported the landing page layout from Divi’s Water None Profit layout pack, which is already a very long layout. Then, I imported it again to make the page twice as long, much longer than any page you would likely build on an actual website.
In this example, you can see Divi 4’s framework begin to struggle. On the other hand, server response for Divi 5 barely changed compared to our previous two tests. With a response time reduction of 74%, Divi 5 loads this layout three times faster than Divi 4.
Page size begins to converge because 90% of the page size in this layout comes from its images, not from Divi.
The Visual Builder Loads Faster, Too
Divi 5’s performance improvements are not limited to front-end page speeds. Everything is faster in Divi 5, especially the Visual Builder. Here is a video where I compared how long it takes to launch the Visual Builder. Divi 5 is 2-3x faster. It’s so fast that the preloader animation didn’t have time to animate!
The larger the layout and the slower your host, the more you’ll notice the difference.
Ready To See Divi 5 In Action?
We’ve covered how Divi 5 delivers faster performance, but trying it yourself is the best way to understand these changes.
Divi 5 is still in its Alpha stage, which means there are bugs and performance issues that have yet to be discovered and fixed. Please share your feedback and report bugs to help us make the final release even better.
The post How Fast Is Divi 5? Testing Front End Page Speed (3 Real Examples) appeared first on Elegant Themes Blog.
# Evaluating the Speed of Divi 5: A Performance Analysis with Three Real-World Examples
In the world of website design and development, speed is a critical factor that can significantly impact user experience, search engine rankings, and overall site performance. Divi 5, the latest iteration of the popular WordPress theme and page builder by Elegant Themes, promises enhanced speed and performance features. This article will delve into the performance of Divi 5, evaluating its speed through three real-world examples to provide insights into its capabilities and optimizations.
## Understanding Divi 5
Divi 5 is a powerful WordPress theme that combines a visual page builder with a wide array of design options. It is known for its flexibility, allowing users to create stunning websites without needing extensive coding knowledge. With the release of Divi 5, Elegant Themes has focused on improving loading times, optimizing code, and enhancing overall performance.
## Why Speed Matters
Website speed is crucial for several reasons:
1. **User Experience**: A faster website leads to a better user experience, reducing bounce rates and increasing engagement.
2. **SEO Rankings**: Search engines like Google consider page speed as a ranking factor. Faster sites tend to rank higher in search results.
3. **Conversion Rates**: Studies show that even a one-second delay in page load time can lead to a significant drop in conversions.
## Performance Analysis Methodology
To evaluate the speed of Divi 5, we conducted tests on three different websites built using this theme. Each site serves a unique purpose and audience, providing a comprehensive overview of Divi 5’s performance across various scenarios. We used tools like Google PageSpeed Insights, GTmetrix, and WebPageTest to measure loading times, performance scores, and other relevant metrics.
### Example 1: E-Commerce Site
**Website**: A small online store selling handmade crafts.
**Performance Metrics**:
– **Load Time**: 2.3 seconds
– **PageSpeed Score**: 85/100
– **GTmetrix Grade**: A (90%)
**Analysis**: The e-commerce site benefited from Divi 5’s optimized code and lightweight design elements. The use of caching plugins and image optimization further enhanced performance. The site’s load time of 2.3 seconds is impressive for an e-commerce platform, where speed is crucial for retaining customers.
### Example 2: Portfolio Website
**Website**: A personal portfolio showcasing a graphic designer’s work.
**Performance Metrics**:
– **Load Time**: 1.8 seconds
– **PageSpeed Score**: 90/100
– **GTmetrix Grade**: A (92%)
**Analysis**: The portfolio site demonstrated exceptional speed, largely due to Divi 5’s streamlined layout and minimalistic design. The designer utilized lazy loading for images, which significantly reduced initial load times. The combination of Divi 5’s features and best practices in web design resulted in a highly responsive site that impressed users and potential clients alike.
### Example 3: Blog Site
**Website**: A personal blog focused on travel and lifestyle.
**Performance Metrics**:
– **Load Time**: 2.5 seconds
– **PageSpeed Score**: 82/100
– **GTmetrix Grade**: B (85%)
**Analysis**: The blog site experienced slightly slower load times compared to the other examples, primarily due to the use of high-resolution images and multiple plugins. While Divi 5 provides tools for optimization, the site owner needed to implement additional strategies, such as further image compression and reducing the number of active plugins, to enhance performance. Nevertheless, a load time of 2.5 seconds is still within an acceptable range for a content-driven site.
## Conclusion
Divi 5 has made significant strides in improving website speed and performance, as evidenced by the real-world examples analyzed in this article. Each site showcased different strengths and weaknesses, highlighting the importance of optimization practices alongside the theme’s capabilities.
For users considering Divi 5, it is essential to remember that while the theme offers robust performance features, the ultimate speed of a website also depends on factors such as hosting, content, and optimization strategies. By leveraging Divi 5’s tools and adhering to best practices in web design, users can create fast, engaging websites that meet the demands of today’s digital landscape.
As website speed continues to be a critical factor in user experience and SEO, Divi 5 stands out as a viable option for those looking to build high-performance websites with ease.
Recent Comments