| 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), 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.6's per-page component CSS, Section 5.5 Aspect Ratio for CLS prevention, and the per-module helper class pattern for lazy-loading. |
| user-invocable | false |
Divi 5 Performance Optimization
Divi 5 Version: 5.6.0 (May 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.
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:
- 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).
- 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.
- Render-blocking fonts — Web fonts blocking text paint. Fix: host locally, preload the heading font, set
font-display: swap.
- 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:
- Heavy JavaScript on first interaction — Divi's jQuery, slider scripts, animation scripts. Fix: enable Divi's "Defer jQuery" option, defer non-critical Divi scripts.
- Long animation chains — Stagger animations on scroll/click can block the main thread. Fix: use CSS animations (compositor-only properties) instead of jQuery effects.
- 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.
- 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.
- 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.
- Dynamic content injection — ads, related posts, comments. Fix: reserve space with
min-height or aspect-ratio.
- 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).
.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.
Steps
- Disable Google Fonts in Divi — Theme Options → General → Use Google Fonts → No
- Download only used weights from google-webfonts-helper or Google Fonts
- Convert to WOFF2 (smallest format, broad support)
- Define in CSS:
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/wp-content/fonts/inter-400.woff2') format('woff2');
size-adjust: 107%;
ascent-override: 90%;
descent-override: 22%;
}
- Preload the heading font (the one in the LCP element):
<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:
.et_pb_section.lazy-bg {
background-image: none !important;
}
.et_pb_section.lazy-bg.is-visible {
background-image: var(--bg-image) !important;
}
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
<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)
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":
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
