Best practices doing this is doing like this:

<img src="/my/image.png" onload="window.performance.clearMarks('logoTime'); window.performance.mark('logoTime');">
<script>
window.performance.clearMarks('logoTime'); 
window.performance.mark('logoTime'); 
</script>

Or if we use performance.measure directly. The key thing is that adding both onload and a script, will make sure we pick up the time the image is shown for the user. If the download time of the image is the slowest, the onload time will be the one that are picked up. Else if we have CSS/JS that are blocking, the second one will report the right time.

Change 247526 had a related patch set uploaded (by Ori.livneh):
Record TTFI, or time-to-first-image

https://gerrit.wikimedia.org/r/247526

Change 247526 abandoned by Ori.livneh:
Record TTFI, or time-to-first-image

Reason:
Yep, agreed

https://gerrit.wikimedia.org/r/247526

Change 258227 had a related patch set uploaded (by Ori.livneh):
[WIP] Mark timing for first image load

https://gerrit.wikimedia.org/r/258227

What happens if the first image is in the browser cache?

AFAIK the standard-ish way to approximate content visibility is requestAnimationFrame (support).

See http://www.stevesouders.com/blog/2015/05/12/hero-image-custom-metrics/

Change 259149 had a related patch set uploaded (by Ori.livneh):
Remove test pages for qlow; add test page for I1df544f6f

https://gerrit.wikimedia.org/r/259149

Change 259149 merged by jenkins-bot:
Remove test pages for qlow; add test page for I1df544f6f

https://gerrit.wikimedia.org/r/259149

@ori and me spent some time on testing out a user timing metric for an image using WebPageTest. We made a static version of the Barack Obama page and added user mark for the first image of Obama, both in the onLoad and a script tag right after, looking like this:

try{performance.clearMarks('firstImageLoadEnd');performance.mark('firstImageLoadEnd');}catch(e){}

following the latest state of the art for catching the timings when the images is viewed in the browser.

We tested the page on WebPageTest for latest Chrome, Firefox and IE 11 with cable connectivity (5 runs each):
http://www.webpagetest.org/result/151214_HB_15A7/
http://www.webpagetest.org/result/151214_MA_15A8/
http://www.webpagetest.org/result/151214_XV_15A9/

And native:
http://www.webpagetest.org/result/151214_EM_15JK/
http://www.webpagetest.org/result/151214_PH_15JP/
http://www.webpagetest.org/result/151214_YK_15JW/

We compared the results by checking the reported metrics with when the image appears in the WebPageTest film strip.

The User Timing and the image appearing in the screenshots didn't match. At first glance Chrome scores pretty ok (maybe 100-200 ms wrong) but there where also examples where it fails. For the other browsers the mismatch could be over a second.

You can see here how off it can be:

We also tries out just measuring the resource timing (just for fun):

[obama]
var entry=performance.getEntriesByType('resource').filter(function (e) { return /President_Barack_Obama.jpg/.test( e.name ); })[0];
return (entry.fetchStart + entry.duration);

and that also miss-matched (but we knew that already).

Lets close this since it will not add any value.

This calls for a Steve Souders vs Peter Hedenskog twitter showdown ;)

Change 258227 abandoned by Krinkle:
Mark timing for first image load

Reason:
Closing for now per T115600.

https://gerrit.wikimedia.org/r/258227