Divi Vs Kadence: Page Performance Test

For a fast loading WordPress site, choosing the right page builder and theme is critical. The choice of your website page builder can significantly impact your site’s speed and performance.

We recently migrated a client’s website, V Moss Transport, from Divi to Kadence. I have known that Kadence “feels” faster than Divi for some time. It’s one of the reasons we moved to using block themes, but I have never done a proper comparison between the two.

In this article we reveal the findings when I compared these two popular WordPress themes. The bonus of this comparison is its a real world example. This is not a demo site, but a rebuild of a commercial project.

This means we are using like for like plugins and features. We also used the same images and content. This is the first time that a comparison like this has been done for Kadence Pro and Divi.

For testing the websites I used the WebPageTest tool as a benchmark. This combines multiple tools into one useful report.

Note: This is a written version of a YouTube video that you will find linked below.

Video: Divi Vs Kadence Page Performance Test

Watch the video tutorial on the comparison page speed comparison between Divi and Kadence.

The Importance of Page Speed

After more than 20 years of building websites I have learned one thing, everyone loves fast internet. This means slow web pages are very much hated by users.

As a web builder you need to take speed seriously. That means being careful and mindful of how you are building your website.

Studies by Google highlight the critical role of website speed. This is an old study but a good one. This short video always sticks out to me as a great insight to website speed.

From this video we can see why web page speed matters. No one likes slow websites. It also leaves an emotional impact on users.

Here’s a quick rundown of the consequences of sluggish websites:

User Experience: Today’s users have zero tolerance for slow loading times. Mobile site visitors can abandon pages that take longer than 3 seconds to load. This can translate to a loss of leads and potential customers. Worse, many people take it personally against a brand when a website loads slow.

SEO Impact: Search engines like Google measure user engagement. This means if a user goes to your site from a search engine and then leaves before the page loads, you’re in trouble. Search engines will reduce your ranking, hiding your business from potential customers because of a bad user experience.

The Case Study: V Moss Transport Website

To illustrate the real-world impact of page builder choice on performance, we migrated a freight-transport website from Divi Theme to Kadence Theme.

Analyzing Website Performance

We compared the performance of Divi and Kadence website versions using these criteria.

1. Page Speed Index
2. Page Size
3. JavaScript Files and Blocking Scripts
4. File Structure

1. Page Speed Index

The page speed index measures how fast the content of a web page becomes usable. One way to achieve this faster usability is through lazy loading images. This technique delays loading images until they enter the user’s viewport, reducing the initial page load time.

Our tests clearly showed that the Kadence version of the website felt like it loaded noticeably faster than the Divi version. The Divi version clocked in at a sluggish 3.967 seconds, while the Kadence version blazed a trail at a speedy 1.620 seconds.

2. Page Size

We typically measure web page size in kilobytes (KB) or megabytes (MB). This size directly impacts load times. Smaller web pages load faster, especially for users on slower internet connections.

Kadence’s home page noticeably outspeeded Divi’s in our tests. Clocking in at a lightweight 1431 KB, Kadence is a clear winner compared to Divi’s heavier 1678 KB home page. While the difference in raw file size might seem small, it can have a significant impact on how quickly your website feels to visitors.

3. JavaScript Files and Blocking Scripts

JavaScript (JS) files bring websites to life with interactivity and animations, but using too many or unoptimised files can significantly hinder page load times. Striking a balance between functionality and performance is crucial.

We found that Divi utilized 20 JS files for its functionalities. While Kadence achieved a streamlined approach with just 5. This significant reduction contributed to faster loading times for the Kadence website.

On top of that, Divi is using a technology called jQuery. jQuery is no longer the best way to make websites because of its loading process. This not only adds lots of code to Divi, it also makes it feel slower than the page size would suggest.

Once Divi 5 comes out, I expect this to be fixed and jQuery will no longer be a mandatory element for a Divi website.

5. File Structure

Both Divi and Kadence generate relatively clean code compared to other page builders. However, a key difference lies in their code footprint.

