Letzte Woche kam eine Freundin auf mich zu (schöne Grüße an dieser Stelle ;)), die sich verzweifelt fragte, warum ihre Webseite mittlerweile so lange lädt. Sie hätte in der letzten Zeit Inhalte aktualisiert und seitdem wurde die Seite immer langsamer. Ein Blick auf ihre Webseite verriet dann auch schnell das Problem. Sie hatte viele neue Bilder eingefügt, allesamt so, wie sie sie von der Kamera gezogen hat. Spitzenwert war ein Bild mit den Pixelmaßen 5261x3507px und einer Dateigröße von 7,91MB. Bei mehr als 10 Bildern pro Seite ein ordentliches Volumen, was geladen werden muss (zumal das Template auch so aufgebaut ist, dass es erst alle Inhalte lädt, bevor es die Webseite ausliefert). Resultat war, dass der User für mehr als 10 Sekunden eine weiße Seite mit Ladekreisel sah und sich dies mit jedem Klick auf den Folgeseiten fortsetzte.
Insgesamt keine schöne User Experience. Je länger eine Seite lädt, umso mehr User brechen ab.Bei 10 Sekunden Ladezeit verliert man rund jeden vierten Besucher. Im mobilen Bereich sind die Zahlen sogar noch höher. Hier brechen rund 40% der Besucher ab, wenn die Seite nicht innerhalb von 3 Sekunden antwortet. Versandhandelsriese Amazon hat, für sich ermittelt, dass eine Ladezeit länger als 100 Millisekunden den Umsatz um etwa 1% reduziert [1]. Bei einem Jahresumsatz von rund 24 Mrd. Dollar immerhin eine ordentliche Summe.
Auch wenn es bei den meisten Webseiten- und Onlineshopbetreibern nicht um Millionenbeträge geht, lohnt sich die Optimierung der Ladezeiten. Zum einen für die User, zum anderen aber auch für das Ranking im Google-Suchindex.
Aber wie kann ich ermitteln, ob meine Bilder optimiert werden müssen?
Mit dem Firefox Plugin Firebug lassen sich die größten „Ladehemmer“ identifizieren. Über den Reiter Netzwerk > Bilder wurde deutlich, dass allein die 10 Bilder auf ihrer Startseite insgesamt bereits 13 Sekunden Ladezeit gekostet haben.
Wie lassen sich die Bilder dann optimieren?
1. Bilder als weboptimiert abspeichern
Mit Bildbearbeitungsprogrammen wie Photoshop und Gimp lassen sich Bilder „Für Web und Geräte speichern“. Damit wird nicht nur die Dateigröße reduziert, sondern kann gleichzeitig auch an der Qualität der Bilder gedreht werden. Ob ein Bild 100% Farbtiefe hat oder „nur“ 60% bis 70% fällt dem User nicht negativ auf, hat aber enorme Auswirkungen auf die Dateigröße.
Wer ein solches Programm nicht hat, kann auch die Bilder auf https://tinypng.com/ hochladen. Die Seite reduziert hier die Dateigröße, ohne allerdings an der Bildqualität etwas zu verändern.
2. Bilder ins richtige Format bringen
Wer seine eigenen Fotos auf seiner Webseite verwendet, dem liegen diese in besonders großen Auflösungen vor (nicht umsonst nutzt man diese auch, um Bilder auf Leinwand zu drucken). Da man diese hohen Auflösungen fürs Web nicht braucht, sollten sie vorher in das richtige Format gebracht werden.
Auch hierfür verwende ich Bildbearbeitungsprogramme wie Photoshop oder Gimp (kostenlose Version erhältlich). Werden die Bilder auf der Webseite in mehreren Formaten verwendet, dann sollte das Bild immer in der höchstnötigen Bildgröße abgespeichert werden. Auch hier sollte dann im Anschluss das Bild als „Für Web und Geräte“ gespeichert werden.
Allein durch die Optimierung von 10 Bildern mit den oben genannten Maßnahmen konnte die Ladezeit auf der Startseite um 11 Sekunden reduziert werden.
