Digital

Not all available opportunities are listed.

Please contact your account executive for more information.

ESPN Self-Service

Got a smaller ad budget but need BIG results? Advertise Your Way on ESPN.com.

  • -Target at Local Level
  • -Track Your Results
  • -Easy to UseLearn More >

Guidelines >HTML5 File Optimization

html5 guidelines

Please refer to this guide on the basics of optimizing HTML5 creative files if you are having trouble meeting file weight requirements for advertising on ESPN. This guide may not cover all scenarios. Please contact your account manager for further information, questions, and to request exceptions. To review ESPN's creative guidelines for HTML5 creative please click here.

Ways to Reduce HTML5 File Size

Primary Source: Doubleclick Help Link

A common complaint when switching from Flash to HTML5 is that HTML5 creatives have large file sizes. The reason for this misconception is that Flash handles both creation and compression. In Flash, you create an authoring file (.FLA) and publish a final compressed file (.SWF).

An "HTML5" creative, on the other hand, commonly refers to ads created with HTML, CSS, and JavaScript. HTML5 creatives provide many opportunities to compress your files. Many of the tips provided below can be implemented in under 15 minutes. The payoff is a well-compressed HTML5 creative will perform much better than a Flash Creative

Studio/Google Web Designer

Google Web Designer is a web application for HTML5 development that's integrated with DoubleClick Studio and Asset Library. Google Web Designer's animation tools and components make it a comparable alternative for Flash users. In addition, Google Web Designer has built-in compression for images and code, Google web fonts support, SVG support, CSS animation support, and more. It you insist on using DoubleClick Studio to create your HTML5 creative (not always recommended, especially for very simple animation as output from Studio is often heavy from a file weight standpoint), the use of Google Web Designer in conjunction can offer some additional output/compression settings. Get started with Google Web Designer

Check your file size

Before reducing file size, check out your current file size and review the following guidelines and terms.

Raw file size vs. compressed file size

To review your raw file size:

  • In Studio, check your Total file size in the Manage files step of the  DoubleClick Studio creative workflow.
  • In Google Web Designer, click Publish > Publish locally to view Total Size (Raw) in the publish dialog.

Google Web Designer compresses creatives with the free software gzip. If you're not using Google Web Designer, you can download a free copy of gzip, compress them on your local workspace, and inspect the file size.

The publisher's ad server may use a different means of compression, so it's a good idea to check with your publisher to resolve potential disagreements over  compressed size calculations.

File size baseline

Before you build your creative, it's essential to understand your publisher's ad serving specifications. ESPN's guidelines for HTML5 Creative can be found Here. Initial load refers to the total, compressed file size of all creative assets delivered to the browser for initial ad display. This includes all files-images, HTML, CSS, and JavaScript.

Enabler file size

The Enabler must be included in Studio creatives. The size of the Enabler script is 25KB (compressed) and  75KB (raw).

See the IAB and DoubleClick guidelines for additional details:


Polite Load and Publisher Specs

Polite loading delays the loading of additional creative assets (like images and video) until the publisher's page is loaded. This is different than initial load, which refers to the total, compressed file size of all creative assets delivered to the browser for initial ad display. Some publishers require polite loading, but it's a good idea to include it, even when it's not required. Learn how to set up polite load


Reduce Image Size

Before you attempt to reduce the size of an image, first consider whether an image is even necessary. Some image elements may be replaced with CSS styles. Below are suggestions and resources for reducing  the number of images in your creative and for optimizing the images you need.

CSS renders color and gradients much more efficiently than an image. For help with creating CSS gradients, use CSSmatic's Gradient Generator

GIF, JPG, and PNG images are pixel based ("raster") and have larger sizes. SVGs are point-to-point based graphics ("vector") and can greatly reduce file size.

Learn more about SVG
W3School's SVG Tutorial
How to Use SVGs
Compressing SVGs

