Google Confidential & Proprietary Best Practices for Reducing HTML5 File Size Q2 2015.
-
Upload
emery-sims -
Category
Documents
-
view
222 -
download
0
Transcript of 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