Hero Rendering Times

Feature Suggestions
1

It would be great to have metrics such as those described here.

For example, “Largest (Hero) image render” is an important KPI for e-commerce (and other) sites where it’s all about visuals. It would be nice to have it in WebPagetest instead of adding it on pages as a performance marker.

2

Question just to clarify - are you suggesting that this is output automatically, rather than requiring the developer to insert the tags? Per documentation here:

The API currently requires that the element is registered" via an HTML attribute and when the image takes a large portion of the viewport when it is first displayed. For background-image: when it affects the style of an element which has the HTML attribute, then all of the images from that background-image are registered for observation (since background-image can include multiple URLs, multiple images may be registered for observation).

3

I’m suggesting to do it automatically like SpeedCurve does - SpeedCurve | Hero Rendering Times: New metrics for measuring UX. When they added this feature, these metrics were automatically available for all pages (no markers or performance observers on the page).

I have no idea how they are doing it, but if it can be done, it will be a great asset to WebPagetest’s metrics.
[hr]
Getting the largest above the fold image is easy - just iterate over the img tags after the page is loaded and filter using: How to test if an element is in the viewport with vanilla JavaScript | Go Make Things

Then, what they might be doing is get its dimensions, extract that portion from the final filmstrip screenshot and go back the filmstrip to see when it first appeared.

4

Hey folks! SpeedCurve contributed hero element times to WebPageTest a little while ago, although they’re currently only available behind a feature flag: WebPageTest - Website Performance and Optimization Test - the reason it’s behind a feature flag is because the WebPageTest implementation differs slightly to our original implementation in SpeedCurve, and we wanted to iron out any issues first. We’re pretty confident that it’s okay now and I’ll be submitting a patch to enable it by default in the coming days.

Besides automatically finding render times for the largest heading, image, and background image; WebPageTest will automatically find render times for any element with the elementtiming attribute. It also lets you specify your own element selectors: webpagetest/HeroElements.md at master · WPO-Foundation/webpagetest · GitHub

The major drawback to how we’ve implemented hero rendering times is that we rely on the filmstrip to perform a frame-by-frame analysis. For this reason, we can only detect rendering times for elements that at least partly visible in the viewport.

5

Update: I’ve opened pull requests to enable the hero element timing by default.

https://github.com/WPO-Foundation/webpagetest/pull/1261
https://github.com/WPO-Foundation/wptagent/pull/249

6

Thank you @josephwynn for the quick reaction on this! I’m really impressed :slight_smile:

7

This is excellent!

A few suggestions:

  • Since ANY above the fold element can be potentially elected, perhaps “Hero Element” is a bit misleading, perhaps using the term “Visible Critical Element” would be better?

  • Could there be a way to assign a different shading to the hero element / element components (ex: the multiple images and code that may make up a hero carousel, for example) in the page waterfall so that users can identify at a glance where the Hero Element falls within the page waterfall and what that particular element might be on a given page?