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

How to optimize WordPress loading time  • Google Page Speed 100/100
Performance

How to optimize WordPress loading time • Google Page Speed 100/100

Achieve Google Page Speed at a score of 100/100 is challenging, especially for mobile. So let’s discuss a few steps to optimize your WordPress to get you close to the top...

Posted on by Wojtek Andrzejczak
Dynamic Creatives for Programmatic DOOH
Programmatic

Dynamic Creatives for Programmatic DOOH

Since Programmatic Digital-Out-Of-Home (DOOH) is getting more popular, it also brings questions about how we could take an advance it. One of those advantages can be Dynamic...

Posted on by Wojtek Andrzejczak