Und wieder sind wir bei der Verbesserung der Ladezeit einer Website oder Onlineshops. Das natürlich nicht ohne Grund, besonders im Bereich der Smartphones bzw. der Optimierung für mobile Geräte spielt der Faktor Ladezeit eine entscheidende Rolle. Bei dieser Anleitung geht es um die Bereitstellung der Bilder in modernen Grafikformaten. Kann ich bei Grafiken die Dateigrößen, bei gleicher Qualität, reduzieren, verschafft mir das logischerweise einen Vorteil und meine Seite wird schneller geladen. Überprüft man über das PageSpeed Tool von Google seine Webseite, erhält man Daten und Verbesserungsvorschläge zur Optimierung der Ladezeit, sowohl für die Desktop Version, als auch für die mobile Version der jeweiligen Webseite. Wie es in Österreich so schön heißt, sind das nämlich 2 Paar Schuhe. Eine Webseite kann in der Desktop Suche zwar gut ranken, auf der anderen Seite aber in der mobilen Suche, salopp gesagt, voll versagen. Da die mobile Suche in gewissen Branchen schon mehr als 50% des Suchvolumens, oder der Impressionen, ausmacht, verliert man durch das Vernachlässigen dieser Optimierungen viele Besucher und im Businessbereich natürlich dannn potentielle Kunden. Verlieren will keiner und schon gar kein Geld oder potentielle Kunden. Darum gilt es die Webseite so gut wie möglich zu optimieren.
Tja, und die Liste an Verbesserungen die uns Google bei seinem Tools vorschlägt, sind in der Regel lang, sieht man kein "rot", ist das schon mal nicht schlecht. Aber das ist eher die Ausnahme als die Regel. Irgendwas hat Herr Google immer auszusetzen. Wir müssen, wie schon gesagt, auch zwischen Desktop und Mobilversion differenzieren. Es ist zu 90% so, dass die Desktop Version einen besseren Wert in Hinsicht auf Ladezeit liefert. Die Mobilversion orientiert sich an langsameren, sprich mobilen Dateverbindugen und vor allem an der geringeren Auflösung des Displays des jeweiligen Gerätes. Bei Mobilgeräten hat man geringere Auflösungen, benötige ich bei der Desktop Version zum Beispiel Bilder mit einer Breite von 1920 Pixel, reichen bei einem Smartphone Auflösungen von zum Beispiel 375 Pixel Breite um das jeweilige Bild optimal darzustellen. Es bedeutet natürlich einen erheblichen Mehraufwand die Auslieferung der Grafiken für verschiedene Auslösungen oder Engeräte, über zum Beispiel spezielle CSS Anweisungnen, zu steuern, aber wir reden hier von professionellen Optimierungen. Diese Optimierungenn kosten nun einmal Zeit und in der Regel auch Geld, haben aber auch seinen Sinn. Habe ich bei einem Bild (zum Beispiel Sliderbild) 1920 Pixel Breite und eine Dateigröße von 200KB, hat das gleiche Bild in 375 Pixel Breite vielleicht nur 50KB. Das heißt, ich spare mir auf einem Smartphone schon wieder 75% an Daten die nicht geladen werden müssen. In unserem Beispiel Screenshot sieht man sehr schön, dass wir bei dieser analysierten Website wohl im Bereich der Grafiken noch nachbessern können (oder müssen) und immerhin 1,05 Sekunden an Ladezeit einparen können.
Die Ladezeit ist ein wichtiger Faktor im Bereich der Suchmaschinenoptimierung, aber auch natürlich ein wichtiger Faktor im Bereich des Userverhaltens. Lädt die Seite ewig, sei es auch nur für 3 Sekunden, sind 90% der Besucher weg und scheiden als potentielle Kunden aus. Die Internetverbindungen werden zwar immer schneller, aber der Suchmaschinengigant Google drängt uns noch immer dazu, so viel Ladezeit wie möglich einzusparen, damit eine Webseite schnell geladen wird und in weiterer Folge besser abschneidet bei den Suchergebnissen.
Die Grafikformate jpg, jpeg oder png dürften den meisten Menschen schon einmal untergekommen sein, sei es bei der Digitalkamera oder am Smartphone. Das Dateiformat webp bildet da eher die Ausnahme und zählt noch immer zu den eher unbekannteren Grafikformaten, völlig zu Unrecht wie ich finde. webp ist ein von Google entwickeltes Grafikformat, welches bei fast gleicher Qualität, teils massive Einsparungen von 50% (und mehr) der Dateigröße ermöglicht. Geringere Dateigröße bedeutet natürlich in weiterer Folge eine schnellere Ladezeit und raschere Interaktion mit der Webseite. Bei allem Lob muss man aber auch erwähnen, das webp jetzt nicht das Allheilmittel ist, es gibt oft Grafiken, vor allem Logos mit wenigen Grundfarben, die im zum Beispiel gif Format, weniger Speicherplatz bennötigen als Grafiken im webp Dateiformat. Bei Fotos habe ich jedoch die Erfahrung gemacht, dass in 97% der Fälle das webp Formt weniger Speicherplatz, bei fast gleicher Qualität, benötigt.
Eigentlich ist webp schon ein alter Hut, gibt es dieses Grafikformat bereits seit 2010. Es hat nur nie die kommerzielle Verbreitung wie jpg oder png erlebt. Hey Google! Du bist doch nicht allmächtig! Kleiner Scherz am Rande. :)
Aber keine Frage, die Typen (und Frauen natürlich) von Google haben´s drauf. An sich ist webp doch eine feine Sache. Im Schnitt ist der Besucher nach 3 Sekunden wieder weg, wenn die Seite nicht sofort geladen wird. Daran sind oftmals, nein eigentlich in erster Linie, die falsch dimensionierten und im falschen Grafikformat bereitgestellten Bilder schuld. Natürlich gibt es da noch sinnlose CSS Dateien, Javascript Dateien oder externe Ressourcen wie Faceboook, Youtube, Google Maps und vieles mehr die die Webseite ausbremsen. Aber vor allem Bilder mit mehreren Megabyte bei Slideshows, am Besten noch zehn davon, oder Produktfotos in gigantischen Auflösungen um die zwanzig Megapixel sind hier die Übeltäter. Leider ist das immer noch die Regel und nicht die Ausnahme. Diese Grafiken verzögern den Seitenaufbau bzw. die Ladezeit erheblich. Logischerweise, müssen 15MB Grafiken geladen werden braucht man mit der Dorf DSL Leitung schon mal 10 Sekunden bis man die Webseite zu Gesicht bekommt. Bis der Besucher mit der Seite interagieren kann, vergehen oft bis zu zehn Sekunden oder länger. In Zeiten von 56k Modems hatten wir noch mehr Geduld, heutzutage muss es aber "Zack Zack" gehen. Drei Sekunden Ladezeit? Nicht mit mir! webp für Grafiken hilft uns dabei, ein großes Stück schneller zu werden!
Aber mal ganz ehrlich, dieses Thema wird in ein paar Jahren keinen Menschen mehr interessieren, mit 5G, 6G, 100G, oder was noch alles auf uns zukommt. Mit Bandbreiten im Gigabit Bereich wird es kein Thema mehr sein. Bis zu diesem Zeitpunkt ist dieses Thema aber mehr als aktuell und einer der wichtigsten Optimierungsfaktoren für eine Webseite oder Onlineshop. Sonst hätten wir Interetmenschen ja auch keine Arbeit mehr oder? Was die führende Suchmaschine von einem verlangt, macht man halt. Bringt es ein paar Plätze bei Google, macht man es eben. Punkt, Komma, ist so, also machen wir das jetzt. Ist aber im Endeffekt auch keine große Hexerei.
Genug gelabert, jetzt zeige ich Ihnen wie das funktioniert.
In der Regel haben Sie, entweder über die Verwaltungsoberfläche Ihres Hosting Providers einen Dateimanager zur Verfügung, oder Sie verwenden ein eigenes FTP Programm, wie das gute alte Filezilla, um Zugang zu Ihrem Webspace bzw. den Dateien zu erhalten und diese zu bearbeiten. Die FTP Zugangsdaten erhalten Sie beim Hosting Provider Ihres Vertrauens.
Wir verbinden uns also im ersten Schritt mit unserem Webspace per FTP (oder Dateimanager) und bearbeiten die Datei .htaccess wie auf dem Screenshot ersichtlich. Die Datei wird mit dem Standardeditor Ihres Systems bearbeitet. Achten Sie unbedingt auf den Punkt vor dem Dateinamen. Wird die Datei in Filezilla nicht angezeigt, kann das an einer fehlerhaften Einstellung im Programm Filezilla liegen. Achten Sie darauf bzw. kontrollierenn Sie, ob unter dem Menüpunkt "Server" die Option "Auflistung versteckter Dateien erzwingen" aktiviert ist. Sollte es die Datei noch gar nicht geben, machen Sie im Fenster von Filezilla einen Rechtsklick und wählen Sie "Neue Datei erstellen". Bitte achten Sie immer auf die korrekte Schreibweise ".htaccess", also den Punkt am Anfang nicht vergessen.
Damit wir jetzt den verschiedenen Browsern sagen, dass statt png Dateien oder jpg Dateien die webp Dateien geladen werden sollen, machen wir folgenden Eintrag in der .htaccess und speichern diese ab.
RewriteEngine On
# Checken ob der Browser webp akzeptiert
RewriteCond %{HTTP_ACCEPT} image/webp
# Abklären ob es sich um png oder jpg handelt
RewriteCond %{REQUEST_FILENAME} (.*).(jpe?g|png)$
# Checken ob das Bild auch im Format webp vorliegt
RewriteCond %1.webp -f
# und zu guter Letzt das webp Bild anstatt png oder jpg an den Browser ausliefern
RewriteRule (.+).(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
Jetzt brauchen wir natürlich noch die png oder jpg Dateien im webp Format. Eine einfache Google Suche nach "jpg in webp umwandeln" liefert sofort zahlreiche Ergebnisse. Verschiedenste Programme zum kostenlosen, oder kostenpflichtigen, Download für die unterschiedlichen Betriebssysteme werden einem präsentiert. Von Windows, über Mac bis Linux, GUI oder Terminal, für jeden Geschmack gibt es das richtige Tool. Ich verwende für die Konvertierung als Mac User das kostenlose Programm XnConvert. Einfach, simpel und macht was es soll. Drei mal klicken und 10 Sekunden später habe ich so meine webp Dateien. Für Windows User kommt als Alternative zum Beispiel IrfanView in Frage. Die meisten Programme bieten eine Stapelverarbeitung an. Im Grunde genommen heißt das, ich wähle alle Originaldateien aus, wähle das Ausgabeformat und drücke aufs Knöpfchen. Klingt einfach und ist es auch. Wie bereits erwähnt, gibt es hier zahlreiche kostenlose Tools. Wie Sand am Meer, wie es so schön heißt. Also es wird sicher jeder garantiert fündig. Ziel der Übung ist lediglich die jpg unf png Dateien umzuwandeln und somit die Dateigröße zu reduzieren.
Das Umwandeln der Bilder mit XnConvert ist ganz einfach. Im ersten Schritt die png und jpg Dateien öffen (Sreenshot 1), unter Ausgabe (Screenshot 2) den Ordner wählen und unter Format natürlich webp. Man kann hier noch die Komprimierung und weitere Einstellungen vornehmen. Das ist aber in der Regel nicht notwendig. Dann klicken wir noch auf Starten und in 2 Sekunden ist die Umwandlung erledigt.
Im letzten Schritt laden wir noch die erstellten webp Dateien in den gleichen Ordner hoch, in dem sich auch die Original jpg bzw. png Dateien befinden.
