Wenn Ihre PageSpeed-Analyse den Hinweis zur Optimierung der Reihenfolge von Skripten und Formaten anzeigt, bezieht sich dies darauf, wie der Browser Ihre Seite rendert. Um eine schnelle Anzeige der Inhalte zu ermöglichen („First Contentful Paint“), müssen Ressourcen so eingebunden werden, dass sie das Rendering nicht unnötig blockieren.

Die Grundregeln

  1. CSS gehört in den <head>: Damit der Browser das Layout der Seite direkt beim ersten Durchlauf korrekt aufbauen kann, sollten CSS-Dateien im <head>-Bereich des Dokuments eingebunden werden. Würden sie erst später geladen, käme es zum sogenannten „Flash of Unstyled Content“ (FOUC), bei dem die Seite kurzzeitig ohne Design erscheint.
  2. JavaScript gehört ans Ende oder muss „decoupled“ werden: JavaScript-Dateien blockieren das Laden des HTML-Dokuments, wenn sie „synchron“ geladen werden.
    • Best Practice: Platzieren Sie kritische Skripte, die für das Design nicht sofort benötigt werden, am Ende des Dokuments (vor dem schließenden </body>-Tag).
    • Moderne Lösung: Nutzen Sie die Attribute defer oder async für Ihre <script>-Tags.
      • defer: Das Skript wird parallel geladen, aber erst ausgeführt, wenn das HTML-Dokument vollständig geparst ist. (Empfohlen für die meisten Skripte).
      • async: Das Skript wird geladen, sobald es verfügbar ist, und unterbricht das Parsen des HTMLs zur Ausführung. (Nur für Skripte, die unabhängig von anderen Ressourcen sind).

Fazit zur Optimierung:
Es reicht heute nicht mehr aus, lediglich CSS vor JavaScript zu platzieren. Die entscheidende Optimierung besteht darin, JavaScript-Dateien durch defer oder async vom kritischen Pfad des Renderns zu lösen.