/divi5-performance

name: Divi 5 Performance
description: Use this skill when optimizing Divi 5 site performance, improving Core Web Vitals (LCP, INP, CLS), reducing render-blocking CSS, working with Divi's Critical CSS / Dynamic CSS / Inline Stylesheet system, configuring font loading (WOFF2, preload, font-display, variable fonts from 5.9), lazy-loading background images, preloading above-the-fold images, debugging slow Divi pages, or auditing cache-plugin interactions (WP Rocket RUCSS, LiteSpeed, Autoptimize, Perfmatters). Covers Divi 5's per-page component CSS, the 5.5 Aspect Ratio for CLS prevention, the 5.10 native below-the-fold lazy loading and deferred local videos, and the per-module helper class pattern for lazy-loading.
user-invocable: false

Divi 5 Performance Optimization

**Divi 5 Version:** 5.13.1 (September 2026) **Core Web Vitals targets:** LCP < 2.5s, INP < 200ms, CLS < 0.1

Overview

Divi 5 was rebuilt for performance. The Dynamic Framework breaks the monolithic Divi stylesheet into hundreds of small per-module components and assembles a unique per-page stylesheet on demand — pages that use 5 modules only ship the CSS for those 5 modules. Combined with Critical CSS extraction (inlined above-the-fold styles) and Inline Stylesheets (eliminates an external CSS request), Divi 5 removes all render-blocking CSS by default.

What this skill covers: the configuration knobs, the CSS patterns that make Divi 5's pipeline work well, and the integration patterns with third-party performance plugins.

The Divi 5 Performance Pipeline

Three Theme Options work together. Enable in: **Divi → Theme Options → Builder → Advanced → Performance**.

| Option | What it does | When to disable | |--------|--------------|-----------------| | **Dynamic CSS** | Per-page stylesheet with only the CSS for modules used on that page. Replaces the monolithic `style.css`. | Only if a plugin specifically requires the full stylesheet — almost never | | **Critical CSS** | Auto-extracts above-the-fold CSS, inlines it in `<head>`, defers the rest with `<link rel="preload" ... onload>`. | If a cache plugin's own Critical CSS is running (avoid double-work) | | **Inline Stylesheets** | Inlines the small per-page CSS file in `<head>` instead of loading via `<link>`. Removes one render-blocking request. | If your stylesheet is unusually large (>50KB inlined hurts more than it helps) |

**Verification:** View source on a frontend page. You should see no `<link rel="stylesheet">` blocking the parser — only inline `<style>` tags and deferred preloads. Run Lighthouse and confirm "Eliminate render-blocking resources" is not flagged.

Native lazy loading (5.10+)

Divi 5.10 added engine-level deferral, reducing the need for custom lazy-load work:

• **Below-the-fold modules** load only when scrolled into view, detected at row granularity within sections.
• **Local MP4/WebM background/module videos** are deferred until they enter the viewport.
• **Dynamic Assets generation** is memoized, so repeated filter callbacks don't re-run.

On 5.10+, verify the built-in deferral covers your case before adding the IntersectionObserver helper-class pattern below. Also note two cache-related fixes worth updating for: intermittent disappearing styles (fixed across 5.8/5.9) and LiteSpeed purging entire entry sets per edit (fixed in 5.8).

Conditional Display asset pruning (5.13+) and cache-purge fixes (5.12+)

• **5.13:** modules hidden by **Conditional Display** no longer contribute frontend runtime JS or extracted-font webfont loads. If you were manually dequeueing module scripts or fonts for logged-out/device-specific variants, that workaround is redundant on 5.13+.
• **5.12:** saving a page or opening the Visual Builder no longer purges the *entire* third-party page cache on Cloudways-style hosts, and WooCommerce product saves no longer clear Divi's CSS cache each time (this was causing bulk-edit timeouts). Editors on busy sites should update.
• **5.12:** Charts module frontend JS bundle shrank (validation removed from the Chart.js config parse path).

Core Web Vitals: What Hurts You in Divi 5

LCP (Largest Contentful Paint) — target < 2.5s

The LCP element is almost always a hero image, hero heading, or hero video poster. Top causes of slow LCP on Divi sites:

1. **Hero image not preloaded** — Divi doesn't auto-preload above-the-fold images. Fix: add `<link rel="preload" as="image" href="...">` for the hero image (Theme Builder header or a `wp_head` hook). 2. **Lazy-loaded hero image** — `loading="lazy"` on the LCP image delays it past the LCP window. Fix: set `loading="eager"` and `fetchpriority="high"` on the hero image, or exclude it from lazy-load plugins. 3. **Render-blocking fonts** — Web fonts blocking text paint. Fix: host locally, preload the heading font, set `font-display: swap`. 4. **Background image as LCP** — Browsers don't preload CSS background images. If your hero uses a `background-image`, either preload it manually or move it to an `<img>` element.

INP (Interaction to Next Paint) — target < 200ms

Replaced FID in March 2024. Measures the slowest interaction on the page. Divi-specific causes:

1. **Heavy JavaScript on first interaction** — Divi's jQuery, slider scripts, animation scripts. Fix: enable Divi's "Defer jQuery" option, defer non-critical Divi scripts. 2. **Long animation chains** — Stagger animations on scroll/click can block the main thread. Fix: use CSS animations (compositor-only properties) instead of jQuery effects. 3. **Live filter/search modules** — Heavy DOM manipulation. Fix: debounce, paginate results.

CLS (Cumulative Layout Shift) — target < 0.1

Divi 5.5 added **Aspect Ratio** settings on all image elements specifically to prevent CLS. Use them.

1. **Images without intrinsic dimensions** — image renders, layout shifts when dimensions settle. Fix: set Aspect Ratio (5.5+) on all images, or set explicit `width`/`height` attributes. 2. **Web font swap shift** — text shifts w