Wer mit Divi 4.x arbeitet, hat im Theme-Backend mehr als den Static-CSS-Schalter zur Performance-Optimierung zur Verfügung. Erweiterte Optionen wie Lazy Load, Critical CSS und JS Defer helfen, diese Dateien gezielt zu verzögern oder priorisiert auszuliefern. Das ist besonders nützlich für Schweizer KMU, die trotz visuell aufwändiger Seiten eine schnelle Ladezeit erreichen wollen.

In diesem Artikel zeige ich dir, was diese drei Optionen genau bewirken, wo du sie in Divi findest und wann du sie aktivieren solltest – und wann lieber nicht.

Die erweiterten Performance-Einstellungen in Divi 4.x

Divi 4.x bündelt die Performance-Optionen unter Divi → Theme Options → General → Performance. Neben der bereits bekannten Static CSS File Generation findest du dort Schalter für Lazy Load, Critical CSS sowie Dynamic Module Framework und Dynamic Assets. Sie alle zielen darauf ab, weniger Daten am Start zu laden und Ressourcen erst dann auszuliefern, wenn sie tatsächlich gebraucht werden.

Diese Einstellungen ergänzen das Caching, das ich im vorherigen Artikel zum WordPress Cache leeren mit Divi 4.x behandelt habe. Caching sorgt dafür, dass Dateien schneller vom Server kommen; Lazy Load, Critical CSS und JS Defer bestimmen, wann diese Dateien geladen werden.

Lazy Load in Divi aktivieren

Lazy Load bedeutet, dass Bilder, Iframes und Videos erst dann geladen werden, wenn sie in den sichtbaren Bereich des Browsers gelangen. Das reduziert die anfängliche Datenmenge und verbessert das Largest Contentful Paint (LCP), weil der Browser sich zuerst auf die Inhalte im sichtbaren Bereich konzentrieren kann.

In Divi 4.x aktivierst du Lazy Load unter:

1. Divi → Theme Options
2. Reiter General
3. Bereich Performance
4. Optionen Lazy Load Images und Lazy Load Videos and Iframes

Für die meisten Seiten ist das ein sinnvoller Schalter. Vorsicht ist nur bei Logos, Hero-Bildern und Call-to-Action-Elementen im sichtbaren Bereich geboten: Wenn das wichtigste Bild über dem Scrollfalten erst später geladen wird, kann sich der LCP-Wert verschlechtern. In solchen Fällen empfehle ich, Lazy Load für Einzelbilder über ein Caching-Plugin oder manuell via HTML-Attribut auszuschliessen.

Critical CSS verstehen und nutzen

Critical CSS bezeichnet diejenigen CSS-Regeln, die für den sichtbaren Bereich einer Seite unbedingt nötig sind. Wenn das Browser diese Regeln schnell zur Verfügung hat, kann er den Inhalt sofort rendern. Weitere Stile werden anschliessend nachgeladen. Divi 4.x kann diesen Schritt automatisieren.

So aktivierst du Critical CSS in Divi 4.x:

1. Gehe zu Divi → Theme Options → General → Performance.
2. Aktiviere Critical CSS.
3. Leere anschliessend den Divi Static CSS Cache, damit die neuen Regeln greifen.
4. Teste die Seite mit PageSpeed Insights.

In der Praxis habe ich gesehen, dass kleinere Seiten mit Critical CSS schneller werden, während komplexe Layouts mit vielen Breakpoints manchmal unstimmig rendern. Wenn das passiert, solltest du eine Stunde damit experimentieren und bei Problemen den Schalter wieder deaktivieren.

Experten-Tipp aus der Praxis: Aktiviere Lazy Load und Critical CSS am besten auf einem Staging-System oder in einer ruhigen Phase. Ändere nie mehrere Performance-Schalter gleichzeitig, sonst weisst du nicht, welcher für ein plötzliches Layout-Problem verantwortlich ist.

Christopher Matt, Matt Interfaces Luzern

JS-Defer, jQuery und Dynamic Assets

Mit Defer können JavaScript-Dateien so verschoben werden, dass sie erst nach dem Rendern der Seite geladen werden. Das beschleunigt den Zeitpunkt, zu dem der Browser die Seite überhaupt anzeigen kann. Divi 4.x bietet zwei zusammenspielende Optionen dafür:

