← ClaudeAtlas

divi-5-performancelisted

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.
cjsimon2/Divi5-ToolKit · ★ 38 · Web & Frontend · score 76
Install: claude install-skill cjsimon2/Divi5-ToolKit
# 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 loadi