Skill
divi5-compatibility
Use this skill when validating CSS for Divi 5 / Divi 5.11 compatibility, checking unsupported features or units, troubleshooting Divi CSS that isn't applying,…
@cjsimon2View SkillDevelopment
Skill
/divi5-performance
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
Install
$ npx -y skills add cjsimon2/Divi5-ToolKit --skill divi5-performance --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/divi5-performance
Context preview
The summary Claude sees to decide when to auto-load this skill.
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
SKILL.md
divi5-performance.SKILL.mdname: 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.11.0 (August 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).
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 cri
Read more
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.11.0 (August 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).
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 cri
Ships withdivi5-toolkit
The first Claude Code plugin for Divi 5 development. Validates CSS compatibility, generates Divi-ready code, scaffolds page sections, audits project health, checks accessibility, audits Core Web Vitals performance, diagnoses symptoms, learns from errors, and
Get the whole plugin
Other skills on divi5-toolkit.
@cjsimon2View SkillSkill
divi5-css-patterns
Use this skill when writing CSS for Divi 5 / Divi 5.11, styling Divi modules (buttons, sections, rows, blurbs, toggles, forms including the 5.3 Contact Form 7…
@cjsimon2View Skill