Navigation

Related Articles

3 most common HTML5 creatives performance mistakes

3 most common HTML5 creatives performance mistakes


Wojtek Andrzejczak
Wojtek Andrzejczak
3 most common HTML5 creatives performance...

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.
HTML5 creatives performance mistakes / CDN resources should not be embedded
HTML5 creatives performance mistakes / CDN resources should not be embedded
HTML5 creatives performance mistakes / CDN correctly embedded
HTML5 creatives / CDN correctly implemented

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.
HTML5 creatives / Optimize Images for a web use
HTML5 creatives / Optimize Images for a web use

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.
HTML5 creatives / Optimize embed video size
HTML5 creatives / Optimize embed video size

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

Links


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

Subscribe to receive updates about new articles.

Show Comments (0)

Comments

Related Articles

Learn how to build Rich Media Creatives • Google Web Designer
Guidelines for creatives

Learn how to build Rich Media Creatives • Google Web Designer

Learn how to build Rich Media Creatives using Google Web Designer, which is fully compatible with the Google CM360 and DV360. What is Rich Media Creative? Rich Media Creative is...

Posted on by Wojtek Andrzejczak
Google Studio • HTML5 creatives guide
Guidelines for creatives

Google Studio • HTML5 creatives guide

Google Web Designer and Adobe Animate CC – Learn how you can prepare HTML5 creatives compatible with Google Studio for Google Marketing Platform campaigns.

Posted on by Wojtek Andrzejczak