Tipps für bessere Website Performance

Stell Dir vor, Du surfst im Internet und willst Deinen nächsten Urlaub online buchen, aber die Seite wird Dir nur langsam Stück für Stück angezeigt. Du wartest, scrollst, wartest und verlässt schließlich nach 10 Sekunden genervt die Webseite, um einen anderen Online-Reiseanbieter zu suchen.

Laut dieser Studie von Akamai kann eine langsame Ladezeit einer Webseite das Verhalten der Suchenenden negativ beeinflussen und potentielle Kunden abschrecken. Ganze 57 % der Suchenden warten nur drei Sekunden oder auch weniger, bevor sie die Seite wieder verlassen. Zwei Drittel der 18- bis 24-Jährige erwarten laut der Studie sogar eine Ladezeit von maximal zwei Sekunden.

Wieso liegt die durchschnittliche Ladezeit von Webseiten heute trotzdem bei etwa 8 Sekunden? (uxmag, 2014)

Die Antwort: Heutige Webseiten sind im Vergleich, alleine zum vorherigen Jahr, größer und langsamer wie ein Beitrag von Webperformancetoday (2014) zeigt. Dies belegt eine Trendstudie von httparchive, die den Anstieg der Durchschnittsgröße einer Webseite von Februar 2013 - Februar 2014 aufzeigt.

Abbildung 1: Durchschnittsgröße einer Webseite von 15.02.2013 - 15.02.2014

Im Folgenden zeigen wir Dir die wichtigsten Aspekte der Performance Analyse einer Website und geben 4 wichtige Tipps, die Du bei der Optimierung beachten solltest.

Was ist Website Performance und wieso ist sie wichtig?

Die Performance wird vom Wirtschaftslexikon Gabler als Verarbeitungsleistung eines Computers definiert. Diese wird üblicherweise in MIPS, Million Instructions Per Second, gemessen, welches als “Maß für die Leistungsfähigkeit der Zentraleinheit” eines Computers gilt. Dies kann auch als Page Speed bezeichnet werden, welcher die Ladezeit einer Webseite repräsentiert.

Der Page Speed ist ein wichtiges Puzzleteil in Googles Ranking Algorithmus. (Googlewebmastercentral). Denn für Google zählt eine gute User Experience, wozu selbstverständlich auch eine schnell ladende Webseite gehört.

Walmart.com beispielsweise konnte laut einer Studie von uxmag (2014) für jede Sekunde Ladezeitverkürzung eine Erhöhung von + 2 % Conversion Rate und + 1 % Umsatzsteigerung erzielen.

Jede Sekunde Ladezeitverzögerung hatte hingegen folgende negative Auswirkungen zur Folge:

• -3,5 % Rückgang Conversion Rate

• -2,1 % Rückgang der Einkaufswagengröße

• -9,4 % weniger Seitenaufrufe

• -8,3 % erhöhte Absprungrate

Gründe für schlechte Website Performance:

• Langsame Datenbanken

• Zu große Datenmenge auf der Webseite

• Nicht aktivierte Komprimierung

• Zu große Bilder

• Zu langsamer Server

Die Ladezeit einer Webseite kann durch die Reduzierung und Optimierung der anzuzeigenden Datenmenge verbessert werden. Abbildung 1 zeigt den Inhalt einer heutzutage durchschnittlichen Webseite und die einzelnen Durchschnittsgrößen der jeweiligen Komponenten.

Abbildung 2: Durchschnittliche Bytes der Webseiteninhalte (Quelle: httparchive, 2014)

4 Tipps für bessere Website Performance

Tipp #1: CSS und JavaScript minimieren

Um CSS und JavaScript Dateien zu minimieren, können z.B, unnötige Leerzeichen, die sogenannten Whitespaces, entfernt werden. Laut einer Yahoo Untersuchung kann das die Webseitengröße bis zu 21 % reduzieren.

So geht es:

CSS Code Beispiel mit Whitespaces:

CSS Code Beispiel ohne Whitespaces:

