Blog

New Metrics: Measuring Hero Image Performance to Optimize User Experience

July 26, 2019 · by Gene Morris ·
Categories:

Today, many websites use hero images to engage users. Typically, a hero image is a large, prominently placed banner, and is usually the first element a visitor sees. The idea is to pique users’ interest and draw them in. But hero images, if not properly designed, can hinder site performance, causing a slow experience. Therefore, it’s critical to measure their performance; after all, drawing the user in only to drive them away with a slow and frustrating experience defeats the purpose of a hero image.

Until recently, the primary metric for web performance has been page load time (aka the onLoad event), which isn’t optimal for the new hero image world; now that hero images are so widely employed, users’ perceptions of web performance have changed, and thus our metrics should change accordingly. The onLoad event may no longer be the ideal primary metric.  

A better way to approach this is with user-centric performance metrics (the onLoad event is, essentially, a machine-centric performance metric). Some new — and better! — user-centric metrics for this hero image world include:

  • Hero image load time
  • Time to Visually Ready (TTVR): This is the maximum of First Paint / First Contentful Paint, domContentLoadedEventEnd, and (if defined) time to hero image load.
  • Time to First Paint (FP), Time to First Contentful Paint (FCP): Available via the Paint Timing API, this is the user’s indication that something is happening on the page.

Why are these metrics more valuable? Because we know that users can gain satisfaction at several different stages before the entire page has fully loaded, and these metrics specifically track those stages. 

Now, let’s take a deeper look at them.

The New Metrics

One great approach to measurement today, noted in the first bullet point above, is to set a custom metric for hero image load time. Hero images should load as early as possible, and it is important to measure just how quickly they load in order to zero in on slow hero images and analyze how and why they were delayed. 

Akamai mPulse offers the ability to set custom timers for hero images (or any other resources), and it also provides user-centric performance metrics out of the box like First Paint, First Contentful Paint, and Visually Ready (mPulse can use the hero image’s load time in calculating the metric for Visually Ready). You can also set up alerting, track performance over time, and more.

How-to: creating custom timers to track hero images in mPulse

Creating custom timers in mPulse is easy, particularly using Resource Timing. You can learn how to use mPulse to set up a custom timer with Resource Timing here.

In the example below, an mPulse custom timer has been configured to track hero images — specifically, those images with CSS Selector value of .resp-img — and timing the images from Response Start Time to Response End:

response start time to response end

And below is a time-series chart which shows the load times by percentile of the hero images specified in the screenshot above over the last 30 days. The green is the 95th percentile, which gives you a good indication of how quickly the hero image is typically traveling across the network:

percentiles

This custom timer is great for showing how the hero image is performing over the network, i.e., is it loading fast enough?

Time to Visually Ready

Once we know that our image is fast over the network, we want to make sure it’s displaying rapidly for the user. Unfortunately, success by one measurement does not always guarantee the success of the other.

By specifying the CSS selector value for hero images (.hero-images in the screenshot below), you can set mPulse to use hero image load time as one of the factors in calculating Time to Visually Ready:

configure web app

If a hero image has been specified (as it has in the above example), mPulse will, once the page has loaded, use the hero image timer in determining Visually Ready. mPulse will consider a page to be Visually Ready once the last of any of the following events has occurred:

An additional performance-measurement method: User Timing

Above we have seen examples of some new metrics, which represent ways of measuring the network performance of our hero images as well as making sure hero images are included in the Visually Ready calculation of the page. However, sometimes you may want to be specific about the exact time the hero image is displayed to the user.

For this, we can use the W3C User Timing spec that defines an interface for developers to add timestamps to measure the performance of their applications. This is done via two main functions: performance.mark and performance.measure

  • performance.mark records the time (in milliseconds) since navigationStart
  • performance.measure records the delta between two marks

The following example shows code for a web page that has a user timer for when the indicated box art finishes loading, by specifying performance.mark:

<img src="product.jpg" onload="performance.clearMarks('Boxart Loaded'); performance.mark('Boxart Loaded');">

<script>

performance.clearMarks("Boxart Loaded");

performance.mark("Boxart Loaded");

</script>

The purpose of the code above is to mitigate the scenario when an image could be loaded quickly but a blocking script prevents it being rendered, or if an image loads slowly and loads after any blocking script has finished. The maximum of these two marks should give an accurate view of when the image was actually displayed to the user.

In mPulse, you can easily create a custom timer based on User Timing by following the example below:

boxart loaded

You can then use that timer in charts and tables in your mPulse dashboards just as you would any other custom timers.

Conclusion

Today, there are metrics that help us understand how users perceive performance far more precisely than the blunt hammer of page load time. Since hero images are now a key part of so many websites, measuring the time for those specific images to load AND display on the page can help us understand when a page appears ready to the user, which in turn makes it easier to improve the user experience. 

As you have seen, Akamai mPulse is designed to help you get critical insight into these areas; in addition, Akamai can help you improve the performance of your hero images (plus other images and videos as well) with Akamai Image Manager.

Gene Morris is a senior solutions engineer at Akamai Technologies.