3 most common HTML5 creatives performance mistakes


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.

Subscribe to receive updates about new articles.

Related Articles

Links

Show Comments (0)

Comments

Related Articles

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
Google Analytics

3 steps to report AdBlock users visits

Learn how to track in Google Analytics a user who uses AdBlock.

Posted on by Wojtek Andrzejczak