Lange Zeit war die primäre Optimierung der Geschwindigkeit in Bezug auf CSS die Zusammenfassung in eine einzelne Datei, um möglichst wenig HTTP-Anfragen zu generieren, da jede Anfrage einen erneuten Verbindungsaufbau darstellt und dies benötigt Zeit. Je umfangreicher die Style-Informationen per CSS werden, desto mehr Ressourcen benötigt der Webbrowser, um diese Informationen zu verarbeiten und die Website darzustellen. Daher ist eine intelligente Aufteilung der beste Weg, um eine schnelle Ladezeit einer Website zu erreichen.

Priorisierung

Für eine schnelle Seitendarstellung müssen die einzelnen Bereiche unterschiedlich priorisiert werden. Am wichtigsten ist dabei alles „Above the Fold“. Der Begriff „Above the Fold“ kommt aus dem Bereich der klassischen Zeitung und beschreibt bei einer zugefalteten Zeitung den sichtbaren Bereich über der Faltkante. Diesen Teil konnten potenzielle Leser im Vorbeigehen erkennen und so zu einem Kauf animiert werden. Daher waren dort die interessantesten Inhalte untergebracht. Bei Websites verhält es sich ganz ähnlich. Im direkt sichtbaren Bereich muss dem Nutzer klar kommuniziert werden, um was es geht und damit soll der Nutzer auf der Seite gehalten werden.

Bei der Geschwindigkeitsoptimierung geht es darum, die Elemente im direkten sichtbaren Bereich zu priorisieren, um die Ladegeschwindigkeit einer Website für die Besucher zu erhöhen. Daher muss eine Aufteilung in zwei separate CSS-Dateien durchgeführt werden, eine für den Inhalt „Above the Fold“ und eine andere mit den restlichen Inhalten. Die Schwierigkeit ist dabei zu beurteilen, welche Anweisungen für die erste Darstellung wichtig sind. Natürlich zählt dazu der gesamte Bereich des Headers mit dem Menü und dem Logo. Bei mir kommen noch zusätzlich die Header-Fotos eines Artikels und die wichtigsten Elemente des Inhaltsbereiches wie die Formatierung des Textes und der Überschriften dazu. Diese CSS-Datei wird dann ganz normal im Head-Bereich der HTML-Seite geladen und somit priorisiert.

JavaScript Ladefunktion

Nun muss die zweite Datei geladen werden, ohne dass der Webbrowser die Ausgabe verzögert. Es gibt zwar auch die Methode rel=“preload“, allerdings wird sie nicht von allem Webbrowsern unterstützt. Daher wird die zweite CSS-Datei per JavaScript eingebunden, entweder in einer externen JS-Datei oder ganz am Ende der Seite vor dem schließenden Body-Tag als inline Code. Dies sorgt für eine verbesserte Ladezeit, da der Webbrowser nicht erst die CSS-Datei analysiert und dann weiterarbeitet. Stattdessen wird sie nach dem eigentlichen Ladevorgang der Seite eingebunden und dann anschließend vom Webbrowser geladen und verarbeitet.

Laden bei Bedarf

Eine weitere Methode, um die Geschwindigkeit einer Website zu erhöhen, ist das gezielte Laden von CSS-Dateien bei Bedarf. Zum Beispiel gibt es Elemente, die nicht auf allen Seiten vorkommen, und zum Teil größere Konstrukte, die nur einmal vorkommen. Werden diese CSS-Anweisungen immer geladen, erhöht das die Größe der CSS-Dateien. Gleichzeitig werden vom Webbrowser bei jedem Seitenaufruf Anweisungen interpretiert, die eigentlich irrelevant sind. Daher kann mit JavaScript überprüft werden, ob ein Element existiert und dann die entsprechende extra CSS-Datei laden.

if(document.querySelector("#element")){
  var c = document.createElement('link');
  c.rel = 'stylesheet';
  c.href = 'element.css;
  document.getElementsByTagName('body')[0].appendChild(c);
}

Fazit CSS Performance

Mit diesen vorgestellten Methoden kann die Geschwindigkeit einer Website gezielt erhöht werden. Gleichzeitig wird von dem Konzept abgerückt, dass nur möglichst wenig HTTP-Anfragen gestartet werden sollten. Aber gerade Laden bei Bedarf reduziert für alle Besucher die zu übertragende Dateigröße, da heutzutage häufig genügend Bandbreite zur Verfügung steht und mit der Verwendung von HTTP/2 spielt die Übertragung keine so große Rolle mehr. Häufig fällt die Reduzierung der Arbeit für den Webbrowser für die Optimierung der Geschwindigkeit der Website mehr ins Gewicht.