von Qin Lin
Die Ladezeit von Websites und Werbemitteln hat direkten Einfluss auf die User Experience und somit den Erfolg einer Kampagne. Beim Optimieren der verwendeten Komponenten gilt es einiges zu beachten. Wir geben Überblick über die wichtigsten Komponenten eines HTML5-Werbemittels sowie Tipps zu deren Optimierung für eine bessere User Experience.
Wir verbinden kreative Umsetzung mit datengetriebener Expertise, um für Ihre Kampagne herausragende Ergebnisse zu erzielen.
Mehr ErfahrenEs ist wohl allen bekannt, dass die Ladezeit einer Seite die User Experience sowie Performance stark beeinträchtigt. Dasselbe gilt auch für HTML5-Werbemittel, weshalb das Dateigewicht solch eines Werbemittels oft von Publishern eingeschränkt wird. 150-200 KB ist der Standard-Richtwert und in der Regel handelt es sich hier um die gezippte Dateigröße mit allen Assets. Fragen Sie jedoch auf jeden Fall nach der konkreten Spezifikation des Publishers, bevor Sie mit der Erstellung loslegen.
Ein HTML5-Werbemittel besteht in der Regel aus mehreren Komponenten, die in einer .html-Datei zusammengeführt werden. Es gibt mehrere Möglichkeiten, diese Komponenten zu komprimieren, so dass die Dateigröße verringert und die Ladezeit optimiert werden kann.
Lass uns die Komponenten einzeln näher betrachten:
Grundsätzlich lassen sich Codes sehr gut komprimieren. Es gibt sogenannten Minifier online, die einfach zu bedienen sind und auch ein gutes Ergebnis liefern.
Es ist davon abzuraten, schwere Libraries zu verwenden. In vielen Situationen kann man auch auf jQuery verzichten und die Zeilen mit JavaScript umschreiben. GSAP ist eine gute Lösung für komplexe Animationen. Ansonsten kann man in Erwägung ziehen, CSS Keyframe-Animationen statt Javascript zu verwenden.
Wenn Sie Programme wie Google Web Designer verwenden, können Sie diesen Schritt überspringen, da im Programm eine Funktion beim Exportieren integriert ist, die automatisch Codes minimiert.
Viele Bilder lassen sich sehr gut mit reinem CSS und HTML umsetzen (einfarbige Hintergründe, Kreise, Verläufe etc.). Bevor Sie mit der Komprimierung eines Bildes beginnen, überlegen Sie sich, ob dies nicht der Fall wäre.
Illustrationen (wie Logos) lassen sich sehr einfach als .svg (skalierbare Vektorgrafik ohne Qualitätsverlust) exportieren. Damit können Sie Größe reduzieren, insbesondere wenn es sich um größere Bilder handelt.
Services wie TinyPNG liefern oft ein exzellentes Ergebnis. Komprimieren Sie Ihre Bilder, bevor sie zusammengeführt werden.
Sie kennen bestimmt die Option “Für Web speichern…”. Im Einstellungsfenster können Sie die notwendige Qualität des Bildes einstellen. Außerdem können Sie auch die Dateigröße vorgeben, so dass Photoshop für Sie die Qualität ausrechnet, die Ihre Vorgabe nicht überschreiten würde.
Informieren Sie sich rechtzeitig, ob Videos überhaupt bei Ihrem Publisher zugelassen sind. In Google Ads z.B. werden Videos noch nicht unterstützt. In DV360 zählen Banner mit Video-Integration als Rich Media Creatives und müssen über Studio gehostet sein.
Generell tendieren Videos dazu, eine große Dateigröße zu besitzen. Überlegen Sie sich in dem Fall genau, ob der Einsatz sinnvoll ist.
Mp4 bleibt weiterhin das meist unterstützte Format in allen gängigen Browsern.
GIF und Spritesheets sind zwar Alternativen dafür, liefern jedoch nicht immer ein besseres Ergebnis. Probieren Sie aus, welche Methode bei Ihrem Video das beste Ergebnis liefert.
Standard-Webschriftarten wie Arial müssen nicht extra eingebunden werden. Wenn Sie jedoch benutzerdefinierte Schriftarten verwenden möchten, sollten Sie zuerst nach Alternativen auf Google Fonts, einer Library mit kostenlosen Schriftarten, suchen.
Greifen Sie erst auf eigene Schriftarten zurück, wenn Sie dort nicht fündig werden oder aufgrund der strengen Style Guide-Vorschriften nur firmeneigene Schriften verwenden dürfen.
In so einem Szenario haben Sie folgende Möglichkeiten:
Wie Sie gesehen haben, gibt es hier sehr viel Raum für Optimierung. Das Wichtigste dabei ist, dass Sie den Optimierungsgrad finden. Worauf kann ich verzichten? Was darf auf jeden Fall nicht pixelig aussehen? Ist mein Werbemittel so einfach aufgebaut, dass ich es auch als AMP-Ad erstellen kann?
Ob viel oder wenig, optimieren Sie auf jeden Fall Ihre Assets vor oder beim Zusammenführen der Dateien. Sie werden einen merkbaren Unterschied im Laden Ihres Werbemittels sehen.
Wir freuen uns auf Ihre Anfrage und beraten Sie gerne unverbindlich! Füllen Sie dazu einfach das Kontaktformular aus oder rufen uns direkt an.
Jetzt kontaktierenNewsletter
Holen Sie sich unsere Online Marketing-Insights und Trends direkt in Ihr Postfach!