How To Speed Up A Slow Loading Divi Website (Advanced Guide)

Slow-Loading-Divi-Website

Have a slow Divi website?

It’s true that Divi slows down your website from extra CSS and JavaScript. But since you’re already using Divi, I wanted to share solutions I found myself as well as solutions from the Divi Theme Users Facebook Group. If you’re not part of that Facebook group yet, you should join.

Core web vitals punished websites using page builders like Divi and Elementor. That’s why it’s so important to optimize it as best you can. To speed up Divi, start by fixing server issues in Divi’s system status. Make you’re using fast plugins (check Query Monitor), fast hosting (Cloudways is solid), and a top-rated cache plugin like WP Rocket or LiteSpeed Cache. Once your infrastructure is fast, focus on the smaller tweaks and individual items from Lighthouse.

Good luck and drop me a comment if you have questions.

Got 44 minutes to become a WordPress speed pro? Watch my video.

 

1. Remove Unused Divi CSS + JavaScript

Divi adds extra CSS and JavaScript throughout your website. So do plugins, fonts, and other assets. Sometimes, these assets load across your entire site even when they’re not being used.

By unloading unused assets, this removes unused code which improves CSS and JavaScript load times (an item in PageSpeed Insights). You can either use Perfmatters or Asset CleanUp for this.

I use Perfmatters since it’s more user-friendly and lets you disable assets “everywhere but posts” (good for things like social sharing plugins), but Perfmatters is a paid plugin ($25/year).

Choose a plugin then go to it’s script manager. You’ll see scripts/styles loaded on the page and options to disable them in certain places. Do this with assets that don’t need to load site-wide.

Disabling assets that are being used can break your Divi site – test carefully!

Divi Custom Script
Unloading assets in Asset Cleanup
Perfmatters-Script-Manager
Unloading assets in Perfmatters

Try disabling other scripts/plugins as well:

  • Disable contact forms everywhere but contact page
  • Disable social sharing plugins everywhere but posts
  • Disable table plugins everywhere but content with tables
  • Disable rich snippet plugins everywhere but content with rich snippets
  • Disable WooCommerce scripts/styles except on non-eCommerce pages
  • Disable fonts everywhere except certain areas (if you use multiple fonts)

 

2. Minify And Combine CSS + JavaScript

If you’re already using a cache plugin, it probably handles this already.

Otherwise, you can minify and combine CSS and JavaScript files in Divi’s settings. In WordPress, go to Divi → Theme Options → Minify And Combine Javascript + CSS Files.

Minify removes unnecessary characters from code. Combining files serves files in 1 request instead of multiple, although this can sometimes have a negative impact on speed (so test it).

Minify Combine CSS JavaScript Divi

 

3. Fix Errors In Divi’s System Status

Divi’s system status shows your server’s configuration.

Access the system status under Divi → Support Center → Show Full Report.

Depending on which host you’re hosting, your configuration may be different. Shared hosting doesn’t typically let you change these (cloud hosting does). Upgrading to PHP 7.4 or 8.0 can significantly help speed up Divi. Otherwise, follow Divi’s recommendations and fix red errors.

Divi System Status

  • Writable wp-content directory – True (ensures compatibility with Divi).
  • PHP version – some hosting companies have already released PHP 8.0.
  • Memory-limit – increasing memory limit to 256MB is recommended by WordPress and WooCommerce. But it should really be done for every site especially if you’re getting fatal memory limit errors. You can do this in most (cloud) hosting accounts or with a simple line of code. Alternatively, contact your host and request them to increase your memory limit.
  • Post-max-size – 64MB is recommended by Divi. This is the maximum size a page or file can be. There’s no reason you should come even close to this even if you have a large site.
  • Max-execution-time – Divi recommends 120. A low number prevents things from using lot of resources and lagging the server. High is good for backups + long imports/exports.
  • Upload-max-filesize – 64MB is fine unless you need to upload something very large.
  • Max-input-time – 60 is fine unless you need to upload something that takes a long time.
  • Max-input-vars – 1,000 is fine unless certain plugins require a higher number.
  • Display-errors – should be 0.

 

4. Go Easy On Divi Plugins

Divi offers extensions to the actual builder.

It may be tempting to stay loyal to Divi, but some extensions are not lightweight. They’re not always modular either (modular plugins let you disable features based on what you’re using). Try to use modular plugins, test their load time impact, and don’t limit yourself to Divi plugins.

