Divi Speed Optimization Checklist: Fix a Slow Divi Site

What is Divi speed optimization?

Divi speed optimization is the ordered process of cutting the CSS, JavaScript, image, and font weight that the Divi Builder adds to a page, then layering caching and a CDN on top, so the site loads fast and passes Core Web Vitals. It's not one toggle. It's a sequence, and the order matters more than any single plugin you install.

Here's the honest part most guides skip: Divi isn't slow the way it was in 2019. Elegant Themes rebuilt the engine, cut CSS by roughly 94%, and trimmed JavaScript by about 50% with the dynamic framework. So a sluggish Divi site today is usually a configuration problem, not a theme problem. You've got builder bloat, the wrong performance toggles, render-blocking assets, and oversized backgrounds stacking up. This checklist fixes them in the safe order.

I run this same sequence on client sites every week. If you want the full done-for-you version, that's our Divi speed optimization service, but you can work the whole checklist yourself below.

Why is my Divi site slow?

Your Divi site is slow because the Builder outputs broad CSS and JavaScript for every module type on the page, and most owners stack heavy hero sliders, large background images, and animations on top of that. Each one is survivable alone. Together they push LCP past 2.5s and tank your mobile score.

The usual suspects, in the order I find them: a hero slider or full-width header carrying a 1MB background JPG, three or four animated modules above the fold, Google Fonts loaded from Google's servers instead of locally, and a cache plugin that's either missing or fighting Divi's own output. On mobile, all of that hits a weaker CPU and a slower connection, so the same page that scores 90 on desktop scores 45 on a phone.

If you want the deeper root-cause breakdown across any builder, our guide on why page builders load slowly covers the shared causes, and the diagnosis steps below pin down which ones are hurting your specific layout.

How do I diagnose Divi speed problems first?

Diagnose before you touch a single setting, because guessing wastes hours and risks breaking your layout. Run your slowest template, usually the homepage, through PageSpeed Insights and note the real numbers: LCP, INP, CLS, and TTFB. Then open Chrome DevTools, switch to the Coverage tab, and reload. It shows you exactly how much CSS and JavaScript loads unused on that page, which tells you whether your problem is bloat or weight.

Your targets are concrete. Aim for LCP under 2.5s, INP under 200ms, CLS under 0.1, and TTFB under 0.8s. If TTFB alone is over 600ms, your host or your missing page cache is the bottleneck, and no amount of CSS trimming will save you until that's fixed. Install Query Monitor to confirm whether slow database queries or a heavy plugin are inflating server time.

Test on mobile, not just desktop. That's the single most common mistake I see: people optimize the desktop view, celebrate, and never look at the throttled mobile run where Google actually grades them. Our free WordPress speed audit tool runs the real PageSpeed Insights API so you can capture the mobile baseline in one click before you start.

Which Divi performance settings should I enable?

Enable the dynamic settings first, because they're the safest, fastest win and they ship inside Divi at no cost. Go to Divi > Theme Options > General > Performance. Turn on Dynamic Module Framework, Dynamic CSS, Dynamic JavaScript Libraries, and Dynamic Icons. These four load only the code each page actually uses instead of the full library, and they rarely break anything.

Now the judgment calls, and this is where information gain matters. Critical CSS and Load Dynamic Stylesheet In-line look tempting, but I leave Critical CSS off on most builds. It frequently causes a flash of unstyled content or pushes CLS above 0.1 on Divi sites that use custom code, animations, or third-party modules. Test it with the toggle on, measure CLS, and if layout shifts get worse, turn it back off. Same caution with Defer jQuery and Improve Google Fonts Loading: enable them one at a time, then retest, because they can break sliders and form plugins.

A safe starting profile looks like this: Dynamic Module Framework on, Dynamic CSS on, Dynamic JavaScript Libraries on, Dynamic Icons on, and everything else off until you've tested it individually. For a deeper walkthrough of each toggle and what it does, read our dedicated Divi performance settings guide. That page goes setting by setting; this checklist keeps you moving through the full stack.