Um CSS und JavaScript Dateien zu minimieren, können beispielsweise auch Minimierungs-Tools eingesetzt werden. Zur CSS Minimierung kann YUI Compressor oder cssmin.js eingesetzt werden. Für die JavaScript Minimierung kann JSMin, Closure Compiler oder auch der YUI Compressor dienen.

Eine Webseite wird erst vollständig angezeigt, wenn alle JavaScripts und CSS-Dateien geladen sind. Wenn JavaScript-Dateien am Anfang eines Codes stehen, kann es bei einem langsam ladenden Server vorkommen, dass dem Nutzer während der gesamten Ladezeit nur eine weiße Seite angezeigt wird.

Damit eine möglichst gute User Experience gegeben ist, sollten JavaScript-Dateien zuletzt geladen werden. Somit kann, trotz eines langsam ladenden Servers, schon in kurzer Zeit der Webseiteninhalt angezeigt werden.

Zusatzfunktionen, wie beispielsweise die Call-to-Action Buttons, die via JavaScript zuletzt geladen werden, können nachträglich angezeigt werden.

CSS sollte daher idealerweise in den Header und JavaScript in den Footer des Quellcodes eingebaut werden. Der Quellcode könnte beispielsweise wie in Abbildung 4 aussehen.

Abbildung 3: Beispiel-Quellcode mit CSS-Datei im Header und JavaScript-Dateien im Footer

Tipp #2: CSS und JavaScript auslagern

CSS und JavaScript machen einen großen Teil im Quelltext aus. Wenn dieser von der Suchmaschine jedes Mal ausgelesen werden muss, um vollständig zu laden, kann das viel Zeit beanspruchen.

Damit die Größe des Quellcodes abnimmt, bietet es sich an, die CSS und JavaScript Dateien auszulagern. Idealerweise können die CSS und JavaScript Dateien jeweils in ein einziges Dokument zusammengeführt werden.

Wenn zusätzlich der Browser die externe Datei cached (dt. zwischenspeichert), das heißt sie nur ein einziges Mal lädt, kann noch mehr Ladezeit eingespart werden.

Damit das Caching gut funktioniert, sollte ein Expires - oder ein Cache-Control: max-age Header eingefügt werden. Dieser enthält das Datum, bis zu welchem die Datei gecached werden soll, und dient daher dem Browser zur Gültigkeitsüberprüfung. Google empfiehlt hierzu, den Expires Header zu nutzen und das Auslaufdatum auf mindestens eine Woche bis zu ein Jahr festzulegen.

So geht es:

Beispiel JavaScript auslagern

Schneide die JavaScript Dateien aus dem HTML-Code aus und füge ihn in einem externen Texteditor (WordPad oder SimpleText) in ein neues Dokument ein. Speicher dieses Dokument unter “main.js” in dem Ordner ab, in dem alle weiteren HTML-Dokumente gespeichert sind. Anschließend entfernst Du im HTML Code die Befehle:

und

Füge stattdessen folgenden Befehl ein:

Tipp #3: HTTP-Requests minimieren

Das Front-End der Webseite nimmt mit seinen Komponenten wie Bildern, Stylesheets, Scripts, Flash, usw. ganze 80 % der Gesamtladezeit in Anspruch. Die Minimierung der Anzahl an HTTP-Requests kann die Webseite um einiges schneller machen.

HTTP-Requests sind Kommunikationswege vom Browser zum Server. Ein Request (dt. Anfrage) kann beispielsweise ein Dokument, Bild oder Video sein, das der Browser auf der Webseite darstellen möchte.

Zum Beispiel kann dies durch ein vereinfachtes Design geschehen, indem einzelne Bild-Dateien aus dem Code herausgelöscht werden.

Falls Du von Deinem Design überzeugt bist und daran nichts ändern möchtest, steht Dir immernoch eine andere Option zur Verfügung: Die Erstellung von CSS sprites.

Durch sie werden mehrere Hintergrundbilder zu einem Bild zusammengefügt. Mithilfe der CSS Einstellungen kann die Position jedes Bildausschnitts genau definiert werden. So weiß der Browser, wo und auf welcher Unterseite welcher Ausschnitt des CCS sprites abgebildet werden soll.

So geht es:

