Ladezeit & Technik

Render-blockierende Ressourcen.

Render-blockierende Ressourcen sind Dateien, auf deren Verarbeitung der Browser vor der Darstellung warten muss. Dazu gehören häufig Stylesheets. Bestimmte JavaScript-Einbindungen können außerdem das Einlesen der Seite aufhalten und damit die Darstellung verzögern.

Warum ist das wichtig?

Eine HTML-Datei kann bereits angekommen sein, während der sichtbare Inhalt noch wartet. Deshalb reicht es für eine schnelle Seite nicht, nur die Serverantwort zu verbessern.

Ein Beispiel

Eine einfache Kontaktseite lädt dieselben großen Stylesheets wie ein umfangreicher Shop. Der Browser muss zunächst Regeln verarbeiten, von denen er dort nur einen kleinen Teil braucht. Wird die unnötige Abhängigkeit entfernt, kann die Seite früher sichtbar werden. Wie viel das bringt, muss gemessen werden.

Worauf kommt es an?

Prüfen Sie im Netzwerk-Wasserfall, welche Dateien den ersten sichtbaren Inhalt aufhalten. Entfernen Sie ungenutzte Abhängigkeiten und laden Sie Ressourcen passend zu ihrer Aufgabe. Benötigtes CSS blind zu verzögern kann sichtbares Flackern auslösen.

Typische Fehler

  • Alle Skripte ohne Funktionsprüfung verzögern.
  • Messwerte verbessern, indem Inhalte zunächst ungestaltet oder unbedienbar erscheinen.

Weiterlesen

Passende Leistung: WordPress-Entwicklung & Performance

Quelle: MDN: Render-Blocking