Rich Media API-Handbuch

HTML5-Dateigröße reduzieren

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.

Google Web Designer verwenden

Google Web Designer ist eine Webanwendung zur HTML5-Entwicklung, die nahtlos in Studio und die Asset-Bibliothek eingebunden ist. 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 integriert. 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.

Da auf dem Ad-Server des Publishers möglicherweise ein anderes Komprimierungsverfahren angewendet wird, sollten Sie Ihren Publisher kontaktieren, um Unstimmigkeiten im Zusammenhang mit Höchstgrenzen für die Dateigröße bei komprimierten Dateien zu vermeiden.

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:

Polite Load und Publisher-Spezifikationen

Mit einem Polite Load wird der Ladevorgang weiterer Creative-Assets wie Bilder und Videos verzögert, bis die Seite des Publishers 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. Einige Publisher sind möglicherweise zu Kompromissen in Bezug auf die Spezifikationen bereit. Zudem 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 erstellen
Mit CSS werden Farben und Verläufe viel effizienter als mit einem Bild gerendert. Wenn Sie Unterstützung bei der Erstellung von CSS-Verläufen benötigen, verwenden Sie den Gradient Generator von CSSmatic.
GIF-, JPG- und PNG-Dateien durch SVG-Dateien (skalierbare Vektorgrafiken) ersetzen

GIF-, 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)

Bei der Verwendung von vielen Symbolen könnte eine Symbolschrift sinnvoll sein

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 (teilweise auf Englisch)
CSS-Symbole von Font Awesome (auf Englisch)

Ladezeit pixelbasierter Bilder mit einem Sprite-Sheet optimieren

Ein Sprite-Sheet ist ein Bild mit nur einer Kachel, das nur einmal geladen wird. Mit 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) 

Geeigneten Komprimierungsgrad verwenden

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 Programmierung sollten Sie außerdem auf die Methode setInterval verzichten. setInterval beansprucht viele Browserressourcen, beeinträchtigt die Leistung und erfordert mehr 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 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 arbeiten
jQuery erhöht die Dateigröße unnötig (um ca. 75 KB), selbst wenn der Großteil der jQuery-Bibliothek nicht genutzt wird. Konvertieren Sie die Dateien stattdessen von jQuery zu reinem JavaScript und verwenden Sie eine minimalistische Bibliothek, wie Zepto.js, oder ziehen Sie TweenLite von GreenSock in Betracht.
JavaScript-Frameworks vermeiden
Sie können einzelne nützliche Abschnitte eines JavaScript-Frameworks kopieren und in Ihrer Haupt-Javascript-Datei verwenden, um sowohl die Dateigröße als auch die Anzahl der Netzwerkanfragen zu reduzieren.
Von Studio gehostete JavaScript-Bibliotheken verwenden

Anstatt 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.

Targeting für spezifische Browser und Geräte einrichten

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ützung
Browser- 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
Sollten Ihnen mehrere JavaScript-Dateien vorliegen, führen Sie sie in einer einzigen Datei zusammen. Verwenden Sie Tools, mit denen Kommentare und überflüssiger Leerraum aus JavaScript entfernt wird.

Tipps zur Komprimierung
  • Speichern Sie die Datei zur späteren Aktualisierung in einer unkomprimierten Version.
  • JavaScript-Dateien müssen die Erweiterung .js haben. Dateien mit der Erweiterung .min.js sind 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

 

 

War dieser Artikel hilfreich?
Wie können wir die Seite verbessern?