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 when web font loads. Fix: use `size-adjust`, `ascent-override`, `descent-override` on `@font-face` to match fallback metrics. Or use `font-display: optional`.
3. **Dynamic content injection** — ads, related posts, comments. Fix: reserve space with `min-height` or `aspect-ratio`.
4. **Sticky modules** — `position: sticky` headers that pop in. Fix: apply sticky CSS server-side, not via JS.

## Critical CSS Strategy

Divi 5's auto-Critical CSS works for most pages. When to override:

### When to write your own Critical CSS

- Above-the-fold uses heavy `@font-face`, `clip-path`, or custom keyframes that the auto-extractor misses
- Theme Builder header has dynamic content the extractor can't analyze statically
- You need cross-page critical CSS (header, nav, footer-skeleton)

### How to add hand-crafted Critical CSS

Put it in **Theme Options → Custom CSS** (loads in `<head>` early enough to be critical). Keep it lean: ≤14KB compressed is the magic number (one TCP roundtrip).

```css
/* Critical CSS — render the hero before any external CSS loads */
.et_pb_section_0,
.et_pb_section.hero-section {
  background: linear-gradient(180deg, #0a1929 0%, #1a3a5c 100%);
  padding: 6rem 0 4rem !important;
}

.hero-section h1 {
  font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  color: #ffffff !important;
  margin: 0 0 1rem;
}

.hero-section .et_pb_button {
  background: #ff6b35 !important;
  border-color: #ff6b35 !important;
  padding: 1rem 2rem !important;
}
```

See `${CLAUDE_PLUGIN_ROOT}/skills/divi5-performance/examples/critical-css.css` for full template.

## Font Loading Strategy

Default Divi behavior loads Google Fonts via external request. This costs LCP and CLS. **Always host fonts locally** for production.

**Variable fonts (5.9+):** Divi supports the current Google Fonts collection including variable fonts. One variable WOFF2 replaces several static weight files — fewer requests, smaller total transfer when you use 3+ weights of a family. The same local-hosting steps below apply; download the variable axis file and declare `font-weight: 100 900;` in the `@font-face` rule.

### Steps

1. **Disable Google Fonts in Divi** — Theme Options → General → Use Google Fonts → No
2. **Download only used weights** from google-webfonts-helper or Google Fonts
3. **Convert to WOFF2** (smallest format, broad support)
4. **Define in CSS:**

```css
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;       /* show fallback immediately */
  src: url('/wp-content/fonts/inter-400.woff2') format('woff2');
  /* Metric overrides to reduce CLS on swap */
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
}
```

5. **Preload the heading font** (the one in the LCP element):

```html
<link rel="preload" href="/wp-content/fonts/inter-700.woff2" as="font" type="font/woff2" crossorigin>
```

Add via `wp_head` action or Theme Builder header HTML block.

See `${CLAUDE_PLUGIN_ROOT}/skills/divi5-performance/examples/font-loading.css` for full pattern.

## Image Optimization

### Lazy-load background images (Divi-specific)

Divi modules with `background-image` styles don't lazy-load by default — browsers can't see CSS background images until parse. Use a helper class to defer them:

```css
/* In Theme Options → Custom CSS */
.et_pb_section.lazy-bg {
  background-image: none !important;
}

.et_pb_section.lazy-bg.is-visible {
  background-image: var(--bg-image) !important;
}
```

```js
/* Add a tiny IntersectionObserver to flip the class */
const lazyBgEls = document.querySelectorAll('.lazy-bg');
const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (e.isIntersecting) {
      e.target.classList.add('is-visible');
      io.unobserve(e.target);
    }
  });
}, { rootMargin: '200px' });
lazyBgEls.forEach((el) => io.observe(el));
```

Or use **Perfmatters** (lazy-load CSS backgrounds setting) or **WP Rocket**'s LazyLoad if you don't want custom JS.

### Above-the-fold images: preload + eager

```html
<!-- In Theme Builder header HTML or wp_head -->
<link rel="preload" as="image" href="/wp-content/uploads/hero.webp" fetchpriority="high">
```

In the Image Module's Advanced tab → Attributes, add `fetchpriority="high"` and `loading="eager"`.

### Aspect Ratio (Divi 5.5+) — eliminates CLS

For every image module, set Sizing → Aspect Ratio. The browser reserves space before the image loads, no shift on paint.

| Use case | Aspect Ratio |
|----------|--------------|
| Hero banner | 21:9 or 16:9 |
| Card thumbnail | 4:3 or 3:2 |
| Product photo | 1:1 |
| Portrait | 3:4 or 4:5 |

## Cache Plugin Interactions

### WP Rocket

