Measuring Image Performance Steve Souders Chief SpeedCurver, SpeedCurve Designers and developers instinctively know that faster websites make happier users. Thankfully, there's a wealth of case studies that prove our hunch. Thus, tracking website speed is necessary for knowing where our users are on the happiness meter. Join Steve as he takes us on an exploration of the best ways to measure performance of images.

1. @souders
SpeedCurve
Measuring
Image
Performance
flickr.com/lissalou66

2. Measuring
Image
Performance
flickr.com/lissalou66

3. size (kB)
download time
size (pixels)
amount
ATF
flickr.com/lissalou66

4. flickr.com/kk

9. image render

10. flickr.com/ksayer

11. critical blocking
resources
flickr.com/tipsterhog

16. image render

17. flickr.com/debord

18. Hero Element Timing
<img elementtiming='hero'…
https://www.w3.org/2016/09/23-webperf-minutes.html#item05
flickr.com/hippie

19. Hero Element Hack

20. <img src="hero.jpg">
Hero Element Hack

21. <img src="hero.jpg"
onload="performance.clearMeasures('hero');
performance.measure('hero')">
Hero Element Hack

22. <link rel="stylesheet" href="/huge-slow.css">
<img src="hero.jpg"
onload="performance.clearMeasures('hero');
performance.measure('hero')">
Hero Element Hack

23. <link rel="stylesheet" href="/huge-slow.css">
<script>
performance.clearMeasures('hero');
performance.measure('hero');
</script>
<img src="hero.jpg"
onload="performance.clearMeasures('hero');
performance.measure('hero')">
Hero Element Hack

25. blocking scripts:
not async, defer
before last visible DOM element
blocking stylesheets:
not loadCSS
not preloaded
not media="print"

26. size (kB)
download time
size (pixels)
amount
ATF
flickr.com/lissalou66

27. measure image render
Hero Element Timing
hero element hack
critical blocking resources
focus on UX flickr.com/dslminja

28. @souders
stevesouders.com/talks