Ein HTML5-Creative bezieht sich in der Regel auf Anzeigen, die mit HTML, CSS und JavaScript erstellt wurden. Sie haben verschiedene Möglichkeiten, die Dateien von HTML5-Creatives zu komprimieren. Viele der unten aufgeführten Tipps sind in weniger als 15 Minuten umgesetzt.
Themen in diesem Artikel:
Google Web Designer verwenden
Google Web Designer ist eine Webanwendung zur HTML5-Entwicklung, die nahtlos mit Studio und der Asset-Bibliothek zusammenarbeitet. In Google Web Designer sind unter anderem die Bild- und Codekomprimierung sowie die Unterstützung von Google Web Fonts, von SVG und von CSS-Animationen bereits enthalten.
Erste Schritte mit Google Web Designer
Dateigröße überprüfen
Bevor Sie die Dateigröße reduzieren, sollten Sie anhand folgender Richtlinien und Bedingungen Ihre aktuelle Dateigröße überprüfen.
Größe der RAW-Datei im Vergleich zur Größe der komprimierten Dateien
So prüfen Sie die Größe Ihrer RAW-Datei:
- In Studio können Sie die Gesamtgröße der Dateien im Schritt Dateien verwalten des Creative-Workflows von Studio prüfen.
- Klicken Sie in Google Web Designer auf Veröffentlichen > Lokal veröffentlichen, um die Gesamtgröße der RAW-Dateien im Veröffentlichungsdialogfenster aufzurufen. Sie sehen die Dateigröße auch im Bereich Anzeigenvalidierung.
Google Web Designer komprimiert die Creatives mit der kostenlosen Software gzip. Falls Sie Google Web Designer nicht nutzen, laden Sie eine kostenlose Version von gzip herunter, komprimieren Sie die Dateien lokal und sehen Sie sich dann die Dateigröße an.
Grundlegendes zur Dateigröße
Bevor Sie mit der Erstellung eines Creatives beginnen können, sollten Sie sich unbedingt die Spezifikationen Ihres Publishers für die Anzeigenbereitstellung ansehen. Viele Publisher halten sich an die IAB-Empfehlung von 200 KB (komprimierte Datei) als anfängliche Ladegröße für das Creative und je nach Format von 300 KB oder 500 KB als seine Gesamtgröße. Die anfängliche Ladegröße bezieht sich auf die Gesamtgröße der komprimierten Datei mit allen Creative-Assets, die an den Browser gesendet werden, um als Erstes ausgeliefert zu werden. Dies schließt alle Dateien ein: Bilder, HTML, CSS und JavaScript.
Enabler-Dateigröße
Auch wenn jedes Studio-Creative einen Enabler enthalten muss, speichern Webbrowser eine Kopie von ihm in ihrem Cache. Grund hierfür ist, dass für jedes Studio-Creative dasselbe Skript geladen wird. Die Größe des Enabler-Skripts liegt bei 25 KB (komprimierte Datei) und 75 KB (RAW-Datei).
Weitere Informationen finden Sie in den IAB- und Studio-Richtlinien:
- HTML5-Richtlinien des IAB (im PDF-Format, siehe Seite 4 und 6)
- Creative-Richtlinien von Studio
Chrome-Mechanismus zum Entladen von Anzeigen
- Wenn Ihr Creative viele Bilder, Videos, Animationen oder 3D-Objekte enthält, folgen Sie den Richtlinien für Chrome, um Ihr Creative zu testen und dafür zu sorgen, dass es nicht entladen wird.
- Testen Sie Ihr Creative mit der Chrome-Demo „Heavy Ad Intervention“, um festzustellen, ob es blockiert wird.
Polite Load und Publisher-Spezifikationen
Bei einem Polite Load wird das Laden weiterer Creative-Assets, wie Bilder und Videos, verzögert, bis die Seite des Publishers vollständig geladen wurde. Der Unterschied zum anfänglichen Laden liegt darin, dass sich der Wert für das anfängliche Laden auf die Gesamtgröße der komprimierten Datei mit allen Creative-Assets bezieht, die an den Browser gesendet werden, um als Erstes ausgeliefert zu werden. Einige Publisher verlangen ausdrücklich einen Polite Load, aber auch wenn dieser nicht zwingend vorgeschrieben ist, empfiehlt es sich immer, einen Polite Load hinzuzufügen. So richten Sie einen Polite Load ein
Sehen Sie sich die Rich Media-HTML5-Spezifikationen Ihres Publishers an. Einige Publisher ermitteln die Größe anhand der komprimierten GZIP-Dateien, andere verwenden lieber die Größe der RAW-Dateien. Die Spezifikationen der einzelnen Publisher können je nach Placement, Anzeigentyp usw. von den IAB-Spezifikationen abweichen. Außerdem sollten Sie die eventuell begrenzte Animations- oder Videowiedergabedauer berücksichtigen.
Bildgröße verringern
Bevor Sie die Größe eines Bilds reduzieren, sollten Sie sich überlegen, ob dieses Bild überhaupt erforderlich ist. Einige Bildelemente können beispielsweise durch CSS-Stile ersetzt werden. Unten finden Sie Vorschläge und Ressourcen für die Verringerung der Bildanzahl in einem Creative und zur Optimierung der Bilder, die Sie tatsächlich benötigen.
Verläufe oder deckende Farben mit CSS erstellenGIF-, JPG- und PNG-Bilder basieren auf Pixeln (Rastergrafiken) und sind deshalb größer. Bei SVG-Dateien handelt es sich um Vektorgrafiken, die wesentlich kleiner sind.
Weitere Informationen zu SVG
SVG-Leitfaden von W3Schools (auf Englisch)
SVGs verwenden (auf Englisch)
SVGs komprimieren (auf Englisch)
Symbolschriften sind herkömmliche Schriftarten, die auch genauso eingesetzt werden können. Oft sind sie vektorbasiert und führen so zu kleineren Dateien. Wenn Sie immer wieder dieselben Symbole verwenden, lohnt sich die Erstellung einer eigenen Symbolschrift.
Ressourcen zu Symbolschriften
Erstellungstool für Symbolschriften von IcoMoon (auf Englisch)
CSS-Symbole von Noun Project (auf Englisch)
CSS-Symbole von Font Awesome (auf Englisch)
Ein Sprite-Sheet ist ein Bild mit nur einer Kachel, das nur einmal geladen wird. Mit der CSS werden nur die einzelnen Kacheln des Gesamtbildes angezeigt. Wenn Sie ein Sprite-Sheet verwenden, reduziert sich die Anzahl der HTTP-Anfragen. Je weniger HTTP-Anfragen gesendet werden, desto schneller lädt Ihr Creative. Hierbei ist es wichtig, den richtigen Komprimierungsgrad für das Sprite-Sheet zu finden.
Ressourcen zu Sprite-Sheets
Übersicht „CSS Image Sprites“ von W3Schools (auf Englisch)
Online Sprite Sheet Generator von Stitches (auf Englisch)
Wenn pixelbasierte Bilder erforderlich sind, sollten Sie sie nur so stark komprimieren, dass die Qualität noch erhalten bleibt. Sie kennen bestimmt „Save For Web“ von Photoshop. Es gibt jedoch auch andere Onlinetools, die intelligente Kompressionsoptionen bieten.
Kostenlose Bildkomprimierungstools
TinyPNG (auf Englisch)
TinyJPG (auf Englisch)
Animationen mit CSS erstellen
Für Übergänge und Transformationen können Sie statt JavaScript CSS3-Animationen verwenden. Bei CSS-Transformationen wird für das Rendern der Animationen statt der CPU (Central Processing Unit) die GPU (Graphics Processing Unit) genutzt. Dadurch verbessert sich das Arbeitstempo und die JavaScript-Dateien werden kleiner.
Für komplexe Animationen (einschließlich Partikelanimationen) eignen sich die JavaScript-Animationsbibliotheken von GreenSock (GSAP). GreenSock vereinfacht die eher schwierigen Aspekte von CSS-Animationen, beispielsweise die Anpassung der zeitlichen Abfolge mehrerer Animationen und die unabhängige Animation von Transformationselementen.
Verwenden Sie keine JavaScript-Bibliotheken oder -Frameworks, in denen die JavaScript-Methode setInterval für Animationen genutzt wird. Bei der manuellen Codierung sollten Sie außerdem auf die Methode setInterval verzichten. setInterval ist recht ressourcenhungrig, beeinträchtigt die Arbeitsgeschwindigkeit und verlangt zusätzlichen Code. Falls JavaScript-Animationen erforderlich sind, sollten Sie die Methode requestAnimationFrame in Betracht ziehen, die speziell für Animationen entwickelt wurde.
Animationsleistung optimieren
requestAnimationFrame verwenden
CSS- im Vergleich zu JavaScript-Animationen
Bevor Sie die CSS-Dateien in Studio hochladen, komprimieren Sie Ihre CSS mit einem CSS-Komprimierungstool.
Größe der JavaScript-Datei verringern
Im Folgenden erhalten Sie einige Tipps zum Reduzieren der Größe Ihrer JavaScript-Datei:
Nicht mit jQuery arbeitenAnstatt JavaScript-Bibliotheken mit Ihrem Creative hochzuladen, ersetzen Sie Verweise auf häufig verwendete JavaScript-Bibliotheken durch in Studio gehostete URLs. Diese Bibliotheken werden auf derselben Domain wie Ihre Live-Anzeigen gehostet.
Bei Studio arbeiten wir mit dem IAB zusammen, wodurch diese Ressourcen für viele Creatives besser geteilt und im Cache gespeichert werden können. Dadurch ist es möglich, sie beim ersten Laden Ihrer Anzeige auszuschließen.
Sie benötigen weniger Zeit und Code, wenn Sie festlegen, auf welche Browser und Geräte Ihre Kampagne ausgerichtet werden soll. Fügen Sie keinen Code für nicht unterstützte Browser und Geräte hinzu. So sparen Sie auch beim Testen wertvolle Zeit.
Ressourcen zur BrowserunterstützungBrowser- und Geräteunterstützung für Studio
Can I Use: aktuelle Browserunterstützung für JS- und CSS-Elemente
JavaScript-Dateien zusammenführen und komprimieren
Wenn Sie mehrere JavaScript-Dateien haben, können Sie diese kombinieren. Verwenden Sie Tools, mit denen Kommentare und überflüssige Leerzeichen aus JavaScript entfernt werden.
- Speichern Sie die Datei zur späteren Aktualisierung in einer unkomprimierten Version.
- JavaScript-Dateien müssen die Erweiterung
.jshaben. Dateien mit der Erweiterung.min.jssind nicht erlaubt. - Das Tracking kann nach dem Komprimieren nicht mehr so einfach hinzugefügt werden. Richten Sie also erst das Tracking ein und komprimieren Sie anschließend die JavaScript-Datei.
Schriftarten optimieren
Wenn Sie keine der standardmäßigen Webschriftarten verwenden, sollten Sie Google Fonts, eine umfangreiche Bibliothek mit kostenlosen Schriftarten, nutzen. Sie können die Dateigröße reduzieren, indem Sie statt aller nur die benötigten Zeichen der Schriftart abrufen.
Von einem Browser werden nur absolute URLs zwischengespeichert. Auch wenn http://fonts.googleapis.com/css?family=Philosopher&text=Hello die kleinste Größe eines bestimmten Creatives ist, wird dies dennoch als separate Anfrage zu http://fonts.googleapis.com/css?family=Philosopher&subset=latin eingestuft, was möglicherweise bereits im Browserverlauf im Cache abgelegt wurde. Nutzen Sie das Caching so oft wie möglich, damit Ihre Creatives schneller geladen werden.
Weitere Informationen zu Webschriftarten
Schriftartabfragen mit Google Web Fonts optimieren
Bildung von Schriftartuntergruppen für Typekit und selbst gehostete Webschriftarten