Find Your Slowest Plugins

Query Monitor lets you see your slowest loading plugins (P3 Profiler was also updated recently and seems to work now, but I would still use Query Monitor). Install Query Monitor, view a page on your Divi website, click the Query Monitor tab, and go to Queries → Queries By Component.

Query Monitor Slow Plugins

Common Slow Plugins

Some plugins are infamous for being slow. I would generally avoid statistic plugins, sliders, most portfolios, calendars, chat, related post, Wordfence, WPML, and plugins that run ongoing scans or processes. I haven’t tested all Divi plugins and whether or not they slow down your site, but I did create a list of general plugins that are infamous for being slow. Try to avoid them if possible.

  1. AddThis
  2. AdSense Click Fraud Monitoring
  3. All-In-One Event Calendar
  4. Backup Buddy
  5. Beaver Builder
  6. Better WordPress Google XML Sitemaps
  7. Broken Link Checker
  8. Constant Contact for WordPress
  9. Contact Form 7
  10. View Full List Of 73 Slow Plugins

 

5. Rethink Divi Hosting

Run your site through Google PageSpeed Insights to check your server response time, or use GTmetrix and KeyCDN’s Performance Test. Google flags your TTFB as “red” if it’s over 600ms.

Short Server Response Time

Slow TTFBs are almost always because of cheap, shared hosting.

So why does Divi recommend SiteGround, Flywheel, and Pressable?

Neither of these hosts are great choices and I suggest you join the WordPress Hosting Facebook Group to get unbiased opinions that aren’t based on affiliates or paid partnerships.

In that group, you will come across Facebook polls on “the best WordPress hosting” and conversations from people who are more knowledgeable on it. It’s where the speed nerds are.

It’s not smart to run Divi (and most builders) or WooCommerce on shared hosting.

Divi Hosting

SiteGround – went downhill in 2020 with increased complaints about slower TTFBs, CPU limits, reduced support, price increases, high renewals, and Site Tools. Not nearly as fast as they used to be since migrating to Google Cloud. There is a large trend in Facebook Groups of people moving away from SiteGround since the value of their WordPress hosting is no longer worth it. Do a quick search in Facebook Groups for “SiteGround” and you will see numerous complaints. Additionally, Backlinko’s Page Speed report showed SiteGround had some of the worst TTFBs.

SiteGround Value

Flywheelacquired by WP Engine who is influenced by GoDaddy/EIG (do a little research or read their leadership team’s backgrounds). Arguably one of the better options out of the 3 choices in terms of speed but they only have a 3.2 star TrustPilot rating with many complaints (mostly about downtimes). If you want to keep your Divi website online, Flywheel isn’t for you.

Pressable – not a popular WordPress host. Although I haven’t tried them personally, they are rarely mentioned in Facebook Groups and not enough info is out there to determine whether they’re a good choice. Although they do have a 4.8 star TrustPilot rating, it may be hit or miss.

 

6. Reduce TTFB With Faster Cloud Hosting

Most hosting recommendations are garbage.

Join the WordPress Hosting Facebook Group to get unbiased feedback. I won’t tell you to switch hosts if you don’t need to, so run your site through Lighthouse and make sure your server response time (TTFB) is under 600ms like Google recommends (mine is about 150ms).

Cloudways is who most people use in that Facebook Group, including myself. Specifically their DigitalOcean or Vultr HF plan. It’s $10-$13/mo, but we’re talking about speed, not being cheap.

Take a look at polls, migration results, and in-depth conversations taken in these Facebook groups. Or look at Backlinko’s PageSpeed Test where he found SiteGround had a slow TTFB. You already know GoDaddy and EIG brands (Bluehost and HostGator) are obviously not good. With core web vitals coming out as a ranking factor, cloud hosting can make all the difference.

Recent Facebook polls show a large shift in people moving away from low quality hosts to Cloudways, LiteSpeed, Kinsta, GridPane, and even A2 Hosting (click thumbnails to enlarge):

Moving from SiteGround
eCommerce Hosting Poll

Do your research and look at independent migration results:

Cloudways Numbers
Cloudways-BuddyBoss
Cloudways Shoutout
Giving them a shout out in the WordPress Hosting Facebook Group
2021 OMM GTmetrix
I use Vultr High Frequency and you can click through my site to see how fast it loads
Digital Ocean Recommendation
DigitalOcean is also good and recommended in the WordPress optimization guide

