Render-Blocking beseitigen: CSS und JavaScript entschlacken

Sie haben Ihre Bilder komprimiert, ein gutes Hosting gewählt, und trotzdem zeigt der Geschwindigkeitstest eine Warnung: «Render-blockierende Ressourcen». Klingt nach einem Problem für Spezialisten, ist aber im Kern ganz einfach zu verstehen. Und genau hier steckt oft die letzte Sekunde, die zwischen einer schnellen und einer wirklich schnellen Seite liegt.

Ich erkläre Ihnen ohne Fachjargon, was Render-Blocking bedeutet, warum es Ihre Seite ausbremst und wie man die kritischen Ressourcen so optimiert, dass Inhalte sofort erscheinen.

Was bedeutet Render-Blocking überhaupt?

Wenn jemand Ihre Seite aufruft, lädt der Browser nicht einfach den Text und zeigt ihn an. Zuerst will er wissen, wie alles aussehen soll, also lädt er die Gestaltungsdateien (CSS) und oft auch Programmcode (JavaScript). Solange diese Dateien nicht fertig geladen und verarbeitet sind, zeigt der Browser gar nichts an. Der Bildschirm bleibt weiss.

Genau das meint «Render-Blocking»: Eine Datei blockiert die Darstellung. Der Besucher wartet vor einer leeren Seite, obwohl der eigentliche Inhalt längst da wäre. Bei einer einzigen kleinen Datei merkt man das kaum. Bei einem Baukasten, der ein Dutzend Stylesheets und ebenso viele Skripte lädt, werden daraus schnell ein, zwei verlorene Sekunden, und in dieser Zeit sind viele Besucher schon wieder weg.

Warum gerade CSS und JavaScript bremsen

Die beiden Dateitypen blockieren aus unterschiedlichen Gründen, und das ist wichtig zu verstehen:

• CSS blockiert die Darstellung, weil der Browser nicht eine unfertige, springende Seite zeigen will. Lieber wartet er, bis er weiss, wo alles hingehört.
• JavaScript blockiert, weil der Browser nicht weiss, ob das Skript gleich die ganze Seite umbaut. Also hält er an und führt es zuerst aus, bevor er weitermacht.

Das Tückische: Oft wird Code geladen, der für den ersten Anblick gar nicht nötig ist. Ein Skript für ein Kontaktformular ganz unten auf der Seite hält trotzdem die Überschrift ganz oben auf. Das ist, als würde man die ganze Bestellung warten lassen, weil eine Beilage noch in der Küche steht.

Wie Sie Render-Blocking erkennen

Sie müssen dafür kein Entwickler sein. Geben Sie Ihre Adresse bei Google PageSpeed Insights ein, ein kostenloses Werkzeug von Google. Im Bericht erscheint unter den Empfehlungen oft der Punkt «Render-blockierende Ressourcen eliminieren». Dort sehen Sie sogar, welche Dateien es betrifft und wie viel Zeit sich einsparen liesse.

Ein zweiter Anhaltspunkt: Wenn Ihre Seite beim Laden kurz weiss bleibt und dann mit einem Ruck alles auf einmal erscheint, ist das ein klassisches Zeichen für blockierende Ressourcen.

Wie man kritische Ressourcen optimiert

Die gute Nachricht: Man muss nicht alles auf einmal laden. Es gibt bewährte Wege, dem Browser zu sagen, was wirklich sofort gebraucht wird und was warten kann:

• Das Wesentliche zuerst: Nur jenes CSS sofort laden, das für den oberen, sichtbaren Bereich nötig ist. Der Rest kommt nach. So erscheint der erste Eindruck augenblicklich.
• JavaScript verschieben: Skripte, die nicht für die erste Anzeige gebraucht werden, lädt man «verzögert» (mit den Angaben defer oder async). Der Browser zeigt dann erst die Seite und kümmert sich danach um den Code.
• Ballast weglassen: Vieles blockiert nur, weil es überhaupt geladen wird, obwohl es niemand braucht. Ungenutzte Plugins, alte Schriftarten, vergessene Skripte, raus damit.
• Dateien zusammenfassen und verkleinern: Statt zwölf kleiner Dateien lieber wenige, schlanke. Jede einzelne Anfrage kostet Zeit.

Sie merken das Muster: Es geht weniger darum, etwas Magisches einzubauen, als darum, Überflüssiges wegzulassen und die Reihenfolge richtig zu setzen. Genau hier hat eine handgebaute Seite einen Vorteil, sie trägt von Anfang an keinen Ballast mit, den man später mühsam wieder loswerden muss.

Wie viel bringt das wirklich?

Render-Blocking zu beseitigen wirkt direkt auf das, was Google und Ihre Besucher am stärksten spüren: wie schnell der erste Inhalt erscheint. Das verbessert die Core Web Vitals und damit Ihr Ranking, vor allem aber den Eindruck beim Menschen vor dem Bildschirm. Eine Seite, die sofort etwas zeigt, fühlt sich schnell an, selbst wenn im Hintergrund noch etwas nachlädt.

Wenn Sie tiefer in das Thema Geschwindigkeit einsteigen möchten, finden Sie in meinen weiteren Beiträgen auch eine verständliche Erklärung der Core Web Vitals und der häufigsten Ladezeit-Bremsen.

Klein im Aufwand, gross in der Wirkung

Render-Blocking gehört zu den Dingen, die unsichtbar wirken: Niemand sieht den blockierenden Code, aber alle spüren die Wartezeit. Es zu beseitigen kostet meist überschaubaren Aufwand und bringt einen spürbaren Sprung, gerade auf dem Handy, wo Geduld am knappsten ist.

Wenn Ihr Geschwindigkeitstest blockierende Ressourcen meldet und Sie nicht sicher sind, was sich gefahrlos entfernen oder verschieben lässt, schaue ich gern für Sie hinein. Melden Sie sich einfach über das Kontaktformular, ich sage Ihnen ehrlich, wo bei Ihrer Seite das grösste Tempo zu holen ist.