Tobias Scheible Cyber Security & IT-Forensik Dozent
Geschindigkeit - Performance

Website Performance von CSS verbessern

Die Zusammenfassung von mehreren CSS-Dateien und die Aufteilung in eine Version mit den Elementen „Above the Fold“ ist mittlerweile Standard. Die Frage ist nur, wie die restlichen CSS-Anweisungen am effizientesten geladen werden können. Darauf gibt dieser Artikel Antworten und zeigt Beispiellösungen.

Mittwoch, 28. August 2019
0 Kommentare

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

Above the Fold

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.

Aufteilung

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.

Über Tobias Scheible

Tobias Scheible

Hallo, mein Name ist Tobias Scheible. Ich bin begeisterter Informatiker und Sicherheitsforscher mit den Schwerpunkten Cyber Security und IT-Forensik. Mein Wissen teile ich gerne anhand von Fachartikeln hier in meinem Blog und in meinem Fachbuch. Als Referent halte ich Vorträge und Workshops für Verbände und Unternehmen u. a. auch offene Veranstaltungen für den VDI und die IHK.

Kommentare

Es wurde noch kein Kommentar abgegeben.

Schreibe einen Kommentar!

Hilfe zum Kommentieren und Hiweise

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen, eine Gefährdung anderer Besucher darstellen oder keinen sinvollen Inhalt beinhalten, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und damit ich direkt Kontakt aufnehmen kann. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

Ihre E-Mailadresse wird nicht veröffentlicht. Mit dem Absenden anerkennen Sie die Datenschutzhinweis des Blogs.