Render-blockierende Ressourcen

Render-blockierende RessourcenRender-blockierende Ressourcen sind Dateien wie CSS oder JavaScript, die der Browser laden und verarbeiten muss, bevor er die Seite darstellen kann, und so das Rendering verzögern.Zum Glossareintrag → sind Dateien, die der Browser vollständig laden und auswerten muss, bevor er den sichtbaren Inhalt einer Seite darstellen kann. Typischerweise sind das CSSCascading Style Sheets (CSS) ist die Sprache, mit der das Layout und die Gestaltung von Webseiten festgelegt werden. CSS bestimmt unter anderem Farben, Schriften, Abstände und Anordnung.Zum Glossareintrag → (Cascading Style Sheets, die Sprache für das Layout von Webseiten) und JavaScript im oberen Bereich des Dokuments. Sie verzögern das RenderingJavaScript-Rendering bezeichnet den Vorgang, bei dem ein Browser oder Crawler JavaScript-Code ausführt, um daraus die fertige, sichtbare Seite zu erzeugen. Erst nach diesem Schritt entstehen Inhalte, die nicht bereits im ausgelieferten HTML stehen.Zum Glossareintrag → und verschlechtern dadurch den Largest Contentful Paint (LCP)Largest Contentful Paint (LCP) misst, wann das grösste sichtbare Inhaltselement im sichtbaren Bereich geladen ist, und steht damit für die wahrgenommene Ladegeschwindigkeit.Zum Glossareintrag →.

Häufige Massnahmen, um render-blockierende Ressourcen zu reduzieren:

• kritisches CSS früh und priorisiert laden, ungenutztes CSS entfernen,
• CSS minifizieren und sinnvoll bündeln oder splitten,
• nicht kritisches JavaScript mit defer oder async laden,
• überflüssige Skripte entfernen und Drittanbieter-Skripte verzögern.

Render-blockierende Ressourcen erkennt man unter anderem in PageSpeed Insights und LighthouseLighthouse ist ein quelloffenes Diagnosewerkzeug von Google, das Performance, Barrierefreiheit und weitere Qualitätsaspekte einer Seite in einer simulierten Laborumgebung prüft.Zum Glossareintrag →. Ziel ist, dass der für den sichtbaren Bereich nötige Code schnell verfügbar ist und nicht durch unnötige Dateien aufgehalten wird.