Blockierende Dateien

Was wir prüfen

Wir zählen im Kopf der Startseite (<head>) die Stylesheets und Skripte, die den Seitenaufbau anhalten:

• Stylesheets, die normal eingebunden sind (<link rel="stylesheet">, ohne reine Druck-Stylesheets),
• Skripte ohne async, defer oder type="module".

Bei mehr als fünf solchen Dateien geben wir einen Hinweis, bei mehr als zehn eine Warnung. Im Bericht siehst Du, wie viele Stylesheets und Skripte es sind.

Warum das wichtig ist

Wenn der Browser im Kopf der Seite auf ein Stylesheet oder ein normales Skript stösst, hält er an: Er lädt die Datei, verarbeitet sie und macht erst dann weiter. Solange sehen Besucher eine weisse Seite.

Bei einer schnellen Leitung fällt das kaum auf. Auf dem Smartphone unterwegs kostet jede Datei aber eine eigene Anfrage mit Wartezeit, und zehn oder zwanzig davon summieren sich schnell zu Sekunden.

Die Ursache ist fast immer dieselbe: Jedes Plugin, jedes Widget und jede Schriftart bringt ein eigenes Stylesheet oder Skript mit, das auf jeder Seite geladen wird, ob es gebraucht wird oder nicht. Ein Kontaktformular-Plugin lädt seine Dateien auch auf der Startseite, wo gar kein Formular ist.

So behebst Du es

1. Ausmisten

Entferne Plugins, Widgets und Schriftschnitte, die nicht gebraucht werden. Jede Datei, die nicht geladen wird, ist die schnellste.

2. Skripte verzögern

Skripte, die nicht für den ersten Bildschirm nötig sind, bekommen das Attribut defer:

<script src="slider.js" defer></script>

3. Dateien zusammenfassen

Statt zehn kleiner Stylesheets lädt der Browser lieber ein oder zwei grössere. Das nennt man «Bündeln» oder «Kombinieren».

WordPress

Leistungs-Plugins wie WP Rocket, Autoptimize, Perfmatters oder LiteSpeed Cache können Skripte verzögert laden, Stylesheets zusammenfassen und Dateien nur auf den Seiten laden, auf denen sie gebraucht werden. Teste nach jeder Einstellung die ganze Website: Menüs, Formulare und Slider reagieren manchmal empfindlich.

Page-Builder

Elementor, Divi und ähnliche Builder haben eigene Leistungsoptionen, etwa «Verbessertes Laden von Assets» oder «CSS dynamisch laden». Schalte sie ein.

Wix, Jimdo, Squarespace

Hier bestimmt der Anbieter, wie Dateien geladen werden. Beeinflussen lässt sich vor allem die Zahl der eingebundenen Apps und Widgets.

So prüfst Du es selbst

Auf pagespeed.web.dev zeigt die Diagnose «Ressourcen beseitigen, die das Rendering blockieren» die betroffenen Dateien mit der Zeit, die sie kosten.

Häufige Fragen

Was ist der Unterschied zwischen «async» und «defer»?

Beide laden ein Skript, ohne den Seitenaufbau anzuhalten. «defer» führt die Skripte in ihrer Reihenfolge aus, nachdem die Seite aufgebaut ist. «async» führt jedes Skript aus, sobald es geladen ist. Für die meisten Website-Skripte ist «defer» die sicherere Wahl.

Lassen sich alle Stylesheets nachladen?

Nicht ohne Weiteres. Ohne Gestaltung würde die Seite zuerst ungestaltet erscheinen. Ein guter Weg ist, wenige zusammengefasste Stylesheets zu laden und nur das Nötigste für den ersten Bildschirm direkt ins HTML zu setzen.