Google Confidential & Proprietary Best Practices for Reducing HTML5 File Size Q2 2015

Google Confidential & Proprietary A common complaint in the Flash vs HTML5 debate is that HTML5 Creatives are really heavy in terms of file size. The reason for this misconception is because Flash is an application that not only handles the creation of ads, but also the compression of them. “HTML5 Creatives”, on the other hand, commonly refers to ads created with the programming languages HTML, CSS, and Javascript. HTML5 Creatives provide many opportunities to compress your files. Many of the tips provided can be implemented in under 15 minutes. The payoff is that a well-compressed HTML5 Creative will perform much better than a Flash Creative.well-compressed HTML5 Creative will perform much better than a Flash Creative Overview

Google Confidential & Proprietary Table of Contents 1.Google Web Designer 2.How to Check Your File Size 3.Polite Load and Publisher Specs 4.Reducing Image Size 5.CSS and Animation 6.Reducing Javascript Size 7.Optimizing Google Fonts

Google Confidential & Proprietary Google Web Designer

Google Confidential & Proprietary Google Web Designer Google Web Designer (GWD) is an application specifically made for HTML5 ad development by Google, and is a great HTML5 alternative to developers that are only familiar with Flash. GWD has built in compression for images and code, Google web font support, SVG support, CSS animation support, etc. Additionally, it is fully integrated with Studio. GWD is highly recommended above anything else when developing ads. More information on GWD can be found in the GWD Help Center.GWD Help Center

Google Confidential & Proprietary How to Check Your File Size

Google Confidential & Proprietary Total File Size vs. Compressed File Size The total file size (‘Raw File Size’) of your Creative can be viewed in DoubleClick Studio here. In Google Web Designer, you can view size of your Creative in the Publish panel. Google Web Designer compresses Creatives with gZip.here Publish panelgZip To determine your Creative’s compressed size, simply download a free copy of gZip, compress them on your local workspace, and inspect the file size. Depending on the Publisher’s ad server, they will be calculating the compressed size of your Creative. Always double check with your Publisher to be sure.

Google Confidential & Proprietary What is a good baseline for HTML5 Creative file size? It’s essential to understand your Publisher’s ad serving specifications prior to building your Creative. However, many Publishers follow the IAB recommendation of 35KB (compressed) Initial Load for the Creative and 100KB for total Creative size. Initial Load refers only file size of the.html file in the Creative, not the Enabler, Javascript, CSS, or other image files, but again, check with your Publisher to understand their guidelines to be sure. More info about the IAB’s recommendations can be found here (page 8/9 here) and DoubleClick’s recommendations here.here

Google Confidential & Proprietary How much does DoubleClick Enabler add in file weight? As of April 2015, the Enabler adds approximately ~75KB (~25KB when gZipped).

Google Confidential & Proprietary Polite Load & Publisher Specs

Google Confidential & Proprietary Polite loading delays the loading of additional creative assets (like images and video) until the parent page has finished loading. This is different than ‘initial load’, which only refers to file size of the.html file in the Creative. It is helpful to implement the code for polite loading because many publishers have different specs for initial load versus the complete load size. More information about polite loading can be found here.More information about polite loading can be found here It’s important to check with the Publisher to understand their HTML5 specs for rich media ads because they should typically be different than Flash-based specs. Communication with Publishers is important because they may or may not count file size based on the compressed gzip format and will rather count the raw file size. It's also important because individual publisher specs differ from IAB specs depending on placement, ad type, etc. so they may allow more or less leeway in build specs. Publishers may also limit specs for animation and video play time. Polite Load & Publisher Specs

Google Confidential & Proprietary Images

Google Confidential & Proprietary Is the graphic a gradient or a solid color? Consider creating the image with just CSS3 to both improve the quality and reduce file size. ●CSS3 Gradient GeneratorCSS3 Gradient Generator 300x250 image as JPG: ~4KB 300x250 image as CSS3: Less than 1KB

Google Confidential & Proprietary Is the image comprised of solid colors or a vector? Use SVG (Scalable Vector Graphics) whenever possible instead of an image. Images are pixel based (“raster”) and may add some overhead in file weight. In contrast, SVGs are point-to-point based graphics (“vector”) and can greatly reduce file size. ●W3School's SVG TutorialSVG Tutorial ●How to Use SVGsHow to Use SVGs ●Compressing SVGsCompressing SVGs Image saved as PNG: 33KB Image saved as SVG: 21KB

