WP Rocket: Seite lädt ohne CSS oder sieht kurz kaputt aus – so beheben Sie es
Die Seite erscheint erst als ungestylter Text, das Layout kommt erst beim Scrollen oder Klicken? Welche WP-Rocket-Optionen das auslösen und wie Sie Tempo und Optik zusammenbringen.
Kurz gesagt: Lädt Ihre WordPress-Seite mit WP Rocket zuerst als ungestalteter Text, oder kommt das Layout erst nach einer Bewegung mit der Maus, ist meist eine Optimierungsoption zu aggressiv eingestellt. Die üblichen Verdächtigen sind „Unbenutztes CSS entfernen“, „CSS asynchron laden“ ohne passendes kritisches CSS und „JavaScript-Ausführung verzögern“. Schalten Sie die Optionen einzeln aus, leeren Sie den Cache und testen Sie in einem privaten Fenster. Danach lassen sich gezielte Ausnahmen setzen.
WP Rocket ist eines der bekanntesten Cache-Plugins für WordPress und macht viele Seiten deutlich schneller. Die Kehrseite: Einige Optionen verändern, wann und wie CSS und JavaScript geladen werden. Passt das nicht zum Theme oder Page Builder, sieht der Besucher zuerst eine halbfertige Seite. Für die Ladezeitwerte von Google ist das manchmal sogar besser, für den Menschen vor dem Bildschirm deutlich schlechter.
Typische Symptome
- Beim ersten Aufruf erscheint die Seite kurz als reiner Text mit blauen Links, dann springt das Layout um.
- Menü, Slider oder Animationen funktionieren erst, wenn man die Maus bewegt, scrollt oder tippt.
- Bestimmte Elemente, etwa Icons, Schriften oder Popups, fehlen ganz.
- Für eingeloggte Administratoren sieht alles normal aus, weil WP Rocket für sie standardmäßig keinen Cache ausliefert.
Den letzten Punkt sollten Sie sich merken: Testen Sie immer ausgeloggt oder in einem privaten Fenster.
Die Optionen, die das auslösen
Unbenutztes CSS entfernen (Remove Unused CSS)
WP Rocket analysiert jede Seite und liefert nur das CSS aus, das dort tatsächlich gebraucht wird. Ist das Ergebnis dieser Analyse unvollständig oder entstehen Elemente erst später per JavaScript, etwa Menüs, Slider oder Popups, fehlen deren Stile. Lösung: die betroffenen CSS-Dateien oder Klassen in den Einstellungen als Ausnahme eintragen oder die Option abschalten und stattdessen das kritische CSS nutzen.
CSS asynchron laden und kritisches CSS
Hier lädt WP Rocket zuerst nur ein kleines „kritisches CSS“ für den sichtbaren Bereich und den Rest später. Ist das kritische CSS veraltet oder unvollständig, etwa nach einer Änderung am Theme, entsteht genau der kurze Moment ohne Gestaltung. Lösung: das kritische CSS neu erzeugen lassen und den Cache leeren.
JavaScript-Ausführung verzögern (Delay JavaScript Execution)
Mit dieser Option startet JavaScript erst, wenn der Besucher etwas tut: scrollen, klicken, tippen. Laden Theme oder Page Builder Teile der Gestaltung per JavaScript, erscheinen diese erst nach der ersten Bewegung. Lösung: die Skripte des Themes, des Menüs und des Page Builders von der Verzögerung ausnehmen.
So gehen Sie vor
- Machen Sie sich eine Notiz, welche Optionen aktiv sind.
- Schalten Sie unter „Dateioptimierung“ die Optionen nacheinander ab. Leeren Sie nach jeder Änderung den Cache und testen Sie in einem privaten Fenster.
- Sobald die Seite korrekt aussieht, wissen Sie, welche Option schuld war.
- Schalten Sie die übrigen Optionen wieder ein und setzen Sie für die schuldige Option Ausnahmen, statt sie dauerhaft auszuschalten, wenn möglich.
- Leeren Sie auch weitere Caches: den des Hosters und gegebenenfalls Cloudflare.
Wenn nichts hilft
Manchmal ist die Seite selbst das Problem: ein Theme mit sehr viel CSS, mehrere Page-Builder-Erweiterungen und ein Dutzend Plugins, die alle eigene Dateien laden. Dann kann ein Cache-Plugin nur noch Symptome lindern. Auf Dauer bringt eine schlankere Seite mehr Tempo als die nächste Optimierungsoption. Mehr dazu in WordPress ohne Pagebuilder.
Professionelle Hilfe
Ich richte Caching so ein, dass die Seite schnell ist und trotzdem vom ersten Moment an richtig aussieht, und finde die eigentlichen Bremsen im Theme und in den Plugins. Mehr unter Website schneller machen, ab 490 € netto.