Why I use Cloudways:

  • My TTFB is consistently <200ms
  • The WordPress admin loads instantly
  • Easier to pass web vitals on cloud hosting
  • Monthly pricing and free 3-day trials are nice
  • Server-level caching (Redis makes a big difference)
  • They do a free migration and have a migrator plugin
  • Support is fast/helpful as reflected in Trustpilot reviews
  • Choice of 5 cloud hosts: DO, Vultr, AWS, Google Cloud, Linode
  • They have a Cloudways Users Facebook Group to ask questions
  • Only major con is no email hosting, but there’s an option for Rackspace

 

Affiliate Disclaimer – if you sign up for Cloudways with my affiliate link, thank you! Most affiliates recommend things only for commissions but I take mine seriously and support them with evidence. I also donate to GoFundMe campaigns and everything helps. They do free migrations but if you have questions about launching a server or anything else, you can reach out to me by leaving a comment. Cheers to a faster TTFB.

Cloudways Coupon Code
Sign up for Cloudways and use code OMM25 to get 25% off 2 months

 

7. Hard Code Your Header, Footer, Sidebar

Even if you use Divi for everything else, consider hard coding these areas.

Since these appear across your entire website, this is something relatively simple that can reduce bloat from Divi. I hired WP Johnny to hard code these areas and noticed a huge improvement when clicking through my pages and in GTmetrix (you can try hiring him too, but he’s a busy guy). A developer should be able to do this. Instead of relying on Divi for these areas which will add extra CSS, JavaScript, and div wrappers, have a developer hard code them in CSS.

 

8. Use Gutenberg With Divi Blocks

Gutenberg is more lightweight than Divi.

Start building your pages with Gutenberg and only add Divi Blocks when you need them. Some of the best WordPress speed experts offer services to remove page builders from sites by replacing them with Gutenberg blocks – it’s easier, cheaper, and faster to do this from the start.

Divi Blocks

 

9. Enable Static CSS File Generation

The static CSS file generation option means “custom design styles will no longer generate in-line CSS upon request and will instead serve static files that can be cached by the browser.”

This should be enabled by default, but it’s worth checking under Page Settings →  Advanced → Performance → static CSS file generation.

Elegant Themes says it’s compatible with most cache plugins, but this performance enhancement (as well as the others) have quite a long way to go to replace cache plugins.

Divi Static CSS File Generation

 

10. Optimize Images

