The document discusses an interactive workshop about web performance metrics like Speed Index. It provides definitions and examples of Speed Index, how it can be measured using various tools, and how it can be integrated with analytics platforms. Links are included to resources about measuring first contentful paint, loading core content, and the W3C User Timing API for custom performance metrics.

1. INTERACTIVE WORKSHOP
@andreapernici
+AndreaPerniciCTO & CO-Founder
gt idea srl

5. wpostats.com

6. wpostats.com

7. wpostats.com

8. wpostats.com

9. wpostats.com

14. Google Search chief Amit Shingal - sourceOctober 2015

15. 894 million
3rd Quarter 2015 Facebook Report - sourceNovember 2015

17. https://www.ampproject.org/

20. Supported Advertising Networks:
Twitter, A9, AdReactor, AdSense, AdTech, DoubleClick
Supported Analytics Platform:
Analytics: Google Analytics, Adobe Analytics, Chartbeat and Parse.ly
Not yet ready for paywalls and subscriptions
You loose most of the power of modern
web technologies

22. https://instantarticles.fb.com/

24. FACEBOOK
SMARTER THAN
GOOGLE
Again...

25. https://developer.apple.com/news-publisher/

27. http://insidesearch.blogspot.it/2015/11/new-ways-to-find-and-stream-app-content.html

29. http://blog.chromium.org/2015/09/chrome-custom-tabs-smooth-transition_2.html

30. SPEED INDEX
https://goo.gl/3sKU1r

31. https://goo.gl/MRZueM

32. https://jakearchibald.com/2014/using-serviceworker-today/

38. https://developers.google.com/speed/docs/insights/rules#speed-rules
http://conferences.oreilly.com/velocity/devops-web-performance-2015/public/schedule/detail/42385

42. https://goo.gl/3sKU1r

44. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

47. Speed Index
= 1685
Speed Index
= 5235

49. SELECT
AVG (SpeedIndex),
NTH(51, QUANTILES(SpeedIndex)),
NTH(10, QUANTILES(SpeedIndex)),
NTH(25, QUANTILES(SpeedIndex)),
NTH(75, QUANTILES(SpeedIndex)),
NTH(95, QUANTILES(SpeedIndex))
FROM
[httparchive:runs.2010_11_15_pages]
WHERE rank < 300000
10° Percentile = 526
25° Percentile = 1733
Median = 3201
Average = 3800
75° Percentile = 5100
95° Percentile = 9058
Courtesy of HTTPArchive and Big Query

52. <script
src="/RUM/rum-speedindex.js">
</script>
<script>
var metricValue = RUMSpeedIndex();
</script>
<script>
…YOUR GOOGLE ANALYTICS CODE…
ga('set', 'metric1', math.round(metricValue));
ga('send', 'pageview');
…
</script>
https://github.com/WPO-Foundation/RUM-SpeedIndex/

54. Only works for browsers that
support Resource Timings
(most modern browsers except Safari)
Does not handle content within iframes
(possible, just not implemented yet)
Works better for IE and Chrome
which both support reporting
a "first paint" event.

55. Steve Souders

56. http://www.w3.org/TR/user-timing/

57. WE CAN MEASURE WHEN
THESE CORE CONTENT
ARE LOADED AND VISIBILE

58. USER TIMING

60. https://developers.google.com/analytics/devguides/collection/analyticsjs/user-timings?hl=en