Das google PageSpeed Insights Tool bringt folgende Meldung zu diesem Punkt: “Für Ihre Seite sind zusätzliche Netzwerk-Roundtrips erforderlich, um die ohne Scrollen sichtbaren Inhalte (“above the fold”-Inhalte) darstellen zu können. Reduzieren Sie die zur Darstellung von “above the fold”-Inhalten erforderliche HTML-Menge, um eine optimale Leistung zu erzielen.“
Gemeint ist damit, das alle CSS-Angaben für den sichtbaren Bereich bei dem Öffnen der Seite (ohne Scrollen), im Header inline eingebunden werden sollen. Alle restlichen CSS Angaben können später, auch außerhalb des HTML-Befehles nachgeladen werden.
Dies ließe sich sehr einfach umsetzen. Doch stellt es viele Webmaster die ein CMS und unterschiedliche Design-Elemente verwenden vor große Probleme. Wer z.B. unterschiedliche Design-Ansätze für verschiedene Bereiche wie Startseite, Kategorie-Seiten und Detailseiten nutzt, der kann dies nur mit verschiedenen Templates realisieren. Bei einigen CMS kann man so sehr schnell an die Grenzen des technisch machbaren stoßen.
Lösung Sichtbare Inhalte priorisieren
Wenn Ihr bisher Eure CSS-Dateien mittels<link rel="stylesheet" href="style.css">
in dem HEAD-Bereich eingebunden habt, dann analysiert als erstes welche CSS-Befehle Ihr zwingend für die Darstellung der Webseite (ohne zu Scrollen) benötigt. Diese CSS-Befehle schneidet Ihr aus der CSS-Datei heraus und bindet diese z.B. mittels<style>.wrapper{color:blue;}</style>
in das Template ein.
Die restlichen CSS-Befehle werden anschließend mit der CSS-Datei nach dem geschlossenen HTML-Befehl im Quellcode nachgeladen. Dazu kann der bekannte nachfolgende Befehl verwendet werden:<link rel="stylesheet" href=" style.css">
Beachtet dabei dass Eurer verwendetes Design auch ohne zu scrollen und mit scrollen, in unterschiedlichen Browsern funktioniert. Wenn dies technisch nicht lösbar ist, dann lasst diesen Optimierungspunkt lieber aus.