There are quite a few ways to optimize images on your Divi site:

  • Properly size images – avoid huge images and resize them to correct dimensions.
  • Compress images – using a plugin like ShortPixel or TinyPNG to compress images.
  • Specify image dimensions – add a width/height to the image’s HTML. This can be done in WP Rocket → Media → add missing image dimensions (I don’t believe other plugins do this). Otherwise, view a few of your image’s HTML and make sure there’s a width + height.
  • Lazy load images  – can be done in most cache plugins or OptiMole is a great choice. Lazy load can also be applied to background images, iframes, videos, comments, and AdSense.
  • Serve images from a CDN  – make sure images are served from your CDN URL (e.g. https://t9w8m8j8.stackpathcdn.com) instead of your domain. Cloudflare can’t do this while BunnyCDN, StackPath, and KeyCDN can. Serving images from a CDN should improve their download speeds for visitors who are far away from your origin server.

Most will appear in GTmetrix as errors if something needs to be fixed. However, GTmetrix only tests a single page, so make sure you run several important pages through GTmetrix to make sure most images are optimized. Images appearing on multiple pages should be optimized first.

GTmetrix Image Optimizations

 

11. Optimize Google Fonts

There are also quite a few ways to optimize fonts:

  • Prefetch fonts when loading from fonts.gstatic.com (see #9)
  • View your GTmetrix Waterfall tab → Fonts to see how long they load.
  • Host fonts locally (using OMGF) to prevent requests from fonts.gstatic.com.
  • Use a font-display plugin to prevent font shifting and improve CLS in Lighthouse.
  • Limit the number of font families, font weights, and font icons loaded on your site.
  • Preload fonts using WP Rocket, Perfmatters, or Pre* Party Resources Hints (see below).

Preload-Fonts

For example, this pulls from fonts.googleapis.com (not hosted locally) with too many weights:

Divi Fonts

 

12. Optimize Third-Party Code

Third-party code is anything on your Divi site that creates requests from external sites.

These are shown in your Lighthouse report and most often from Google services (fonts, Analytics, AdSense, Tag Manager, Maps), embedded videos, Facebook Pixel, Gravatars, or even social sharing plugins. Use Lighthouse to check which third-party code loads on your Divi site.

Third Party Usage

Reducing Impact Of Third-Party Code

  • Lazy load videos and use preview images to eliminate YouTube requests.
  • Host Google Fonts locally to avoid creating requests to fonts.gstatic.com.
  • Use the add-ons tab in WP Rocket to host Analytics + Facebook Pixel locally.
  • Host Gravatars locally using WP User Avatar to avoid requests from gravatar.com.
  • Try Grow by Mediavine for social sharing buttons to prevent social media requests.
  • Delay loading third-party comment plugins (e.g. wpdiscuz), Gravatars, AdSense, and non-critical JavaScript in WP Rocket’s delay JavaScript execution setting (or Flying Scripts).
  • Prefetch third-party code (grab the domain from your Lighthouse report or see this list of common domains to prefetch) then add them to the prefetching option in WP Rocket. Alternatively, you can use Perfmatters or Pre* Party Resource Hints (see image below).

Prefetch DNS Requests

 

13. Choose A Solid Cache Plugin

WP Rocket, LiteSpeed Cache, and SiteGround’s SG Optimizer are all great choices.

I do not recommend Divi Rocket (most people in the Divi Theme Users Facebook Group use one of the 3 plugins mentioned above).

I linked to tutorials to configure their settings (however, it’s ideal to test at least 2 and their different file optimization settings since cache plugins can react differently based on your site).

I personally use WP Rocket. Not only is it user-friendly, but it comes with many features other cache plugins don’t (resulting in more optimizations and less plugins needed to run on my site).

It’s also #1 in most Facebook Polls:

Only use 1 cache plugin at a time, choose a good one, and spend time configuring the settings.

 

14. Stay Clear Of Heavy Animations

Animations can slow down Divi especially if it’s a video.

Unless you’re a web designer and need a touch of fanciness, stay clear of animations. Animations causing slow load times have been reported multiple times in the Divi Theme Users Facebook Group already. I would also advise to stay away from sliders unless you need them.

If you must use animations, use the CSS transform properly instead of changing the width and height attributes for animations. It’s recommended by Google and should reduce layout shifts.

 

15. Use A CDN

CDNs (content delivery networks) host your website’s file on multiple data centers around the world to deliver your content from the closest data center to your users. However, if you’re a local business serving local users, it might not make sense to use it. But a CDN is worth testing.

CDN Recommendations

CDNs offload bandwidth to their data centers and lighten the load on your server. Most CDNs like Cloudflare have additional speed settings which can be tweaked for even faster load times.

 

16. Clean Your Database

Some WordPress speed plugins already let you clean your database.

But they don’t let you go through your actual plugin tables and delete tables left behind by old plugins. That’s why I like installing WP-Optimize once every few months, especially if I recently installed a plugin and decided to delete it. Otherwise, the plugin will leave behind old tables.

Install the WP-Optimize plugin and look for tables with “not installed” by them. These are plugins you installed but aren’t installed anymore. If you don’t plan on using them, delete them.

WP Optimize Tables

 

17. Use Server Level Caching

Server caching is faster than file-based caching done by cache plugins.

Some hosts like Cloudways, SiteGround, and Flywheel offer services like memcached, Redis, and Varnish. You should be using these! If you’re caching at a server level, make sure you disable caching in your cache plugin. For example, WP Rocket has a helper plugin to disable page caching. Since your host is already taking care of caching, you don’t want a plugin doing it also.

Hosting Application Services

 

18. Disable WordPress Heartbeat

The WordPress Heartbeat shows you when other users are editing a post and real-time plugin notifications. It creates a request every 15 seconds so it should generally be disabled or limited.

To disable the WordPress Heartbeat API on your Divi site, go to Appearance → Theme Editor, then edit the functions.php file of your theme. Next, paste the code right after the <?php tag:

Disable WordPress Heartbeat Manually

add_action( 'init', 'stop_heartbeat', 1 );
function stop_heartbeat() {
wp_deregister_script('heartbeat');
}

Alternatively, you can use plugins like WP Rocket or Heartbeat Control to disable Heartbeat.

 

19. Block Spam Bots

Bad bots can hit your server with no benefit and consume resources.

Google, Bing, and other crawlers are obviously good. But you would never know if bad bots are hitting your site unless you checked.

First, install Wordfence and view your live traffic report (delete this plugin when you’re done since it can cause high CPU in itself). View all bots hitting your server in real-time and look at their hostnames. For any spammy looking hostnames, Google them to see if other people have reported them as spam (here’s a helpful list). To block them, you can either use Cloudflare Firewall Rules (you can block up to 5 hostnames for free) or the Blackhole for Bad Bots plugin.

Live Traffic Report Wordfence

Moving your WordPress login page helps too since the default wp-admin and wp-login pages are easy ones to target. There are many plugins to move your login pages, such as Perfmatters.

 

20. Optimize For Core Web Vitals

You need to learn how to optimize WordPress for core web vitals.

Nick posted a lot of interesting things Divi’s development team is working on, but I wouldn’t wait for them to start optimizing your website. Web vitals will be a major ranking factor soon.

Divi And Core Web Vitals

Check out that tutorial I linked to to improve core web vitals, but you should be focusing your attention mainly on largest contentful paint, total blocking time, and cumulative layout shift.

For example, PageSpeed Insights shows your largest contentful paint element which is usually an image you can preload, compress, and further optimize. Total blocking time can usually be improved by optimizing JavaScript (defer, delay, minify, and try the Autoptimize + Async JavaScript plugin). Layout shifts can be prevented by specifying dimensions of images, videos, iframes, ad code, and ensuring text remains visible during webfont load with font-display: swap.

Largest Contentful Paint WordPress Element - Background Image
Optimize your LCP element (usually an image)

 

Consider Divi Alternatives

Divi is slow compared to other page builders.

Just because a few people posted their high scoring GTmetrix report with Divi, really doesn’t mean much. Sure, A scores are possible. But it doesn’t happen as frequently with other builders.

Gutenberg is faster than Divi. Transfer your site to Gutenberg blocks, use a pre-built Astra Starter Site using Gutenberg, and don’t forget the Gutenberg Blocks plugin which adds more blocks and functionality. I am currently in the process of migrating everything to Gutenberg.

Oxygen Builder is arguably the fastest builder available. They have an Oxygen User Facebook Group. This video is from 2019 but it does a great job in comparing the amount of bloat on Divi vs. Elementor vs. Beaver Builder vs. Oxygen. Since then, Elegant Themes claimed to make major performance enhancements to Divi, but it’s still not nearly as fast as most of the other builders.

Elementor is faster than Divi but it’s still not blazing fast. I use it and it’s the biggest thing slowing down my site, but it looks nice. Elementor and Astra Starter Sites are a solid combination if you want a good balance between great design, user-friendliness, and speed.

Page-Builder-Speed

People who moved away from heavy page builders and posted their results:

Heavy CSS and JavaScript files are often the result of using page builders:

Divi-Builder-CSS

View Source Code – go to your Divi website and view the source code to see how many times the word “Divi” shows up. This is a quick way to view how much bloat Divi adds to your website.

 

Frequently Asked Questions

Why is Divi slow?

Divi is slow because it adds extra CSS and JavaScript to your site which can flag multiple issues in Lighthouse and other testing tools. Divi's recommended hosting and extra Divi plugins can also hinder load times.

Why is the Divi backend slow?

Divi's backend can be slow when running cheap, shared hosting which has limited resources and CPU limits. It can also be from resource-hungry plugins and bloat.

Why is Divi's visual editor slow?

Divi's visual editor loads more resources than the classic editor or Gutenberg and therefore, can be slower to load. They have been working on performance enhancements but it's still not very fast.

Why is Divi slow on mobile?

Try using mobile caching, adaptive images, and simplistic, responsive design for your mobile site. PageSpeed Insights also uses a 3G connection to test your mobile site while Think With Google uses a 4G connection, resulting in better scores.

 

Did This Tutorial Help?

I hope it did. If you still have a slow Divi website or need help, drop me a comment with your GTmetrix report URL and I’ll get back to soon. And remember to join those Facebook Groups.

According to Facebook Groups, the most common ways to speed up Divi are by moving away from cheap, shared hosting, checking for PHP issues, and avoiding slow or conflicting plugins.

Overcoming-Slow-Divi-Builder

Cheers,
Tom

About Tom Dupuis

Tom Dupuis 2017Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

Subscribe
Notify of
guest
4 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments