Presented at: All Things Open 2019 Presented by: Henri Helvetica

1. the metric system.⚡ making correct performance measurements.

2. the metric system.
making correct performance measurements.

3. henri.
@henrihelvetica

4. evolution of web.

5. evolution of web.

6. evolution of web development.

7. evolution of web browser.

8. firebug.
https://youtu.be/k4IgewBsxmY

9. Firebug basically exists for 2 reasons: one
is to show you what is going on on your
page when it loads, the other is to show
you what happens after the page loads.
- joe hewitt, firebug author.
https://youtu.be/k4IgewBsxmY

10. https://youtu.be/k4IgewBsxmY

11. you cannot improve what
you cannot measure.

12. anything that you can
measure is essentially a
metric.

13. metric: |ˈmetrik |
noun
1 technical a system or standard of measurement.

14. https://www.farmersalmanac.com/sundials-time-began-18870

15. 🖥 ⌨ [enter]

19. ⏱ onload.
✅ a classic metric.
✅ no complexity
✅ well quoted & referenced.

20. https://www.sbnation.com/2012/8/11/3236196/mens-4-x-100m-relay-gold-medal

21. ⏱ onload.
✅ a classic metric.
✅ no complexity
✅ well quoted & referenced.
⚠ does not reflect modern measurements.

22. ⏱ time to first byte (ttfb).
✅ a classic metric.
✅ not much complexity
⚠ not very significant

23. ⏱ start render.
⏱ dom content loaded.
⏱ requests.
⏱ bytes in.

24. total bytes.
0
1750
3500
5250
7000
p10 p25 p50 p75 p90
desktop mobile
https://httparchive.org/
reports/state-of-the-web

25. javascript.
desktop 🖥
mobile 📲
⬆ 40% in 3yrs
⬆ 53% in 3yrs
per req. 760 bytes Δ
https://httparchive.org/reports/
state-of-javascript

26. images.
desktop 🖥
mobile 📲
⬆ 29% in 3yrs
⬆ 110% in 3yrs
per req. 211 bytes Δ
https://httparchive.org/
reports/state-of-images

27. user experience.

28. resource loading is a delicate
dance that can be delightful, but
also destructive due to device
damper and limitations.
- henri helvetica

29. mobile and tablet internet usage exceeds
desktop for first time worldwide. (2016)
https://gs.statcounter.com/press/mobile-
and-tablet-internet-usage-exceeds-
desktop-for-first-time-worldwide

30. lighthouse.
https://developers.google.com/
web/tools/lighthouse

32. ⏱ newer metrics.

33. page performance is in
equal parts proof &
perception.

34. ⏱ paint metrics.
https://www.w3.org/TR/2017/WD-paint-
timing-20170907/#first-contentful-paint

35. ⏱ first paint.
⏱ first contentful paint.
⏱ first meaningful paint.
⏱ largest contentful paint.
https://www.w3.org/TR/2017/WD-paint-
timing-20170907/#first-contentful-paint

36. ⏱ first paint.
⏱ first contentful paint. ✅
⏱ first meaningful paint. ❌
⏱ largest contentful paint. 🧪

37. first contentful paint reports the time when the
browser first rendered any text, image (including
background images), non-white canvas or SVG.
This excludes any content of iframes, but
includes text with pending webfonts. This is the
first time users could start consuming page
content.
⏱ first contentful paint.
https://www.w3.org/TR/2017/WD-paint-
timing-20170907/#first-contentful-paint

38. ⏱ largest contentful paint. 🧪
https://web.dev/largest-contentful-paint

39. ⏱ speed index.
the Speed Index is the average time at which
visible parts of the page are displayed. It is
expressed in milliseconds and dependent on
size of the view port.
https://sites.google.com/a/webpagetest.org/
docs/using-webpagetest/metrics/speed-index

42. ⏱ time to interactive.
the point at which your application is both
visually rendered and capable of reliably
respond to user input.
https://web.dev/interactive

43. ⏱ time to interactive.
✅ the page has displayed useful content, measured
with First Contentful Paint.
✅ event handlers are registered for most visible
page elements.
✅ The page responds to user interactions within
50 milliseconds.

44. ⏱ first cpu idle.
⏱ first input delay.
⏱ total blocking time. 🧪
⏱ hero rendering times. 🧪
https://web.dev/first-cpu-idle
https://web.dev/max-potential-fid
https://docs.google.com/document/d/1xCERB_X7PiP5RAZDwyIkODnIXoBk-Oo7Mi9266aEdGg/edit#
https://speedcurve.com/blog/web-performance-monitoring-hero-times/

45. Load is not a single
moment in time — it is an
experience that no one
metric can fully capture.
- phil walton, google.
https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics

46. so what now?

49. BLEACHER REPORT
%USERS
0
3
6
9
12
200 400 600 800 100012001400160018002000220024002600280030003500400045005000
fcp - sports blogs.

50. https://wpostats.com

51. merci.+