Eine gute Website Performance ist nicht nur ein wichtiger Baustein für gute Rankings in Suchmaschinen, sondern beeinflusst auch direkt das Verhalten deiner Besucher. Spätestens seit Google im Jahr 2010 die Ladegeschwindigkeit zum Rankingfaktor erklärt hat, sollte eigentlich auch der letzte Skeptiker von der Wichtigkeit überzeugt worden sein.
Doch die Realität sieht leider anders aus. Viele Webmaster unterschätzen immer noch den Einfluss einer guten Ladezeit auf den Erfolg einer Website und scheren sich nicht um die Performance des eigenen Internetauftritts.
Dabei ist eine gute Performance gar nicht so schwer zu erreichen. Vermeide einfach die 6 folgenden Performance-Sünden und lass deine Website so richtig durchstarten. Deine Besucher werden es dir danken!
Verwendung von nicht optimierten Bildern
Ich sehe sie immer wieder. Internetseiten auf denen Bilder veröffentlicht werden, die viel zu groß sind. Egal ob Bildgröße oder Dateigröße, oft wird daran kein Gedanke verschwendet und Bilder hochgeladen, die nur wenig oder gar nicht optimiert sind. Nicht selten kommt zusätzlich die fehlerhafte Verwendung von Bildformaten hinzu.
Ein Beispiel, worüber ich vor kurzem gestolpert bin, ist das Bild von Ben auf der Startseite seines Blogs www.anti-uni.com (Blog ist zur Zeit leider Offline, dass Beispiel ist aber hoffentlich auch so anschaulich genug). Auf dem Bild ist Ben mit einer Tafel zu sehen und begrüßt seine Besucher mit einem freundlichem Lachen. Soweit so gut.
Die Daten des nicht optimierten Bildes von Ben
Wenn ich jetzt aber weiter in die Analyse gehe und mir die Grafik-Info des Bildes anzeigen lasse, dann sehe ich das Format des Bildes, die Dateigröße und die Bildgröße. Ben hat hier als Dateiformat PNG gewählt. Dies liegt sicher daran, dass der Hintergrund des Bildes transparent sein soll und ist. Die Dateigröße beträgt 268 Kilobyte und die ursprüngliche Abmessung des Bildes 869 x 1.410 Pixel. Diese wurde aber auf eine Bildgröße von 417 x 677 Pixeln skaliert.
Diese automatische Skalierung des Bildes ist mein erster Ansatz für eine Optimierung. Wieso hat Ben das Bild so groß hochgeladen, wenn er diese Größe auf seiner Website gar nicht benötigt und sein Contentmanagementsystem dieses automatisch skaliert (auch in der größten Bildschirmauflösung)?
An seiner Stelle würde ich das Bild auf eine Größe von 417 x 677 Pixel verkleinern und spare damit alleine 70% bei der Dateigröße. Mit dieser kleinen aber feinen Optimierung muss der Besucher anstatt 268 Kilobyte, nur noch rund 90 Kilobyte herunterladen.
Doch das war noch längst nicht alles!
Ben hat bei seinem Bild das PNG-Format gefällt, da dieses Format transparente Hintergründe unterstützt. Dazu hat er den alten Hintergrund des Bildes ausgeschnitten und durch den transparenten Hintergrund ersetzt. Doch warum hat er nicht gleich die Hintergrundfarbe der Fläche verwendet, auf dem das Bild platziert ist?
Warum frage ich das? Weil er das Bild dann nämlich im JPEG-Format hätte abspeichern können und sich die Dateigröße nochmal halbiert hätte. Und das Ganze ohne einen nennenswerten Qualitätsverlust.
Durch diese zwei kleinen Optimierungen, müsste der Besucher seines Blogs, nur noch ein rund 45 Kilobyte großes Bild herunterladen. Wenn man die aktuellen 268 Kilobyte als Ausgangspunkt nimmt, ist dies eine Einsparung von 83 Prozent. Enorm oder?
Merke dir:
- Du solltest die Bildgröße immer auf die maximal benötigte Größe anpassen.
- Schneide nicht benötigte Bildteile aus.
- Achte stets auf das korrekte Dateiformat für Bilder. Hier sind riesige Einsparpotenziale möglich.
Hohe Anzahl an HTTP-Anfragen
Besteht deine Website aus vielen Ressourcen, muss für jede Ressource eine HTTP-Anfrage an den Webserver gestellt werden. Mit Ressourcen meine ich Bilder, JavaScript-Dateien oder Stylesheets die in deine Seite (HTML-Dokument) eingebunden sind.
Eine hohe Anzahl an Ressourcen und den damit verbundenen HTTP-Anfragen, wirkt sich negativ auf die Performance deiner Website aus. Dein Browser fragt nämlich jede Komponente einzeln beim Webserver an. Dieser verarbeitet die Anfrage und schickt die entsprechende Ressource an deinen Browser zurück.
Der Vorgang nimmt sehr viel Zeit in Anspruch, wie auch der folgende Wasserfall zeigt:
Wasserfall für die Ladegeschwindigkeit von www.google.de
Im Screenshot habe ich die Ladezeit der Google Suchmaschine mit dem Firebug, einer Erweiterung für den Firefox, gemessen. Du kannst hier sehr schön erkennen, dass ungefähr 80 – 90 Prozent der Ladezeit, für das Ausführen von HTTP-Anfragen verbraucht wird. Das eigentliche HTML-Dokument ist bereits nach wenigen Millisekunden geladen, wobei das vollständige Laden der Seite ungefähr 1,6 Sekunden gedauert hat.
Dein Ziel sollte es also sein, so wenig Ressourcen wie möglich in deine Website einzubauen oder diese zu kombinieren.
Merke dir:
- Kombiniere Bilder, JavaScript-Dateien und Stylesheets wenn möglich.
- Frage dich ständig, ob du das neue Feature oder die neuen zusätzlichen Bilder wirklich auf deiner Website benötigst. Weniger Elemente sind nicht nur bei der Ladezeit von Vorteil, sondern auch ein Usability-Aspekt.
Ressourcen werden nicht komprimiert
Die Zeit, die eine HTTP-Anfrage und die entsprechende Antwort durch die Leitungen des Internets benötigen, kann erheblich durch die Aktivierung einer Komprimierung verringert werden. Die Komprimierung von Ressourcen sorgt dafür, dass die zu übertragene Datenmenge kleiner wird und somit weniger Pakete vom Server an deinen Browser übertragen werden müssen.
Die Komprimierung von Ressourcen verkleinert die zu übertragende Datenmenge
Im Screenshot siehst du, dass die Startseite meines Blogs ohne eine aktivierte Komprimierung 36,3 KB groß wäre. Da ich aber meine Webseiten mittels GZIP komprimieren lasse, müssen nur noch 9,1 KB übertragen werden.
Eine aktivierte Komprimierung wirkt sich aber nicht nur positiv auf die Dateigröße von HTML-Dokumenten aus. Wenn du die Komprimierung richtig konfigurierst, werden auch JavaScript-Dateien, Stylesheets, Bilder und alle anderen Ressourcen deiner Homepage komprimiert ausgeliefert.
Viele mir bekannte Internetseite nutzen bereits die Vorzüge einer Komprimierung und du solltest es auch tun. Ob deine Website bereits komprimiert ausgeliefert wird, kannst du unter http://www.whatsmyip.org/http-compression-test/ überprüfen.
Merke dir:
- Lass deinen Webserver die Ressourcen deiner Website komprimiert ausliefern. Dadurch werden kleinere Datenmengen übertragen, was sich positiv auf die Ladezeit auswirkt.
Fehlendes Caching
Setzt du kein Caching ein, dann begehst du eine große Performance-Sünde. Das Caching sorgt nämlich für schnellere Zugriffszeiten beim Aufruf der Ressourcen einer Website. Anstatt bei jeder Anfrage die original Dateien anzufragen, werden die Daten der Website direkt aus dem Cache geladen und viel schneller im Browser dargestellt.
Doch wie funktioiniert so ein Caching-Mechanismus?
In einem Softwaresystem ist das Caching der Daten in mehrere Stufen aufgeteilt. In modernen Webanwendungen werden die Daten alleine an 4 unterschiedlichen Stellen zwischengespeichert:
Verschiedene Stufen des Cachings in modernen Webanwendungen
Sagen wir mal, du hast deine Website mit dem Contenetmanagementsystem WordPress erstellt. Dann existiert auch irgendwo eine Datenbank, in der WordPress den Großteil der anfallenden Daten speichert. Die Datenbank speichert die Ergebnisse vergangener Abfragen in einem Cache. Damit kann sie beim erneuten Anfragen der gleichen Daten, schneller die Ergebnisse bereitstellen.
Genauso verfährt der Webserver mit Bildern, Stylesheet, JavaScript-Dateien etc. Werden diese angefragt, liefert er sie an den Browser aus und speichert die Daten gleichzeitig in seinem Cache. Die Webanwendung speichert wiederrum Daten, die sie bereits bei der Datenbank abgefragt hat, um sie nicht jedes Mal erneut anzufordern.
Auch dein Browser besitzt einen Cache. Dieser wird Browser Cache genannt und speichert bereits abgerufene Inhalte lokal auf deinem Computer.
Durch diese Hierachie der einzelnen Cache-Mechanismen, kann sehr viel Zeit gespart werden. Wenn z.B. ein Bild bereits im Browser Cache vorhanden ist, braucht der Browser keine Anfrage an den Webserver stellen und lädt das Bild einfach aus dem Cache. Somit werden gleich 3 von 4 Stellen der Kommunikationskette eingespart.
Wie kannst du von dieser fantastischen Erfindung profitieren?
Bei den meisten Webhosting-Tarifen, brauchst du dich nicht um das Caching auf Seiten des Webservers und der Datenbank kümmern. Hier werden bereits automatisch Caching-Mechanismen zur Performance Optimierung eingesetzt.
Wichtig ist, dass du dich um das Caching deiner Webanwendung kümmerst und den Browser Cache richtig steuerst. Wenn du als Contentmanagementsystem WordPress einsetzt, kann ich dir diese drei Links empfehlen:
Merke dir:
- Der Einsatz von Caching-Mechanismen verringert die Zugriffszeit auf die Daten einer Website enorm.
- Aktiviere stets das Browser-Caching
- Kümmere dich um das Caching deines Contentmanagementsystems.
Die JavaScript-Problematik
Der Einsatz von JavaScript ist auf modernen Websites kaum noch wegzudenken. Kein Wunder, bietet es dir doch eine Vielzahl an dynamischen Features. Besonders die Einbindung von Social-Media-Buttons ist sehr weit verbreitet.
Doch du solltest bei der Einbindung sehr vorsichtig sein! JavaScript kann sich nämlich maßgeblich auf die Performance deiner Website niederschlagen. Und das meine ich nicht im positiven Sinn.
Hier findest du einige Punkte, auf die du besonders achten solltest:
- JavaScript blockiert die Darstellung deiner Seite
JavaScript blockiert das Laden deiner Seite gleich auf zwei Arten. Einmal verhindert es den parallelen Download mehrerer Dateien zur gleichen Zeit und zum anderen verhindern die Skripte das Rendern der Inhalte, die nach dem JavaScript eingebunden sind. Erst wenn die JavaScript-Datei komplett heruntergeladen und verarbeitet wurde, wird das Rendern der Website vorgesetzt. - Skripte werden doppelt eingebunden
Es kommt gar nicht so selten vor, dass die gleiche JavaScript-Datei zweimal auf der gleichen Website eingebunden wird. Zum Beispiel kann es schnell passieren, dass das Contentmanagementsystem jQuery einbindet und ein zusätzlich installiertes Plugin ebenfalls. Doppelt eingebundene Skripte haben die gleichen negativen Auswirkungen, wie im vorherigen Punkt beschrieben. - Das Ansprechen von zu vielen APIs
Eine API kannst du dir wie eine Schnittstelle zu einem externen Service vorstellen. Zum Beispiel nutzen die meisten Social-Media-Plugins die Facebook-API, um die Anzahl der Fans deiner Fanseite laden zu können. Die Nutzung solcher APIs kann sich negativ auf die Performance deiner Website auswirken, da hier jedes Mal auf eine Antwort der Gegenstelle gewartet werden muss. - Skripte von Drittanbietern außer Kontrolle
In meinem Artikel über die wohl langsamste Website der Welt, habe ich dieses Phänomen bereits analysieren dürfen. Dort war ein JavaScript von einem Drittanbieter eingebunden, welcher den Dienst eingestellt hatte. Das Skript hat trotzdem versucht den Dienst anzusprechen und das Rendern der ganzen Website behindert.
Auch wenn sich der Einsatz von JavaScript mittlerweile einer großen Beliebtheit erfreut, solltest du nicht Blind irgendwelche Skripte in deine Internetseite implementieren. Gerade hier kann viel falsch laufen oder die Performance nachhaltig verschlechtert werden.
Merke dir:
- Binde so wenig JavaScript wie möglich ein.
- Sorge dafür, dass die Skript-Dateien am Ende deiner HTML-Datei eingebunden werden.
- Nach der Installation neuer Plugins oder Skripte, solltest du stets die Ladezeit überprüfen.
- Achte auf die Aktualität deines Quellcodes und verwende keine veralteten Skripte.
Fehler bei der Auswahl des Webhosting-Paketes
Auch bei der Auswahl des Webhosting-Paketes, solltest du bereits die Performance-Brille aufsetzen und nicht das Erstbeste nehmen. Zwar ist es kein Problem, dass Paket später zu wechseln, doch warum nicht gleich die wichtigsten Punkte beachten:
- Wenn der Großteil der Besucher deiner Internetseite aus Deutschland kommt, sollte diese auch in Deutschland gehostet werden.
- Shared Hosting ist sehr beliebt und reicht für die meisten Projekte völlig aus. Trotzdem solltest du darauf achten, dass du dir nicht mit zu viele Kunden den Webserver teilst.
- Planst du eine Website mit viel Traffic oder einen Shop, solltest du dir über einen eigenen Webserver Gedanken machen.
Fazit
Die Optimierung der Website Performance ist ein weites und nicht ganz so einfaches Thema. Schnell bist du in eine Performance-Falle getappt.
Wenn du aber die 6 hier vorgestellten Performance-Sünden vermeidest, kannst du dich fast schon entspannt zurücklehnen. Die größten Eisberge liegen nämlich hinter dir.
Spannender Artikel!
Werde ich direkt mal einige Sachen von umsetzen!
Liebe Grüße
Tim
Da bin ich wieder, periodisch wiederkehrender Besucher 😀
wie immer, großes Lob an dich, du bist einer der wenigen Blogger die sehr gut schreiben, erklären und vermitteln!
Ich bin zwar wegen was anderem hier gelandet aber ich schmöker eben gerne ^^
So, und nun gebe ich auch meinen Senf dazu. Ich fände es gut, wenn du noch auf die Möglichkeit hinweisen würdest, dass kleinere Bilder auch Base64 codiert in CSS geladen werden können. Bei mir sind es “nur” 4 Bilchen aber die machen 4 Anfragen aus und lassen sich so sogar sehr gut im Cache halten!
Übrigens, dein Design gefällt mir!
Moin Ich 🙂
vielen Dank erstmal für das riesen Lob. Ich fühle mich sehr geehrt 😀
Die Möglichkeit mit der Base64-Codierung nehme ich mal als Idee für einen späteren Artikel auf und wenn es hier im Blog mal irgendwann weitergehen wird, wird dies auf jeden Fall einer der nächsten Punkte der veröffentlicht wird.
Viele Grüße
Enrico