Icon fonts are regular fonts that can be used just like standard fonts. They're often vector based, which reduces file size. If you use the same icons over and over, build your own icon font.

Icon font resources
Icomoon Icon Font Creator
NounProject css icons
FontAwesome css icons

A sprite sheet is a single tiled image that is loaded once. With CSS, only individual tiles of the overall image are shown. Using a sprite sheet reduces the number of HTTP requests. The fewer HTTP requests, the faster your creative loads. It's still important to find the right compression for your sprite sheet - creating a very heavy sprite image from a file weight standpoint defeats the purpose.

Sprite sheet resources
W3School's CSS Image Sprites Overview
Stitches online sprite sheet generator 

If pixel based images are required, compress them as much as possible while preserving quality. You're probably familiar Photoshop's Save For Web, but there are other online tools that offer advanced compression.

Free Image compressors
TinyPNG
TinyJPG


Animate with CSS

Consider using CSS3 animations for transitions and transforms instead of JavaScript. CSS transforms use the GPU (Graphics Processing Unit) instead of the CPU (Central Processing Unit) for rendering animations, which improves performance and reduces JavaScript file size.

For more complex animations (including particle animations), consider using GreenSock's JavaScript animation libraries (GSAP). GreenSock simplifies the more cumbersome aspects of CSS animation, such as adjusting the timing of multiple animations and independently animating transform properties.

Don't use JavaScript libraries or frameworks that use JavaScript's setInterval method for animations, and do not use the setInterval method when hand coding. setInterval uses up a lot of browser resources, affects performance, and requires more code. If JavaScript animations are mandatory, then consider using the requestAnimationFrame method, which is specifically made for animations.

Learn how to optimize animation performance
Using requestAnimationFrame
CSS vs JavaScript Animations

Before uploading your CSS files to Studio, minify your CSS with a CSS Minifier.


Reduce JavaScript File Size

Here are some tips for reducing your JavaScript file size:

jQuery adds unnecessary file size (~75k) even though the majority of the jQuery library is not used. Instead, convert from jQuery to pure JavaScript, use a minimalist library like Zepto.js, or consider GreenSock's TweenLite

Consider taking useful pieces out of a JavaScript framework for use in your main Javascript file to reduce both file size and network requests.

If you do use any JavaScript libraries, instead of uploading JavaScript libraries with your creative, replace any references to common JavaScript libraries with DoubleClick hosted URLs. These libraries are hosted on the same domain as your live ad will be. DoubleClick is working with the IAB to get these resources shared and cached by many creatives so they can be excluded from the initial load of your ad.

Save time and code by deciding what browsers and devices your campaign will target. Don't add code for unsupported browsers or devices. This will also save you time during testing.

Browser support resources
Browser and device support for DoubleClick Studio
Can I Use: Up to date browser support for JS and CSS properties

Combine and compress your JavaScript
If you have multiple JavaScript files, combine them into one. Use tools that remove comments and extra whitespace from your JavaScript.

Tips for minifying
  • Keep an uncompressed copy handy for future updates.
  • DoubleClick Studio requires that JavaScript files have a .js extension, not .min.js.
  • If you minify your JavaScript files, you can't easily add tracking. Add tracking first, then minify the JavaScript file.

Optimize Fonts

If you're using a font other than the standard web fonts, consider using Google Fonts, a large library of free fonts. In order to reduce file size, be sure to only request the characters you need from the font instead of  the entire typeface.

However, it's also important to consider that only absolute URLs are cached by a browser. Although  http://fonts.googleapis.com/css?family=Philosopher&text=Hello will be the smallest size for a specific creative, it will still be seen as a separate request from http://fonts.googleapis.com/css?family=Philosopher&subset=latin, which may already be cached in the browser history. Take advantage of caching whenever possible to make your creatives load faster.

Learn more about web fonts
Optimizing font requests with Google Web Fonts
Font subsetting for Typekit and self-hosted web fonts