Die Ladegeschwindigkeit von Webseiten auf Mobilgeräten steht bei den meisten Marketingteams nicht ganz oben auf der Prioritätenliste. Häufig sind sie der Meinung, dass Speed eher in den Aufgabenbereich der Webdesigner fällt. Das ist aber nur bedingt richtig. Manchmal sind es gerade die Marketingbilder, die eine Unternehmenswebseite zum Leben erwecken sollen, die sie letztlich durch unüberlegten Einsatz langsamer machen. Das wiederum kann zu hohen Absprungraten sowie weniger Conversions und damit zu verpassten Umsatzchancen führen.
Der erste Schritt zu einer höheren Geschwindigkeit auf Mobilgeräten ist deshalb ein prüfender Blick auf die Bilder, die Sie auf der Webseite verwenden. Wir haben hier einige technische Tipps und anschauliche Bilder von Google und Alphabet zusammengestellt, die Sie an Ihre Entwickler weitergeben können. Denn Bilder zu optimieren, verhilft zu kürzeren Seitenladezeiten, wodurch Sie letztlich auch potenzielle Kunden begeistern.
1. Bilder priorisieren
Zuerst sollten Sie sich fragen, ob wirklich alle Bilder notwendig sind. Natürlich sehen hochauflösende Fotos auf der Webseite super aus. Aber bringen sie einen Mehrwert? Kann die animierte GIF-Datei eventuell effizienter als Code programmiert werden? Oder kann man gar komplett auf sie verzichten?
Wenn Sie unnötige Assets entfernen, ist die Webseite übersichtlicher und benötigt weniger Pflege. Eventuell lassen sich Bilder durch Text oder Cascading Style Sheets (CSS) ersetzen. Mit CSS können Layout, Formen und Effekte in nur wenigen Zeilen Code abgebildet werden. Ihre Entwickler freuen sich bestimmt auf diese kreative Herausforderung und Nutzer sparen Datenvolumen, weil weniger Inhalte heruntergeladen werden müssen.
Dieser Ansatz wurde auf der Webseite von Verily, einem Alphabet-Unternehmen, verfolgt. Durch die sparsam eingesetzten Bilder hat das Team eine einfache Webseite von geringer Dateigröße erstellt. Der Farbverlauf des Hero Images ist animiert und nur ein Pixel breit. Wir hätten ihn auch programmieren können. Allerdings hätten dann Probleme bei der Darstellung letztlich mehr Kosten verursacht. Designer und Entwickler haben bei diesem Beispiel eine gute Balance zwischen Optik und Leistung der mobilen Webseite geschaffen.
Auf Mobilgeräten ist die Animation sogar noch schlichter: Der Hintergrund ist einfarbig und ändert sich schrittweise nach einer codierten Abfolge. So ist eine Seite in der Leichtgewichtsklasse entstanden, bei der auf ein schwerfälliges JavaScript-Framework oder riesige Dateien verzichtet wurde. Sogar bei einem simulierten 3G-Netzwerk wird die Startseite nahezu sofort geladen und eine Lighthouse-Leistungsbewertung von 92 erreicht. Dieser Wert ist nur wenige Millisekunden von den oberen Prozent der leistungsstärksten Webseiten entfernt.
2. Effizientes Format wählen
Es gibt viele verschiedene Bildformate. Da fällt es nicht leicht, das effizienteste auszuwählen. Natürlich hängt es auch von der konkreten Anwendung ab. Allerdings können Sie mit dem richtigen Format die Seitengröße um einige Bytes reduzieren. Probieren Sie am besten zuerst die WebP-Methode aus. Damit lassen sich Fotos und transparente Bilder um bis zu 30 Prozent stärker komprimieren als mit JPEG, und zwar ohne Qualitätsverluste. Für die restlichen Assets empfehlen wir die folgenden Dateiformate, die mit allen Browsern kompatibel sind:
- JPEG: Fotos ohne Transparenz
- PNG: Transparente Hintergründe
- SVG: Skalierbare Symbole und Formen
So sind wir auf Piraterie bekämpfen, einer Webseite von Google, vorgegangen. Das Team hat einfache Formen als skalierbare Vektorgrafiken (SVG, Scalable Vector Graphics) erstellt und daraus ansprechende Animationen von kleiner Dateigröße geschaffen. Vorher waren GIFs und Videos mit jeweils über 300 Kilobyte vorgesehen – also mehr als das Doppelte der empfohlenen Größe.
Das Team konnte Leistungsbudgets für die Webseitengröße durchsetzen und das zu übertragende Datenvolumen bei Bildern um das Zehnfache reduzieren. Dafür war eine enge technische Zusammenarbeit von Entwicklern und Designern erforderlich. Sieht man sich jetzt die optimierte Geschwindigkeit auf Mobilgeräten an, hat sich der Aufwand gelohnt.
3. Bilder komprimieren und ihre Größe anpassen
Die meisten Bytes sparen Sie ein, wenn Sie Bilder optimieren. Bereits dadurch verbessern Sie die Leistung Ihrer mobilen Webseite enorm. Selbst mit den einfachsten Methoden lässt sich viel erreichen, zum Beispiel der Bildkomprimierung, dem Entfernen von Metadaten wie Datums- und Zeitangaben und den Einstellungen für die Qualität. Und mittlerweile ist es einfacher denn je, responsive Bilder zu verwenden: Entwickler definieren dabei verschiedene Größen für ein Bild und der Browser sucht sich das für den Bildschirm des Nutzers geeignete aus.
Und das Beste daran ist, dass viele dieser Schritte automatisiert werden können. Dadurch spart man Zeit und die Bilder sind immer optimiert. So lässt sich die Größe unzähliger Bilder mithilfe eines Skripts automatisch anpassen oder komprimieren. Das erspart Designern viel Arbeit und sie können sich den wirklich wichtigen Aufgaben widmen.
Bei Accelerated Mobile Page (AMP) übernehmen benutzerdefinierte Bild-Tags einen Großteil der automatisierten Optimierungen. Im AMP-Cache von Google werden die maximalen Bildabmessungen festgelegt. Dadurch werden Probleme mit der Speicherkapazität des Browsers vorgebeugt und Bilder werden im Cache gespeichert, wodurch sie später schneller wieder geladen werden können.
Der Luxusautomobilhersteller BMW wollte eine leistungsstarke mobile Webseite, ohne auf stilvolle Bilder und Videos zu verzichten. Dank der Bild-Tags und weiterer Funktionen zur Geschwindigkeitssteigerung lädt die neue AMP-Webseite bis zu viermal schneller, was zu einem Anstieg der mobilen Nutzer von 50 Prozent führte. Die Vorteile von AMP werden zusätzlich mit den Funktionen progressiver Web-Apps (PWAs) kombiniert. Durch PWA-Technologien kreiert BMW eine qualitativ hochwertige, app-ähnliche Weblösung und begeistert damit potenzielle Kunden.
4. Ladeverfahren nutzen
Bilder zu komprimieren und ihre Größe anzupassen, ist aber nur der Anfang. Wenn man noch einen Schritt weiter gehen möchte, lassen sich bedingungsabhängig verschiedene Versionen eines Bildes je nach Gerät des Nutzers, seiner Bildschirmgröße oder sogar der Qualität der Netzwerkverbindung ausliefern. Dadurch können Entwickler allen potenziellen Kunden schnell ladende Webseiten anbieten, und zwar unabhängig von den jeweiligen Bedingungen.
Sind die Bilder einmal bestmöglich optimiert, sollten sie auch im richtigen Augenblick parat stehen. Wenn Nutzer zum ersten Mal eine Seite besuchen, wollen sie sofort alle Inhalte "above the fold" sehen, also in ihrem Darstellungsbereich, der ohne Scrollen sichtbar ist. Hier kommt die Lazy Loading-Methode ins Spiel: Dabei werden auf der Webseite diejenigen Bilder zuerst geladen, die sich in dieser begrenzten Ansicht befinden – und alle anderen nur bei Bedarf.
Auf bücher.de werden Bilder erst dann geladen, wenn sie in den für den Nutzer sichtbaren Bereich kommen. Inhalte, die potenzielle Kunden sofort sehen, werden priorisiert behandelt und laden umgehend. Mit diesem Ansatz und weiteren Methoden der Seitenoptimierung konnte das Onlineversandhaus für Medien aller Art die Webseite um 33 Prozent beschleunigen und die Ladezeit auf 3,5 Sekunden reduzieren.
Wenn große Bilder viel Zeit zum Laden brauchen, ist es sinnvoll, auf fortschrittliche Ladeverfahren zu setzen. So können Sie zum Beispiel von Platzhaltern, Fortschrittsanzeigen oder effizienten Formaten wie progressive JPEG profitieren. Denn dadurch entsteht bei Webseitenbesuchern das Gefühl, dass sich etwas tut, und sie bleiben auf der Seite. Oder, um es mit den Worten des Design Advocate Mustafa Kurtuldu zu sagen: "Die Idee dahinter ist, die Zeit des Wartens ausfüllen, um sie zu überbrücken."
Nächster Schritt: Geschwindigkeit auf Mobilgeräten als KPI
Die Bildoptimierung ist eine einfache und kostengünstige Möglichkeit, bessere Conversion-Raten auf Ihrer Webseite zu erzielen. Damit der Erfolg aber auch langfristig anhält, muss die Webseitengeschwindigkeit zu einer Leistungskennzahl werden, und zwar unternehmensweit.
Dieser Artikel ist zuvor auf Think with Google Skandinavien & Benelux erschienen.