Du fügst alle Hintergrundbilder in ein CSS sprite zusammen. Das dadurch entstehende Gesamtbild kann beispielsweise wie bei Xing aussehen.

Abbildung 4: CSS sprite am Beispiel XING

Damit der Browser die genaue Position der einzelnen Bildausschnitte auslesen und auf der Webseite anzeigen kann, müssen in den CSS Einstellungen die jeweilige horizontale und vertikale Ausrichtungen hinzugefügt werden.

Der CSS Code dazu kann beispielsweise wie folgt aussehen:

Der CSS Code mit Information zu horizontaler und vertikaler Position:

Tipp #4: Bilder optimieren

Bilder zählen zu den Elementen, die den größten Teil einer Webseite ausmachen. In Abbildung 1 kann man erkennen, dass die Bilddateien mit 1054 kB fast 62 % der Durchschnittsseitengröße von 1710 kB ausmachen.

Bilddateien können schon bei der Bearbeitung mit Photoshop für die Webseite optimiert werden, indem diese im Webseitenformat abgespeichert werden. Die Bilder haben dadurch eine reduzierte Datengröße und laden schneller.

Wenn eine Seite viele Bilder im Content aufweist, kann deren Ladezeit zudem durch den Einsatz eines Content Delivery Networks (CDN) reduziert werden. Das heißt die Bilder werden auf einen externen Server ausgelagert und so schneller verfügbar gemacht.

Des Weiteren ist zur Bildgrößenoptimierung wichtig, das richtige Dateiformat auszuwählen.

Eine aktuelle Studie von httparchive (2014) zeigt die Durchschnittsgröße der einzelnen Dateiformate:

Abbildung 5: (Quelle: httparchive, 2014)

Laut der Grafik von httparchive besitzt HTML die minimalste Dateigröße von durchschnittlich 6 kB. Auch GIF ist mit 8 kB ein kleines Dateiformat, welches zur Bilderoptimierung benutzt werden kann.

Allerding könnte hier wenig Quantität auch wenig Qualität bedeuten. Deswegen sollte für hochaufgelöste Bilder am besten JPEG benutzt werden (uxmag, 2014).

Zur Bildergrößenoptimierung können Tools wie beispielsweise jpegtran, jpegoptim (für JPEG-Dateien) oder OptiPNG, PNGOUT (für PNG-Dateien) hilfreich sein.

In der Regel hängt das Dateiformat vom Bild ab.

Demnach gilt:

• BMP und TIFF vermeiden

• GIF nur für kleine und einfache Grafiken (kleiner als 10 x 10 px oder einer Farbpalette mit weniger als 3 Farben) und für Animationen benutzen

• JPEG für naturgetreue Bilder

• Bevorzugt PNG-Dateien verwenden (Yahoo)

So geht es:

Damit der Browser die Maße eines Bildes nicht selbst berechnen muss, sollte im Code immer direkt die Größe angeben, in der das Bild später angezeigt werden soll.

Die Originalgröße sollte die gleiche wie die im Code angegebene Größe sein, damit der Browser das Bild nicht erst in Originalgröße lädt und dann herunterskaliert.

Fazit

Heutzutage erwarten Nutzer, dass eine Webseite in 2 Sekunden vollständig geladen ist. Wenn dies nicht erfüllt ist, kann die Benutzerzufriedenheit darunter leiden. Bei eCommerce Seiten kann das auch die Conversion Rate negativ beeinflussen und Umsatzeinbußen bedeuten.

Um die Ladezeit einer Webseite zu optimieren ist vor allem die Optimierung des Codes wichtig. Hier liegt die ganze Information, welche der Browser für eine korrekte Seitenanzeige durchsucht. Schon wenige Optimierungsschritte können zu einer Ladezeitverkürzung führen.

Durch Webpagetests und gewisse Tools, wie z.B. Google Analytics, Google Page Speed, Pingdom oder speziellen SEO-Analyse-Tools, kann die Webseitengeschwindigkeit regelmäßig kontrolliert und optimiert werden.

Theorie ist gut - Praxis ist besser! Jetzt Website Performance optimieren mit Ryte FREE

Los geht’s!