Render-blockierende Ressourcen — so bremsen sie Ihre Seite nicht mehr

Wenn ein Browser eine Seite lädt, muss er auf bestimmte Dateien warten, bevor er überhaupt etwas anzeigt. Das sind render-blockierende Ressourcen — meist CSS und JavaScript im Seitenkopf. Bis sie heruntergeladen und verarbeitet sind, sieht der Besucher einen weißen Bildschirm. Deshalb meldet PageSpeed Insights regelmäßig "Eliminate render-blocking resources" als einen der wichtigsten Punkte.

Warum CSS und JS das Rendern blockieren

CSS ist von Natur aus blockierend: Der Browser zeichnet keinen Inhalt, bevor er weiß, wie er aussieht, denn er will Ihnen keine ungestylte Seite zeigen und dann springen. JavaScript im Kopf ohne Attribut ist noch schlimmer — es stoppt das Parsen des HTML, bis das Skript geladen und ausgeführt ist. Eine Handvoll solcher Dateien fügt dem ersten Aufbau leicht eine Sekunde oder mehr hinzu.

So beheben Sie JavaScript

• Fügen Sie defer zu Skripten hinzu. Das Skript lädt dann parallel und läuft erst, wenn das HTML fertig ist — ideal für die meisten Skripte.
• Nutzen Sie async für unabhängige Skripte. Analytics und ähnliche Dateien, die nicht vom Rest abhängen, können async laufen.
• Entfernen Sie Skripte, die Sie nicht brauchen. Jedes zusätzliche Plugin bringt eigenes JavaScript mit. Weniger ist schneller.
• Verzögern Sie Drittanbieter-Skripte. Chat-Widgets, Karten und Social-Embeds sollten nach dem Hauptinhalt laden.

So beheben Sie CSS

• Binden Sie das Critical CSS inline ein. Extrahieren Sie die Stile für den Bereich oberhalb des Falzes und legen Sie sie direkt ins HTML, damit das Rendern sofort beginnt.
• Laden Sie das übrige CSS verzögert. Unkritische Stile können asynchron laden, damit sie den ersten Aufbau nicht blockieren.
• Entfernen Sie ungenutztes CSS. Themes und Page-Builder laden oft riesige CSS-Dateien, von denen Sie nur einen Bruchteil nutzen.

Ein praktischer WordPress-Ansatz

Sie müssen keinen Code von Hand anfassen — Caching-Plugins wie WP Rocket, LiteSpeed Cache oder W3 Total Cache bieten Ein-Klick-Optionen, um JavaScript zu verzögern und Critical CSS zu erzeugen. Aktivieren Sie sie schrittweise und prüfen Sie nach jeder Änderung, ob die Seite korrekt aussieht, denn zu aggressives Verzögern kann interaktive Elemente zerstören.

Wo Hosting hilft

Das Optimieren der Ressourcen verringert Anzahl und Größe der blockierenden Dateien, doch geladen werden müssen sie trotzdem. Ein schneller Server und ein CDN sorgen dafür, dass diese Dateien in Millisekunden statt Hunderten von Millisekunden ankommen. Auf hochwertigem WordPress-Hosting mit NVMe-Festplatten und kostenlosem CDN startet selbst eine unoptimierte Seite besser. Werfen Sie einen Blick auf unsere Pakete als Fundament und wenden Sie dann defer und Critical CSS für den zusätzlichen Sprung an.

Häufige Fragen

Was ist der Unterschied zwischen defer und async? Defer bewahrt die Reihenfolge und führt Skripte nach dem HTML aus; async führt aus, sobald das Skript geladen ist, ohne Reihenfolgegarantie. Für die meisten Skripte ist defer sicherer.

Kann Critical CSS die Seite zerstören? Bei falscher Extraktion kann es kurz zu ungestyltem Inhalt kommen. Testen Sie deshalb immer nach dem Aktivieren.