How do I reduce Divi Builder bloat and DOM size?

Reduce builder bloat by cutting nested rows and collapsing modules, because every nested row, column, and module adds DOM nodes that the browser has to parse and paint. Divi makes it easy to wrap a single button in three layers of section, row, and column. That nesting is what bloats your DOM and slows interaction.

Keep total DOM under roughly 1,400 nodes per page; over 1,500 and PageSpeed flags "excessive DOM size" directly. Audit your heaviest template and ask one question per section: does this need its own row, or can it share one? Replace stacks of small text and image modules with a single Code module where the layout is static. Above the fold especially, fewer modules means a faster LCP, because the browser reaches your main content sooner.

Rebuild your hero for speed. A full-screen slider with three animated slides is the heaviest thing on most Divi homepages. Swap it for one static section with a single optimized background and one call to action. The page below the fold can stay rich; it's the first viewport that decides your LCP and your visitor's first impression.

How do I remove unused CSS and delay JavaScript on Divi?

Remove unused CSS and delay JavaScript through your cache plugin, but always add Divi-specific exclusions, or you'll break sliders, animations, and the Builder itself. This is the step that breaks the most Divi sites, so the exclusions below are the difference between a fast site and a broken one.

For Remove Unused CSS in WP Rocket, FlyingPress, or Perfmatters, exclude /et-cache/. Divi writes its dynamic stylesheets into that folder, and stripping them mid-cache leaves pages unstyled. For Delay JavaScript, a safe baseline exclusion list is jquery.min.js, /Divi/js/scripts.min.js, et_pb_custom, and elm.style.display. If your site uses animations or a preloader, also exclude jquery-migrate.min.js, /Divi/js/custom.unified.js, et_animation_data, and var DIVI. Without these, delayed scripts never fire and your animated sections sit blank until a user interacts.

Apply these one feature at a time and reload the front end after each. Render-blocking resources are a top PageSpeed complaint on Divi, and our render-blocking fixes guide covers the CSS and JS delivery side in depth. The rule that keeps you safe: change one thing, clear cache, reload as a logged-out visitor, confirm nothing's broken, then move on.

How do I optimize Divi images, backgrounds, and fonts?

Serve every image as WebP, lazy-load below-the-fold media, and host your fonts locally, because images and fonts are usually the two heaviest payloads on a Divi page. Compress and convert with ShortPixel, Imagify, or Optimole so the browser downloads WebP files that are often 30% smaller than the JPEG or PNG original.

Divi loves big background images, and that's where LCP goes to die. Find your largest background, resize it to the actual display dimensions, convert it to WebP, and make sure it's not being lazy-loaded if it sits in the first viewport. Lazy-loading your LCP image is a classic own goal; exclude the hero background from lazy load and preload it instead. For everything below the fold, lazy load is your friend. Our WordPress image optimization guide walks through the full compression and sizing workflow.

Host Google Fonts locally with OMGF, or use Divi's Improve Google Fonts Loading setting after you've tested it. Pulling fonts from Google's servers adds an extra connection and a render delay; serving them from your own domain removes that round trip and cuts layout shift from late font swaps. Limit yourself to two font families and the weights you actually use.

Do I need caching, hosting, and a CDN for Divi?

Yes to all three, because caching, hosting, and a CDN set the speed ceiling that your module and image work can ever reach. Without page caching the server rebuilds every Divi page from scratch on each visit, which inflates TTFB and undoes most of your other work, so caching is the single biggest win after the performance settings.

WP Rocket is the easiest cache plugin fit for Divi because its delay-JS and unused-CSS controls are simple to scope with the exclusions above. FlyingPress is the leaner, faster option if you're comfortable tuning it. On LiteSpeed hosting, LiteSpeed Cache is free and excellent and pulls full-page caching down to the server level. Whichever you pick, enable page caching, GZIP or Brotli compression, and minification, then add the Divi exclusions before you walk away. Our WP Rocket vs LiteSpeed Cache comparison helps you choose. Just remember caching compounds layout cleanup; it doesn't replace it.

