Performance

Bei Webseiten versteht man unter dem Begriff Performance die Ladegeschwindigkeit bzw. die Rechenleistung eines Servers, also die Geschwindigkeit, mit welcher Daten von Server zu Client übertragen werden.

Gründe für eine gute Performance

Eine Webseite, die langsam lädt, kann potentielle Kunden zum Abbruch animieren. Um eine fließende Interaktion zu gewährleisten, sollte proaktiv etwas für eine gute Performance getan werden. Gerade bei der steigenden Nutzung von mobilen Endgeräten ist ein positiver Eindruck durch unauffälliges, schnelles Laden besonders wichtig, um den Besucher zum Kunden zu konvertieren. Wenn eine Seite langsam lädt, verlässt der Besucher sie und klickt möglicherweise das Suchergebnis des Wettbewerbers an. Die Performance einer Seite nimmt an Bedeutung zu, denn die Internetseiten werden größer, und die Netze durch höhere Belastung langsamer.

Vorteile guter Performance

Eine flüssige Interaktion mit einer Webseite hält Besucher auf der Seite und schafft Vertrauen. Gleichzeitig können Betriebskosten gesenkt werden. Durch bessere Performance wird zudem der Page Speed verringert, was einen positiven Effekt auf das Ranking bei Suchmaschinen haben kann.

Optimierungsmöglichkeiten

Es gibt viele Möglichkeiten, die Performance von Webseiten zu verbessern. Hier sind nur einige aufgeführt, die in Summe einige Sekunden ausmachen können. Nicht jede Methode macht bei jeder Seite Sinn, weshalb vor einer Durchführung immer geprüft werden sollte, ob sich der Aufwand lohnen kann.

Nutzung des Browser Caches

Es besteht die Möglichkeit, Dateien im Cache - also dem Zwischenspeicher auf Clientseite - abzulegen. Wird beispielsweise ein Bild beim ersten Besuch der Seite im Cache gespeichert, so kann es beim zweiten Besuch von dort aus geladen werden. Die Seite wird dadurch schneller aufgebaut, weil das Bild nicht mehr übertragen werden muss. Dieses Zwischenspeichern ist nur sinnvoll, wenn es sich um Dateien handelt, die sich nicht häufig ändern. Zur Durchführung muss ein entsprechender Eintrag in der .htaccess-Datei gemacht werden.

vorheriges Komprimieren mit GZip

Eine weitere Möglichkeit, die Ladezeit zu reduzieren, ist das Komprimieren der Daten, bevor der Server sie sendet. Dies geschieht mit Hilfe von GZip in der .htaccess-Datei. Es lassen sich unter anderem HTML, CSS sowie JavaScript komprimieren. Zusätzlich können vorher noch White Space und Kommentare entfernt werden. Der Empfang von solchen komprimierten Seiten wird von gängigen modernen Browsern unterstützt. Es ist möglich, die Ladezeit durch GZip zu halbieren.

Reduktion von HTTP Requests

Jedes Seitenelement bedeutet ein HTTP Request. Ein Browser kann zwischen zwei und acht dieser Elemente gleichzeitig laden, alle anderen kommen in eine Art Warteschlange. Dadurch dauert es länger, eine Seite komplett zu laden, unabhängig von der zur Verfügung stehenden Bandbreite.

• Die Anzahl der HTTP Requests kann reduziert werden, indem bestimmte Seitenelemente zusammengefasst werden. Häufig genutzte Graphiken können zu einer Einheit vereinigt werden, was zum Beispiel bei Navigationselementen Sinn macht. Dieses Prinzip heißt CSS-Sprites, weil mit Hilfe von CSS beschrieben wird, wann welche Elemente sichtbar sind. Alternativ ist aber auch die Verwendung von JavaScript möglich.

• Mehrere CSS-Dateien oder JavaScript Libraries können zu einer einzigen vereint werden.

• Zudem hilft die Entfernung von alten, unnötigen Dateien bei der Reduktion der HTTP Requests. Elemente ohne Funktion sind entbehrlich und verursachen nur überflüssige Requests.

Einen weiteren Vorteil von weniger Requests birgt der Fakt, dass jede einzelne Datei ihren eigenen Header hat. Dieser muss bei jedem Request mitgesendet werden, weshalb ein Zusammenfassen von Graphiken oder CSS-Dateien Sinn macht.

