Wenn der Browser deine Seite lädt, liest er den HTML-Code Zeile für Zeile. Trifft er auf <script src="grosse-datei.js"> oder <link rel="stylesheet">, stoppt er alles andere, lädt die Datei herunter und führt sie aus.
Erst dann rendert er den Rest der Seite. Das ist “Render-Blocking”.
Im Jahr 2026, wo Core Web Vitals zählen (besonders LCP - Largest Contentful Paint), musst du das beheben.
1. JavaScript: Async und Defer
Alte Schule sagte: “Skripte in den Footer (wp_footer)”.
Neue Schule sagt: “Nutze Attribute”.
<script async>: Lädt im Hintergrund, führt sofort nach Download aus (riskant bei Abhängigkeiten, z.B. jQuery).<script defer>: Lädt im Hintergrund, führt erst nach HTML-Laden aus (sicher, bewahrt Reihenfolge).
Wie fügt man defer in WordPress hinzu? Caching-Plugins (WP Rocket, Autoptimize, LiteSpeed Cache) haben eine “Defer JS” Option. Aktiviere sie.
Das löst normalerweise 90% der JS-Probleme.
2. CSS: Critical CSS
CSS ist schwieriger. Du kannst es nicht “verzögern”, weil die Seite kurzzeitig wie “roher Text” aussieht (ungestylt - FOUC-Effekt).
Die Lösung ist Critical CSS.
- Nimm nur das CSS, das für “Above the Fold” Inhalt (sichtbar ohne Scrollen) nötig ist.
- Füge es inline in
<style>im Header ein. - Lade den Rest des CSS (Footer, untere Abschnitte) asynchron im Hintergrund.
Die meisten modernen Optimierungs-Plugins generieren Critical CSS automatisch.
Strategie-Zusammenfassung
- JS: Alles mit
defer(außer absolut kritische Analytics/Cookie-Skripte). - CSS: Critical CSS inline + Rest asynchron.
- Fonts: Nutze
font-display: swap.
So sieht der Nutzer Inhalte sofort, während schwere Galerie- oder Karten-Skripte im Hintergrund laden.