Google Confidential & Proprietary Does your Creative use multiple icons? Use icon fonts whenever possible instead of an image for icons, images are pixel based and may add some overhead in file weight. Icon fonts are actually regular fonts and can be used in the same way as any other font in HTML. They are vector based as well. Custom icon fonts are relatively quick to create and implement. ●Icomoon Icon Font CreatorIcomoon Icon Font Creator ●NounProject: an affordable resource to gather SVG icons for your icon fontNounProject

Google Confidential & Proprietary Do you have multiple images in your project? If pixel based images are required, consider using a Sprite Sheet. A single tiled image that is loaded once, and with CSS, only individual tiles can be made visible, this approach can save making multiple requests over HTTP. Compressing the image, is still key even with this approach. ●CSS Image SpritesCSS Image Sprites ●Online Sprite Sheet and CSS CreatorSprite Sheet and CSS Creator

Google Confidential & Proprietary Are you using JPGs or PNGs in your project? If pixel based images are required, compress them as much as possible while keeping quality. Many people are already familiar Photoshop’s Save For Web, but there are other online tools that can compress an image even further while retaining quality. Photoshop’s Save For Web ●TinyPNG: Online PNG CompressorTinyPNG: Online PNG Compressor ●TinyJPG: Online JPG CompressorTinyJPG: Online JPG Compressor PNG using Save For Web: 57KB PNG using TinyPNG: 15KB

Google Confidential & Proprietary CSS and Animations

Google Confidential & Proprietary Consider using CSS3 animations (transitions/transforms) instead of Javascript for animations. CSS transforms use the GPU instead of the CPU for rendering animations so it helps with performance and preserves file size.CSS3 animations Refrain from using JavaScript libraries/frameworks that use the setInterval JavaScript method for animations, and if hand coding then do not use the setInterval method. This method uses up a lot of the browser’s resources and affects performance, and it requires a decent amount of code. If JavaScript animations are mandatory, then consider using the requestAnimationFrame method, it is specifically made for animations. ●Using requestAnimationFrameUsing requestAnimationFrame ●CSS vs Javascript AnimationsCSS vs Javascript Animations Before uploading your CSS files to Studio, consider minifying your CSS with an Online CSS Minifier. Online CSS Minifier CSS and Animations

Google Confidential & Proprietary Javascript

Google Confidential & Proprietary Are you using jQuery? Don’t use jQuery in your HTML5 Creatives. jQuery is not recommended because it adds unnecessary file weight (~75k) even though the majority of the jQuery library is not utilized in a Creative. Consider using pure Javascript with this guide, or using Zepto.js if necessary.this guideZepto.js

Google Confidential & Proprietary Are you using a Javascript Framework? Ask yourself if it is completely necessary to have them in your Creative. Consider taking pieces out of the framework and utilizing them in your main Javascript file to reduce overhead.

Google Confidential & Proprietary Are you targeting code for specific devices/browsers? Ensure your code is written for devices/browsers specified, no need to add code for non-supported devices/browsers. ●Browser and device support for DoubleClick StudioBrowser and device support for DoubleClick Studio ●Can I Use: Up to date browser support for JS and CSS propertiesCan I Use

Google Confidential & Proprietary Did you compress your Javascript?* There are online tools that will remove comments and extra whitespace from your Javascript. It’s a best practice to keep a version of your uncompressed Javascript file locally on your computer for later reference.online tools Keep in mind that in DoubleClick Studio, JavaScript files require a.js extension, not.min.js. If you minify JavaScript files, you can't add tracking easily. If the client requests minifying, add tracking first and minify the.js file later. *GWD natively minifies files, so if you’re using GWD no minification is necessary.

Google Confidential & Proprietary Optimizing Google Fonts

Google Confidential & Proprietary Optimizing Google Fonts If you are using a font other than the standard web fonts, consider using Google fonts. Google has a large library of fonts which can all be used for free. In order to reduce file size, be sure to only request the characters you need from the font vs the entire typeface. This is called Font Subsetting.Google fonts ●Optimizing Font RequestsOptimizing Font Requests