1. Dynamic Module Framework: Lädt nur die JavaScript-Bausteine für Module, die tatsächlich auf einer Seite verwendet werden, statt das gesamte Framework.
2. Dynamic Assets: Lädt nur die CSS- und JS-Dateien, die die sichtbaren Module benötigen. Zusammen mit dem Dynamic Module Framework reduziert das den Datenvolumen pro Seite spürbar.
3. Defer jQuery and jQuery Migrate: Verschiebt jQuery-Abfragen in den footerbereich. Das kann helfen, birgt aber das Risiko, dass ältere Plugins oder engebettete Skripte nicht funktionieren, weil diese auf frühes jQuery angewiesen sind.

In meinen Projekten aktiviere ich Dynamic Module Framework und Dynamic Assets nahezu immer. Den jQuery-Defer-Schalter setze ich nur, wenn ich anschliessend die wichtigsten Interaktionen auf der Seite teste – insbesondere Kontaktformulare, Slider und Popup-Plugins.

Messen und validieren: Core Web Vitals

Die drei wichtigsten Metriken für Google sind Largest Contentful Paint (LCP), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS). Sie sagen aus, wie schnell die grösste sichtbare Inhalt geladen wird, wie flüssig Eingaben reagieren und wie stabil das Layout bleibt.

Metrik	Beschreibung	Guter Wert
LCP	Ladezeit des grössten sichtbaren Elements	unter 2,5 Sekunden
INP	Reaktionszeit auf Nutzerinteraktionen	unter 200 Millisekunden
CLS	Visuelle Stabilität während des Ladens	unter 0,1

Für Diagnosen nutze ich am liebsten PageSpeed Insights, weil es direkt Lab- und Felddaten anzeigt. Alternativ helfen WebPageTest und GTmetrix, wenn ich detaillierte Wasserfalldiagramme benötige.

Empfohlene Einstellungen für Standard-Divi-Websites

Für eine typische Divi-Website in der Schweiz empfehle ich folgende Konfiguration als Ausgangspunkt:

Einstellung	Empfehlung	Hinweis
Static CSS File Generation	An	CSS-Dateien werden optimiert zwischengespeichert.
Lazy Load Images	An	Abstand bei Hero- und Logo-Bildern.
Lazy Load Videos and Iframes	An	Sofern keine essenziellen Above-the-Fold-Iframes genutzt werden.
Critical CSS	Testen	Auf Staging aktivieren, Seite kontrollieren.
Dynamic Module Framework	An	Reduziert geladenes JavaScript.
Dynamic Assets	An	Lädt nur benötigte Stile.
Defer jQuery	Vorsicht	Nach Aktivierung Formulare/Plugins testen.

Wenn du diese Schritte nacheinander umsetztst und nach jeder Änderung die Seite prüfst, minimierst du das Risiko von Darstellungsfehlern erheblich.

Häufig gestellte Fragen

Was bringt Lazy Load bei Divi konkret?

Lazy Load reduziert die Datenmenge beim ersten Seitenaufbau, weil Bilder und Videos erst geladen werden, wenn sie sichtbar werden. Besonders Seiten mit vielen Bildern oder langen Galerien profitieren davon.

Kann Critical CSS die Seite kaputtmachen?

Normal nicht. In seltenen Fällen kann das automatisch extrahierte Critical CSS einzelne Stile vermissen, was zu kurzzeitigen Darstellungsproblemen führen kann. Deshalb ist das Testen im Staging und nach der Aktivierung wichtig.

Muss ich jQuery Defer aktivieren?

Nicht zwingend. jQuery Defer kann die Ladezeit verbessern, führt aber bei älteren Plugins zu Fehlern. Aktiviere den Schalter nur, wenn du anschliessend alle wichtigen Formulare und Interaktionen ausgiebig testen kannst.

Fazit

Lazy Load, Critical CSS und JS Defer in Divi 4.x sind mächtige Hebel, um eine divi performance spürbar zu verbessern. Wer sie gezielt und schrittweise einsetzt, erreicht häufige Core Web Vitals ohne viel Aufwand. Das wichtigste ist, nicht alle Schalter auf einmal zu aktivieren und nach jeder Einstellung den Test mit PageSpeed Insights zu wiederholen.

Wenn du nicht sicher bist, welche Performance-Einstellungen für deine Divi-Website optimal sind, vereinbare ein kostenloses Erstgespräch. Ich helfe dir dabei, die richtigen Hebel zu erkennen und unnötige Komplexität zu vermeiden.

Zuletzt aktualisiert am 26. September 2026 von Christopher Matt, Matt Interfaces Luzern.

Quellen

• Elegant Themes Help Center: Divi Performance Documentation. URL: https://www.elegantthemes.com/documentation/divi/performance/ (abgerufen am 26. September 2026)
• Google Developers: Core Web Vitals. URL: https://developers.google.com/search/docs/appearance/core-web-vitals?hl=de (abgerufen am 26. September 2026)