{"id":813,"date":"2021-11-29T10:00:00","date_gmt":"2021-11-29T09:00:00","guid":{"rendered":"https:\/\/wp-rocket.me\/blog\/?p=813"},"modified":"2024-03-04T14:42:12","modified_gmt":"2024-03-04T13:42:12","slug":"how-fast-is-divi-wordpress-theme","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/blog\/how-fast-is-divi-wordpress-theme\/","title":{"rendered":"How Fast is the Divi Theme? (And How to Speed it Up)"},"content":{"rendered":"

Divi recently released an impressive performance update where they \u201cspeed up Divi from every angle\u201d. According to Elegant Themes, their new version eliminates bloat and gives you a good grade on Google PageSpeed Insights. <\/p>

Today, we are going to verify this statement and check how fast Divi is. Then, we\u2019ll share our list of optimization techniques you can follow to increase the speed of your WordPress site built with the Divi theme. <\/p>

\"Divi
Divi and WP Rocket<\/figcaption><\/figure>

<\/p>

Testing Divi\u2019s Performance<\/h2>


I’m going to test version 4.14 of Divi. I\u2019ve installed a demo coming from the Divi library called \u201cThe yoga studio\u201d. My test site has several images, yoga classes, testimonials, and links to social media. <\/p>

Performance tools used: <\/strong>Google PageSpeed Insights on mobile and WebPageTest.org (iPhone X with a server located in France) – we are taking a full mobile approach.<\/em><\/p>

KPI measured:  <\/strong>Performance grade on PSI, two of the Core Web Vitals<\/a>, Speed Index<\/a>, Total Blocking Time<\/a>, First Contentful Paint<\/a>, Time To Interactive<\/a>, Fully loaded time, and the number of HTTP requests.

Note: FID can\u2019t be measured because its data is based on real users. However, we have the Total Blocking Time, which is similar to FID. <\/em><\/p>

Let\u2019s run the audit! <\/p>

\"My
My test site built with Divi: an e-learning site with yoga classes
<\/figcaption><\/figure>

Let\u2019s have a look at our mobile KPIs scores: <\/p>

KPIs (Mobile performance)<\/strong><\/td>Score<\/strong><\/td><\/tr>
Overall grade <\/td>84\/100<\/td><\/tr>
First Contentful Paint<\/td>2.5 s (orange)<\/td><\/tr>
Speed Index<\/td>4.7 s<\/td><\/tr>
Largest Contentful Paint<\/td>2.8 s (orange)<\/td><\/tr>
Time to Interactive<\/td>5.4 s<\/td><\/tr>
Total Blocking Time<\/td>200 ms<\/td><\/tr>
Cumulative Layout Shift<\/td>0.01<\/td><\/tr>
Fully loaded time<\/td>2.669 s <\/td><\/tr>
HTTP requests<\/td>24<\/td><\/tr><\/tbody><\/table><\/figure>

Speed Results: How Fast is Divi?<\/h3>

Divi\u2019s fully loading time is 2.6 seconds from mobile, which is a good speed result for many sites. According to Lighthouse, Divi got an 84\/100 performance grade on mobile, which is also a satisfactory performance score. <\/p>

All those numbers are solid for pages that are built using a visual drag-and-drop editor like Divi.<\/p>

How to explain this performance for a page builder that lets you build so many advanced features?<\/strong> It\u2019s simple: in the latest release of Divi, Elegant Themes added some serious built-in speed optimization features that can make your site load faster. <\/p>

That\u2019s why our performance grade from mobile (84\/100) is pretty good: we should consider the amount of content we built using the Divi modules and the animations. <\/p>

\"Overall
Overall performance on mobile – Source: PSI 
<\/figcaption><\/figure>

However, there\u2019s still room for improvement. We should aim for a green score (90+). Lighthouse recommends addressing a few issues to improve our performance score. The recommendations are mainly about caching, text compression, and reducing unused code. <\/strong><\/p>

\"Audit
Audit section for my Divi site – Source: PSI
<\/figcaption><\/figure>
\ud83d\ude80 Performance key takeaways<\/strong>

– Divi theme is way faster than it was before Divi 4.14

– I enjoyed the bloat-less experience while building the site

– I got 84\/100 on mobile, which is extremely good for such a powerful page builder

– Fully loading time is 2.6 seconds, which is also a good starting point for performance<\/td><\/tr><\/tbody><\/table><\/figure>

Want to see how we got 100\/100 on mobile using Divi and<\/em><\/strong> WP Rocket? Jump to the last section<\/a>!<\/p>

The 5 New Divi Performance Features<\/h2>

Divi went from a heavyweight to a lightweight theme by adding 5 main speed-optimization features, namely:<\/p>

  1. A new dynamic PHP framework – loading and processing only<\/strong> what\u2019s needed based on the Divi modules, animations, emoji, or icons you use on your site.<\/li>\n\n
  2. The overall CSS size of Divi was reduced by 94%, and its JavaScript was cut by 50% (meaning that Divi has removed unneeded resources and deferred render-blocking requests).<\/li>\n\n
  3. Divi is now Inlining stylesheets and only loads critical CSS<\/a> (the one above the fold), which will defer everything else. <\/li>\n\n
  4. Google Fonts are now cached.<\/li>\n\n
  5. JQuery deferral moved out of the header and is now loaded asynchronously in the footer (only when it\u2019s not needed in the header). <\/li><\/ol>

    You will even find a dedicated tab to performance, accessible from your WordPress dashboard from Divi Theme Options <\/strong>> General<\/strong> > Performance.<\/strong><\/p>

    \"Performance
    Performance tab implemented by the Divi Team – Source: My WordPress dashboard
    <\/figcaption><\/figure>

    Divi is fast, and on top of that, we have put together a list of optimization techniques you can implement to make it even faster.<\/p>

    <\/div>\n\t