Stellt euch vor ihr seid unterwegs und braucht ganz dringend eine Information über ein nahegelegenes Restaurant oder eine in Kürze eintreffende Straßenbahn. Ihr seid gestresst und müsst euch beeilen: Die Website, die euch die wertvollen Informationen liefern soll, braucht allerdings eine halbe Ewigkeit um zu laden. Was macht ihr? Zack ihr verlasst die Seite: Zurück auf Google und schon wieder auf einer anderen Website unterwegs, die euch die Uhrzeit der Ankunft der Straßenbahn oder die Öffnungszeiten des Restaurants direkt anzeigt.
Page Speed Insights
Welche Website ist nun überzeugender? Natürlich die zweite, denn Ladezeiten sind wichtig. Sei es im Hinblick auf besseren Service oder Kundenzufriedenheit. Und jetzt denkt an eure eigenen Kunden: Für diese stellt ihr den Service eurer Website bereit.
Wenn ihr nicht wisst wie schnell sie performt, dann stellen wir euch jetzt „Page Speed Insights“ von Google vor. Mit diesem Tool habt ihr die Möglichkeit die Schnelligkeit eurer Website zu messen. Dazu ist nur die Eingabe der URL eurer Internetseite notwendig. Google wird euch kurz darauf einen Score zuweisen. Ist dieser zwischen 90 und 100, dann könnt ihr euch entspannt zurücklehnen, denn eure Website ist bereits schnell. Zwischen 50 und 89 gibt es Optimierungsbedarf und von 0 bis 49 müsst ihr einiges tun.
Zusätzlich wird aufgeschlüsselt welche Werte genau ermittelt wurden. Dazu gehören zum Beispiel die eingespielten „Labdaten“:
- wann erste Inhalte gezeichnet wurden
- nach welcher Zeit alle Hauptinhalte geladen sind
- wie lang es dauert, bis die Seite interaktiv ist
Was bringen alle Analysen, wenn man dann noch gar nicht weiß, wie man die Ladezeit verbessern kann. Natürlich schafft Google hier Abhilfe…
Potentiale erkennen
Die Page Speed Insights bieten weiterführend einzelne Empfehlungen und davon ausgehend, welchen Unterschied diese in umgesetzter Form an Zeit einsparen können. Empfehlung Nummer 1 sind natürlich Bilder. Fotos und Videos sind ja meist auch die Übeltäter, wenn es um fehlenden Speicherplatz auf dem Smartphone geht. Zusätzlich zur einfachen Empfehlung zeigt das Tool auch, welche Bilder genau zu groß sind und dringend bearbeitet werden müssen.
Allein durch die Reduzierung der Bildgröße bzw. der Dateigröße oder dem Anpassen des Dateiformats können schon bis zu 2 KB Speicherplatz eingespart werden.
Solltet Ihr bereits das Tool Google PageSpeed zum Testen eurer Website Performance ausprobiert haben, versteht ihr vermutlich besser, wieso auf die Bilder ein besonderer Fokus gelegt werden sollte. Falls nicht, raten wir euch dringen dazu dies zu tun.
Unterschiedliche Komprimierungsarten
Zunächst sollte bei der Komprimierung zwischen zwei Bereichen unterschieden werden: Lossless und lossy.
Lossless – verlustfrei: keinerlei Veränderungen der Bildqualität.
Lossy – verlustbehaftet: kleine Änderungen am Bild selbst, z.B. Verringerung von Farben oder der Auflösung.
Warum genau solltet Ihr also eure Bilder komprimieren?
Wegen der PERFORMANCE. Keiner hat Lust auf lange Wartezeiten – because ain’t nobody got time for that.
Nachdem nun klar geworden ist, wieso das Ganze von Wichtigkeit ist haben wir ein paar Vorschläge wie genau ihr das machen könnt:
- mit Bildbearbeitungsprogrammen, wie Photoshop (PS)Öffnet euer Bild in PS und geht auf Datei > exportieren. Hier könnt ihr dann für Web speichern auswählen und JPEG als Bildformat auswählen. Danach könnt ihr noch über die Qualität (70-80%) deutlich die Dateigröße verringern ohne die Bildqualität zu sehr zu ruinieren. Hier gilt aber: nicht weniger als 70% zu wählen.
- mit Bildoptimierungstools, wie Tiny PNG, Compressor.io etc.
Für den Fall, dass ihr kein Photoshop benutzt, gibt es dann geeignete Tools die das für euch dann in Angriff nehmen. Wenn ihr mehr zu den einzelnen Tools wissen wollt könnt ihr hier mehr dazu nachlesen.
- WordPress PlugIns (Ein Plug-in ist ein Softwaremodul, das die Funktionalität einer Softwareanwendung verbessert), wie Optimus, WP Smush oder EWWW Image Optimizer.
- Dieser Blog erklärt euch hierzu die einzelnen Unterschiede der jeweiligen Tools.
PS:
Selbstverständlich ist es nicht nur wichtig zu wissen wie Bilder angepasst werden können, sondern welche Bildformate gewählt werden sollen, wenn es um sich um Webanwendungen handelt. Mehr Informationen zu den Bildformaten folgen im nächsten Blogbeitrag unserer Reihe: So verbessert ihr das Tempo eurer Website.
Ebenfalls interessant:
Bildquelle: #109401734 © Urheber: peshkov- stock.adobe.com