| Setting | Recommendation | Notes |
|---------|---------------|-------|
| File Optimization → Minify CSS | On | Compatible |
| File Optimization → Remove Unused CSS (RUCSS) | Off OR Safelist `/et-cache/`, `.et_pb_*` | RUCSS removes Divi's Dynamic CSS, breaks site |
| File Optimization → Load CSS Asynchronously | Off (Divi already handles this) | Avoid double-work |
| Media → LazyLoad images | On | Excludes already-eager images |

### LiteSpeed Cache

- Enable Object Cache (Redis/Memcached)
- ESI on Cart/Checkout for WooCommerce
- CSS/JS Combine OFF for Divi 5 (per-page CSS already optimal)

### Managed-host page caches (Cloudways, Kinsta, WP Engine)

- On Divi < 5.12 every page save / builder open flushed the whole host cache — expect cold-cache TTFB spikes for all visitors after each edit. Update to 5.12+.
- Keep Divi's own Static CSS enabled in production; host caches serve the HTML, Divi serves the per-page CSS.

### Autoptimize

- Generally avoid with Divi 5 — Divi's pipeline supersedes most Autoptimize features
- If using: disable JS aggregation (Divi defers its own JS), disable CSS aggregation

### Perfmatters

- Most Divi-friendly performance plugin
- Use for: lazy-load CSS backgrounds, script manager (disable WooCommerce JS on non-shop pages), preload links

## Auditing Checklist

Before declaring a Divi site "fast":

- [ ] Lighthouse Performance ≥ 90 on mobile (4G throttle)
- [ ] LCP < 2.5s on hero page (test the heaviest landing page)
- [ ] CLS < 0.1 across full page scroll
- [ ] INP < 200ms on primary interaction (menu open, button click, form submit)
- [ ] No render-blocking CSS in Coverage tab (Chrome DevTools)
- [ ] No external Google Fonts requests in Network tab
- [ ] Hero image is `fetchpriority="high"` and not lazy-loaded
- [ ] All images have explicit `width`/`height` or Aspect Ratio
- [ ] Total transferred page weight < 1.5MB (excluding video)
- [ ] No JS errors in Console

Run the `divi5-performance` agent on a project for an automated walkthrough.

## When Custom CSS Hurts Performance

| Pattern | Why it's slow | Fix |
|---------|---------------|-----|
| `*` selectors with expensive properties | Repaints entire tree on layout | Scope to specific elements |
| `transform` on `transition: all` | Triggers all property transitions | `transition: transform 0.3s` only |
| `box-shadow` on hover via JS | Triggers paint | Pre-define the shadow, only transition `opacity` of a pseudo-element |
| `filter: blur()` on large elements | GPU-heavy | Apply to small overlays, not full-section backgrounds |
| `position: fixed` with frequent layout updates | Triggers compositor layers | Use `will-change: transform` and animate `transform` only |
| Web font as `font-family` fallback chain miss | Layout shift on swap | Set `size-adjust`/`ascent-override` (see Font Loading section) |

## Common Misconfigurations

### "Divi is slow because of jQuery"
Often blamed, rarely the cause in 5.x. Profile in DevTools Performance tab before blaming jQuery. Most "Divi is slow" issues are unoptimized images or external scripts (analytics, chat widgets, ad networks), not Divi itself.

### "Critical CSS is breaking my site"
Divi's Critical CSS sometimes misses elements that render just below the fold on tablet. Symptoms: flash of unstyled content (FOUC) on a specific module. Fix: add that module's selectors to Theme Options → Custom CSS so they're loaded in the critical bucket.

### "My PageSpeed score dropped after adding the Theme Builder header"
Theme Builder content is dynamically injected — Critical CSS may not include header styles. Add header CSS to Theme Options Custom CSS to make it critical.

## Reference Files

- `${CLAUDE_PLUGIN_ROOT}/skills/divi5-performance/examples/critical-css.css` — Hand-crafted critical CSS template
- `${CLAUDE_PLUGIN_ROOT}/skills/divi5-performance/examples/font-loading.css` — Local @font-face with CLS-prevention overrides
- `${CLAUDE_PLUGIN_ROOT}/skills/divi5-performance/references/core-web-vitals.md` — Full Core Web Vitals reference with Divi-specific causes and fixes

## Resources

- [Divi Dynamic CSS Documentation](https://help.elegantthemes.com/en/articles/5502417-divi-dynamic-css-frontend-performance-feature)
- [Divi Critical CSS Explained](https://www.elegantthemes.com/blog/divi-resources/divi-critical-css)
- [Speed Up Divi: 22 Steps](https://onlinemediamasters.com/divi-slow-loading-website/)
- [web.dev Core Web Vitals](https://web.dev/vitals/)
- [Core Web Vitals 2026 Guide](https://www.digitalapplied.com/blog/core-web-vitals-2026-inp-lcp-cls-optimization-guide)