Dateigrößen klein halten

Um die gesamte zu übertragende Datenmenge zu verringern sollten Dateien klein gehalten werden. Steigende Bandbreiten sind kein Gegenargument, denn in der heutigen Zeit muss mit Besuchen über mobile Endgeräte gerechnet werden.

• Eine Möglichkeit Dateigrößen zu verringern ist das Vermeiden von Wiederholungen. Sowohl CSS- als auch JavaScript-Code enthält häufig Absätze, die an anderen Stellen nochmals auftreten. Werden diese geschickt ausgelagert, können alle Wiederholungen gekürzt werden und die Datei verliert an Größe.

• Weiteres Potential für die Verringerung der Datei-Größe bieten Steuerzeichen. Ein Programmierer achtet im Idealfall auf die Lesbarkeit des Codes, wodurch Tabs, Leerzeilen und Zeilenumbrüche entstehen. Das sind Zeichen, die unnötigerweise mit übertragen werden. Spezielle Tools ermöglichen es, CSS-, JavaScript- oder auch HTML-Dateien automatisch von überflüssigen Zeichen zu befreien. Die entstandene Version ist kaum zum Arbeiten zu gebrauchen, doch sie ist kleiner als die strukturierte Variante und deshalb besser geeignet fürs Versenden.

• Viel Einsparungspotential bieten Graphiken. Hier kann die Dateigröße sehr stark beeinflusst werden, indem bewusst Qualität reduziert wird. Das Format kann beim Abspeichern selbst gewählt werden, die Größe sollte genau die sein, in der die Graphik angezeigt wird und auch beim Komprimieren können Parameter verändert werden, die Einfluss auf die Datei-Größe haben (JPEG 85% ergibt eine kleinere Datei, als JPEG 100%).

Cookies überprüfen

Auch Cookies beeinflussen die Performance. Jeder Cookie und jede Information in einem Cookie sollte nur dann existieren, wenn es auch Sinn macht. Werden zum Beispiel gewonnene Daten von vorn herein nicht verwendet, kann auf ein Versenden verzichtet werden.

CSS-Selektoren

Kleine Optimierungen sind auch in CSS-Stylesheets möglich. Der Grund ist, dass CSS-Selektoren unterschiedliche Verarbeitungszeiten haben. Gut geeignet sind ID (#) und class(.), langsamer hingegen sind der Wildcard-Selector (*) und der Descendant-Selector (>). Eine weitere Kleinigkeit ist der @import-Befehl - er kann bei einigen Browsern das weitere Laden blockieren, bis die importierte Datei selbst geladen ist.

Bedeutung für die Suchmaschinenoptimierung

Der Page Speed ist ein bestätigter Rankingfaktor und somit ist die Performance aus SEO-Sicht unerlässlich. Dazu kommt, dass Besucher sehr schnell Seiten verlassen, die langsam laden. Hierbei kann es auf Millisekunden ankommen. Große Webseiten haben oftmals den Einfluss der Performance auf das Kundenverhalten getestet. Amazon beispielsweise verzögerte absichtlich das Laden der Produktseiten um 100ms. In Folge sanken die Verkaufszahlen um ein Prozent.

Bei einer Untersuchung von Yahoo wurde das Laden der Startseite um 400ms verlangsamt, was zur Folge hatte, dass neun Prozent der Besucher noch vor dem Beenden des Ladens die Seite geschlossen haben. Die Shopping-Suchmaschine Shopzilla hat durch Performance-Optimierung die Ladezeit um 3,5 Sekunden gesenkt. Die Umsätze sind daraufhin um zwölf Prozent gestiegen.

Die Optimierung der Performance geschieht also im Sinne der Suchmaschinenoptimierung. Zum Vergleich bietet es sich an, mit entsprechenden Tools auch die Mitbewerberseiten zu bewerten. Das entsprechende Tool von Google heißt beispielsweise Insights. Es kann eine URL angegeben werden, die auf SiteSpeed getestet wird. Der Benutzer bekommt dann Vorschläge generiert, wie er die Ladegeschwindigkeit verbessern kann.

Weblinks

• HTTP Requests minimieren
• Webseiten Performance erhöhen - Ladezeit verbessern
• CSS Sprites - HTTP Requests einsparen
• Ryte Magazine: Tipps für bessere Website Performance