Hosting sets your TTFB floor, and a CDN cuts the distance to your visitors. You can optimize every module perfectly and still load slow on cheap shared hosting, because the server response time you can't fix in WordPress.

If your TTFB is consistently over 600ms after caching, the host is the bottleneck. LiteSpeed-based hosting with NVMe storage and Redis object cache gives Divi a strong foundation, and the best managed setups push global TTFB toward 100 to 200ms. Add Cloudflare in front for a CDN plus DNS, and turn on Cloudflare APO so full HTML pages cache at the edge. That combination serves your Divi pages from a server geographically close to each visitor instead of one origin box.

Object cache and OPcache matter on dynamic Divi sites too. Redis or Memcached caches database query results so repeat page builds skip the database entirely. If your host offers it, turn it on. For the wider picture on choosing infrastructure, see our Core Web Vitals pillar, which ties TTFB back to the metrics Google scores.

How do I fix Divi speed on mobile?

Fix Divi mobile speed by simplifying the sections that mobile visitors actually load and by retesting on the throttled mobile run, because Google grades you on mobile and mobile CPUs are far weaker than your laptop. A homepage that flies on desktop can crawl on a mid-range phone carrying the same modules.

Use Divi's responsive controls to hide or shrink heavy desktop-only sections on phones. That hero slider, the parallax background, the row of animated counters: trim them on mobile where the payback is biggest. Serve smaller background images at the mobile breakpoint, and confirm your LCP element on mobile is preloaded, not lazy-loaded. Animations are especially costly here, so prefer transform and translate over properties that force layout recalculation.

Then retest the mobile numbers specifically. Our WordPress mobile speed guide goes deeper on the mobile-only fixes, and the rule holds throughout this checklist: after every change, clear cache and re-run PageSpeed Insights on mobile so you're measuring what Google measures.

What mistakes break Divi sites during optimization?

The mistakes that break Divi sites are skipping the et-cache exclusion, delaying JavaScript without Divi exclusions, and toggling every performance setting at once. Each one leaves you staring at a broken layout with no idea which change caused it, so avoid all three by working slowly.

The other big ones: building every section with complex nested modules when a Code module would do, using oversized background images straight from a phone camera, lazy-loading the hero image that should be preloaded, and testing only desktop. I also watch people enable Critical CSS, see CLS spike, and not connect the two. Change one thing, retest, and write down what you did. That single discipline prevents most Divi optimization disasters.

And don't replace Divi just because it's slow today. Most slow Divi sites can be made genuinely fast with this checklist; ripping out the theme is rarely the answer and usually breaks more than it fixes. If you've worked the full list and you're still stuck, that's the point to bring in help rather than starting over.

When should I hire a Divi speed expert?

Hire a Divi speed expert when you've worked this checklist and your Core Web Vitals still won't pass, or when the exclusion lists and Critical CSS judgment calls are eating days you don't have. Some Divi sites carry years of accumulated plugins, custom code, and child-theme tweaks that interact in ways a generic guide can't predict.

It's also worth it when the site earns money. If a slow checkout or a failing mobile score is costing conversions, paying for a few hours of focused optimization usually pays for itself fast. A good expert will diagnose with Query Monitor and DevTools, fix in the safe order, and hand you a before-and-after PageSpeed report rather than vague promises.

You can see how I approach this work and what real results look like on our Divi speed optimization page. Whether you finish the checklist yourself or hand it off, the goal is the same: a Divi site that passes Core Web Vitals on mobile and stays fast as you add content.

My checklist for Divi Speed Optimization Checklist

Guides related to Divi Speed Optimization Checklist

I use internal links to keep the WordPress speed topic map clear. If this article is close to your problem but not exact, one of these pages is probably the better next step.

What do people ask about Divi Speed Optimization Checklist?