Learn how to improve HTML5 creatives loading performance and avoid common mistakes.

What is the purpose of this article?

In this article, I’d like to discuss all the problems with HTML5 creatives, which have a significant impact on the performance of the campaign and very often pure KPI performance.

Performance problems

The HTML5 creative size (not dimensions) is very often part where no one is checking if 400-800KB is a lot or just good enough for 300×250 creative. It is hard to say without analyzing the creative itself.

Size and compression balance

The creative size should be as small as possible with the balanced compression level of the images, and video to big file sizes hurt the campaign performance. And to high compression destroy user experience and reduce his chance of engagement.

Use CDN assets correctly

• CDN resources should not be embedded/injected directly in the creative.
• Content Delivery Network means the use of the assets for users across all networks despite their location in the world—the best possible way to improve loading and caching performance.
• If the user has contact with CDN assets like jQuery anywhere on the internet, his browser doesn’t need to download the file again.

Depends on an example, we can save 120-320KB+ of the initial data that the user browser needs to load.

Not optimized creative assets

• Optimize Images for a web, 70-82% JPG compression.
• Use TinyPNG or ImageOptim to optimize images automatically.
• Make sure you have only one CSS and JavaScript for your code.
• Minimize CSS and JavaScript files to reduce file size.

For average 300×250 creative with 4-8 images, exported from Adobe Photoshop with a 92% compression level, and we process those files, for example, by TinyPNG. We can have the potential of saving 35-70% of the initial file sizes, which could be 40-180KB less data.

Embed Video size

• To high size/bitrate can prevent the video from playing on mobile devices.
• iOS/Android have their physical video stream restrictions and recommendations that we need to follow.

The most popular software to export video files is Adobe Media Encoder. By default, default preset puts the main focus on video quality, not file size or compatibility modes. And this is usually a typical file delivered to the developer responsible for the creatives.

The technical details on how to prepare the correct video file you can find in the 3 mistakes in HTML5 creatives article.

If we encode video with the right preset, we should see a reduction from 300×250 video files from 500-800KB to 180-240KB, if we assume video length is 8-12s.

Summary

As you can see, those 3 problems can cause or save many KB of data per creative. And remember that if the user browser has 200-500KB data less to load each time when the user sees the creative. It improves massively campaign performance KPI’s like CTR or viewability.

Related Articles

• 3 mistakes in HTML5 creatives • embedded video
• Google Studio • HTML5 creatives guide

Links

• Google CDN hosted assets
• Set up a polite load in HTML5

• 
  Contact Me
  Contact me if you need advice or if you need help. Would you please choose the most suitable contact channel for you?
• 
  My Services
  If you need a technical specialist to technical support to fix your problems, you are in the right place.
• 
  Who I am
  Hello, my name is Wojtek, I’m an experienced Software Engineer, with many many years of experience in the advertising industry.