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

Google Confidential & Proprietary

Best Practices for Reducing HTML5 File SizeQ2 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.

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.

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.

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.

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.

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 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 Tutorial● How to Use SVGs ● Compressing 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 Creator● NounProject: an affordable resource

to gather SVG icons for your icon font

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 Sprites● Online

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

● TinyPNG: Online PNG Compressor● TinyJPG: 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.

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 requestAnimationFrame● CSS vs Javascript Animations

Before uploading your CSS files to Studio, consider minifying your CSS with an 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.

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 Studio

● Can I Use: Up to date browser support for JS and CSS properties

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.

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.

● Optimizing Font Requests