Was render-blockierende Ressourcen sind
Render-blockierende Ressourcen sind Skripte und Stylesheets, auf die der Browser warten muss, bevor er etwas anzeigt. Je weniger es sind, desto früher sehen deine Besucher Inhalt.
So funktioniert es
Der Browser liest das HTML von oben nach unten. Trifft er auf ein <script src="…"> ohne weitere Angabe, hält er an, lädt das Skript, führt es aus und liest erst dann weiter. Steht das Skript im Kopf der Seite, bleibt der Bildschirm so lange leer.
Stylesheets halten das Lesen nicht an, aber das Zeichnen: Der Browser zeigt nichts, bevor er alle Stylesheets hat, die für den Bildschirm gelten. Sonst würde die Seite erst ungestaltet erscheinen und dann umspringen.
bytereport zählt Skripte im Kopf der Seite ohne defer, async oder type="module" und alle Stylesheets außer denen fürs Drucken. Schon ein blockierendes Skript oder mehr als drei Stylesheets ergeben eine Warnung, mehr als drei blockierende Skripte oder mehr als sechs Stylesheets einen Fehler.
Worauf es ankommt
deferals Standard. Das Skript lädt parallel und läuft, wenn das HTML gelesen ist. Die Reihenfolge mehrerer Skripte bleibt erhalten.asyncfür Unabhängiges. Das Skript läuft, sobald es da ist, ohne feste Reihenfolge. Passend für Dinge wie eine Besucherstatistik, auf die kein anderes Skript wartet.- Wenige Stylesheets. Fasse sie zu einer oder wenigen Dateien zusammen. Stylesheets nur fürs Drucken bekommen
media="print", dann warten Browser nicht darauf. - Ausnahmen bewusst. Manche Skripte, etwa ein Consent-Tool, sollen laut Anbieter früh und ohne
deferladen. Dann bleibt es bei diesem einen.
<script src="/js/app.js" defer></script>
<script src="/js/statistik.js" async></script>
<link rel="stylesheet" href="/css/print.css" media="print">Wer weiter gehen will, schreibt das CSS für den ersten Bildschirm direkt ins HTML und lädt den Rest später. Das ist Feinarbeit und lohnt sich erst, wenn das Übrige erledigt ist.
So richtest du es ein
Skripte und Stylesheets im Kopf der Seite setzt das Theme oder Template, dazu kommen Plugins und eingebundene Dienste. Viele CMS-Plugins zur Optimierung können defer ergänzen und Stylesheets zusammenfassen; prüf danach, ob alles noch funktioniert. Bei eigenen Templates ändert deine Agentur die Einbindung. Die Details nennen jede blockierende Datei.