Render-blockierende Dateien

Was geprüft

Im <head> des HTML werden externe Skripte (mit src) gezählt, die weder async noch defer tragen und kein type="module" sind. Stylesheets im <head> (ohne media="print") werden gezählt, ergeben aber nur einen Hinweis, wenn es mehr als fünf sind.

Wie relevant

Mittel ab einem blockierenden Skript, weil der Browser das Anzeigen anhält, bis das Skript geladen und ausgeführt ist. Lighthouse wertet das ebenso als nicht bestanden, sobald eine Datei die erste Darstellung aufhält. Unter „Was gefunden“ stehen Dateiname und, soweit bekannt, Größe; je größer die Datei und je weiter entfernt der Server, desto länger die Verzögerung. Stylesheets geben keinen Abzug: CSS im <head> ist meist nötig, und eine reine Anzahl belegt keine Verzögerung.

Warum

Blockierende Skripte im <head> verzögern das erste Anzeigen der Seite, besonders wenn sie von fremden Servern kommen oder groß sind. Besucher sehen in dieser Zeit eine leere Seite.

Wie beheben

Ergänzen Sie bei Skripten, die nicht sofort gebraucht werden, das Attribut defer (Ausführung nach dem Einlesen des HTML, Reihenfolge bleibt) oder async (unabhängige Skripte wie Statistik). Alternativ Skripte ans Ende von <body> verschieben.

Nebenwirkung: Mit defer oder async ändern sich Ausführungszeitpunkt und bei async auch die Reihenfolge. Inline-Skripte, die z. B. jQuery sofort erwarten, schlagen dann fehl. Testen Sie Menüs, Slider, Formulare und Einwilligungsbanner nach der Änderung und prüfen Sie die Browser-Konsole auf Fehler.

WordPress: Seit WordPress 6.3 lassen sich Skripte mit der Strategie „defer“ oder „async“ registrieren. Optimierungs-Plugins können Skripte pauschal verzögern; jQuery und Einwilligungs-Skripte brauchen dabei oft eine Ausnahme.

Codebeispiel

HTML

<head>
  <!-- blockiert das Anzeigen -->
  <script src="/js/app.js"></script>

  <!-- besser: nach dem Einlesen des HTML ausführen, Reihenfolge bleibt -->
  <script src="/js/app.js" defer></script>
  <!-- unabhängige Skripte -->
  <script src="/js/statistik.js" async></script>
</head>

PHP (WordPress ab 6.3)

wp_enqueue_script(
    'mein-skript',
    get_stylesheet_directory_uri() . '/js/app.js',
    array(),
    '1.0',
    array( 'strategy' => 'defer', 'in_footer' => false )
);

Weiterführende Quellen

• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script
• https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources
• https://developer.wordpress.org/reference/functions/wp_enqueue_script/