#Fitness hero image download

Talking to some web performance experts (thanks Philip, Pat, Scott, AndyÂ and Paul!), I identified five candidate techniques for measuring when an image is displayed: But we can find a solution by thinking about the three things that block an image from rendering: synchronous scripts,Â stylesheets, andÂ the image itself being slow.

There are no hooks in today’s browsers that can be used to know when content is viewable. Sites that have hero images need to do the same thing: focus on when the hero image is viewed. Instead, they care about when the tweet can be viewed.

#Fitness hero image download

Because they must be created on a case-by-case basis we call themÂ custom metrics.Â The earliest and most well known example of a custom metric is in a 2012 article from Twitter where they describe how their most important performance metric is Time to First Tweet, defined as “the amount of time it takes from navigation (clicking the link) to viewing the first Tweet on each pageâ€™s timeline.” Note that they don’t talk about how long it takes to download the tweets. TheseÂ metrics are specific to each individual website measuring the most important design elements on each page. To measure what matters, we need to shift our focus to metrics that better represent the user experience. When does the page’s content get shown to the user so she can start interacting with the page? Unfortunately, these don’t tell us enough about what matters the most: the user’s experience. Most of the performance metrics used today focus on the mechanics of the browser (window.onload) or network performance (time to first byte and Resource Timing). While this picture is stunning, it takes 2.5-3.5 seconds before it’s displayed.įigure 6: Airbnb waterfall Image Custom Metrics Jawbone’s site features an image of a woman in a sweater wearing the Up fitness tracker. Using SpeedCurve’s Responsive Design Dashboard, we can see how their hero images load over time across different screen sizes. Popular websites that use hero images include Jawbone, Homeaway, and Airbnb. Because these hero images are critical design elements, it’s important that they render quickly, and yet often hero images load too late frequently getting pre-empted by less critical resources on the page.

Many websites use images as a major design element in the page – these are called hero images. The average website contains over 2 MB of downloaded content. I’ll describe a new technique for measuring when images are rendered so you can track that as a custom metric. You should add custom metrics to your website to make sure you know how quickly (or slowly) important content gets displayed.Many designs that feature a hero image suffer from HID (Hero Image Delay) mostly due to blocking scripts and stylesheets. If your website has a hero image, make sure it loads and renders as early as possible.