Render-blockierende Ressourcen

Silktide prüft auf Stylesheets und Skripte, die der Browser vollständig herunterladen muss, bevor er irgendetwas auf Ihrer Seite anzeigen kann. Jedes einzelne davon lässt Besucher ein wenig länger auf einen leeren Bildschirm starren.

Standardmäßig blockiert ein Stylesheet oder ein Skript, das nahe dem oberen Seitenbereich referenziert wird, das Rendering: Der Browser zeichnet nichts, bis die Datei angekommen ist, weil sie beeinflussen könnte, wie alles aussieht oder sich verhält.

Warum das wichtig ist

Die leeren Augenblicke, bevor eine Seite erstmals erscheint, entscheiden darüber, ob Besucher warten. Jede renderblockierende Datei fügt dieser Leerlaufzeit einen Netzwerk‑Roundtrip hinzu, und die Verzögerungen summieren sich auf Mobilfunkverbindungen schnell – ein paar blockierende Dateien können eine ansonsten schnelle Seite für Sekunden weiß halten.

Das meiste Blockieren ist unnötig. Typischerweise wird nur ein kleiner Teil des einer Seite benötigt, um den ersten Bildschirm zu zeichnen, und das meiste muss nicht laufen, bevor die Seite erscheint.

So beheben Sie das

Laden Sie Skripte ohne zu blockieren, indem Sie defer hinzufügen (oder async für unabhängige Skripte wie Analytics):

<!-- Problem: blockiert das Rendering, bis es heruntergeladen und ausgeführt wurde -->
<script src="app.js"></script>

<!-- Behoben: lädt parallel herunter, wird nach dem Parsen der Seite ausgeführt -->
<script src="app.js" defer></script>

Betten Sie die kleine Menge CSS, die für den ersten Bildschirm benötigt wird, direkt in die Seite ein, und laden Sie die vollständigen Stylesheets ohne zu blockieren.
Geben Sie Stylesheets, die nur in bestimmten Situationen gelten, ein media-Attribut (z. B. media="print"), damit sie das Rendering andernorts nicht blockieren.
Verringern Sie, worauf blockiert werden kann: Entfernen Sie ungenutzte Styles und Skripte und halten Sie den Rest klein – siehe CSS-Minifizierung und Minimiertes JavaScript.

So testet Silktide das

Lädt die Seite in einem echten Browser, mit dem für Ihre Geschwindigkeitstests konfigurierten Gerätetyp, der Verbindungsgeschwindigkeit und dem Teststandort.
Identifiziert jedes Stylesheet und jedes Skript, das die erste Darstellung der Seite blockiert hat.
Schätzt, wie lange jedes davon das Rendering zurückgehalten hat, und meldet jede Datei mit ihrer geschätzten Zeitersparnis.
Bewertet die Seite nach der insgesamt möglichen Zeitersparnis: Rund 100 Millisekunden führen zu einer Abwertung, 200 Millisekunden oder mehr werden als schlecht eingestuft.

Fehlerbehebung

Muss CSS das Rendering nicht blockieren?

Das Stylesheet für den ersten Bildschirm schon – das ist beabsichtigt, damit Besucher keinen ungestylten Inhalt sehen. Die Lösung ist nicht, CSS zu entfernen, sondern das Blockierende zu verkleinern: den kritischen Teil inline einbetten und den Rest nicht blockierend laden.

Die blockierende Datei ist ein Drittanbieter-Skript

Tag-Manager, Schriften und Chat‑Widgets sind häufige Übeltäter. Die meisten funktionieren mit defer oder async einwandfrei – prüfen Sie die aktuellen Einbettungsanleitungen des Anbieters; oft ist dies bereits enthalten.