Divi offers a wider range of features, particularly for animation and dynamic layouts, which are not currently available in Kadence. While this flexibility is a plus, it comes at the cost of using significantly more code.

This difference in code size becomes evident when we examine the files each page builder loads. As you can see in the table below, Divi uses a considerably larger amount of code compared to Kadence.

File Type	Kadence (bytes)	Divi (bytes)	Difference (% bigger)
CSS	44,002	74,606	169.55 %
JS	39,295	329,003	837.26 %
HTML	20,010	36,072	180.27 %

Kadence’s smaller HTML file size for the same content offers several advantages. A better HTML-to-content ratio improves search engine optimisation (SEO) by making it easier for search engines to understand your website’s content.

Furthermore, Divi’s reliance on the jQuery library contributes to its substantially larger JavaScript (JS) files (837.26% larger than Kadence). While jQuery offers a broad range of functionalities, it can sometimes be redundant or lead to performance issues. Kadence takes a more streamlined approach, resulting in faster loading times.

Performance Winner: Kadence Takes the Lead

Our case study analysis of Divi versus Kadence paints a clear picture. Kadence reigns supreme in website speed performance.

Migrating the V Moss Transport website from Divi to Kadence resulted in significant improvements in page load times and overall website size. This is primarily due to Kadence’s leaner codebase and no reliance on large libraries like jQuery.

However, the future holds some intrigue. Divi is slated for a major upgrade this year, which could potentially address many of the performance concerns we’ve identified.

While we wait and see, the current landscape favours Kadence for users who prioritise website speed and SEO. Its lightweight design delivers a faster and more search-engine-friendly experience.

Beyond Performance: Other Factors to Consider

While speed and performance is crucial, it’s not the only factor when choosing a page builder and theme. Here are some additional points to think about:

Pricing

Divi Pro’s $729 lifetime deal appears cheaper initially compared to Kadence’s $799 plan. But look beyond the price tag – consider the features you actually need.

Yes, Divi offers a slight cost advantage. However, make sure the features you need are included in Divi’s package. Kadence provides a unique popover and conversion tool that might be essential for your website’s functionality.

Ultimately, the best choice depends on your specific needs and priorities. If a lower initial cost is important, and the features you require are available in Divi, it could be a suitable option. However, if you need features like popovers and conversions, or prioritise speed, Kadence is the better choice.

Stability and Longevity

Divi boasts a long history in the WordPress theme market, which instills confidence in its continued development. Additionally, the upcoming release of Divi 5 suggests the platform’s ongoing evolution.

While Divi’s established presence offers a sense of stability, it’s important to consider your website’s future needs. It’s wise to evaluate both platforms based on their ongoing development plans and your specific requirements to ensure a long-term solution.

AI Integration

Both Divi and Kadence offer AI features to streamline content creation.

Currently, Divi’s AI appears more versatile for most users, providing functionalities like text generation and image suggestions.

Divi’s AI subscription model (priced per year) is also arguably more user-friendly than Kadence’s credit-based system. AI can be fickle and having lots of scope to manipulate AI results is something I like when using the Divi AI.

Kadence’s AI is still under development, and future updates could change the landscape. However, Kadence does hold a unique advantage: AI-powered website creation. While still under development, Kadence allows generating entire website structures with AI. A feature currently missing from Divi (at the time of writing this article).

Based on my current usage, Divi AI generates higher-quality content for web pages than Kadence AI. It uses the whole website as a prompt. This means relevant content can be automatically created in a way that Kadence struggles to do.

Divi Vs Kadence: Final Verdict

The choice between Divi and Kadence ultimately depends on your priorities.

For those seeking the absolute fastest performance, Kadence is the clear winner.

However, Divi has attractive pricing, an established track record, and a potentially revolutionary upcoming upgrade. This makes it a compelling option for users who value a more affordable product, stability, and promising new features.

Do you need help making a WordPress site? If your looking for professional results reach out to the team at MRK WP.