Current time: 12-14-2019, 09:47 PM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 1 Vote(s) - 4 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Hero Rendering Times
03-19-2019, 09:39 PM
Post: #1
Hero Rendering Times
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.
Find all posts by this user
Quote this message in a reply
03-20-2019, 03:50 AM
Post: #2
RE: Hero Rendering Times
Question just to clarify - are you suggesting that this is output automatically, rather than requiring the developer to insert the tags? Per documentation here:

https://github.com/WICG/Element-Timing

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).
Find all posts by this user
Quote this message in a reply
03-20-2019, 06:24 AM (This post was last modified: 03-20-2019 06:46 AM by sertovs.)
Post: #3
RE: Hero Rendering Times
I'm suggesting to do it automatically like SpeedCurve does - https://speedcurve.com/blog/web-performa...ro-times/. 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.

Getting the largest above the fold image is easy - just iterate over the img tags after the page is loaded and filter using: https://gomakethings.com/how-to-test-if-...avascript/

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.
Find all posts by this user
Quote this message in a reply
03-21-2019, 04:32 AM
Post: #4
RE: Hero Rendering Times
Hey folks! SpeedCurve contributed hero element times to WebPageTest a little while ago, although they're currently only available behind a feature flag: https://www.webpagetest.org/?heroElementTimes=1 - 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: https://github.com/WPO-Foundation/webpag...lements.md

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.
Find all posts by this user
Quote this message in a reply
03-21-2019, 09:25 AM
Post: #5
RE: Hero Rendering Times
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
Find all posts by this user
Quote this message in a reply
03-22-2019, 08:38 AM
Post: #6
RE: Hero Rendering Times
Thank you @josephwynn for the quick reaction on this! I'm really impressed Smile
Find all posts by this user
Quote this message in a reply
04-05-2019, 11:01 PM (This post was last modified: 04-05-2019 11:18 PM by oldweasel.)
Post: #7
RE: Hero Rendering Times
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?
Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)