Web Performance: Forget Everything I Said Last Time

An updated version of my web performance talk from a few years ago. Here we explain what's changed, what's the same, and how to dive deeper into user centric performance metrics.

Transcript

1. WEB PERFORMANCE FORGET EVERYTHING I TOLD YOU LAST TIME
2. FLASHBACK
3. WHAT WE DISCUSSED LAST TIME ▸ Page Load Time Sucks ▸ Time to First Byte ▸ Speed Index ▸ Page Weight
4. WHAT WE DISCUSSED LAST TIME ▸ Performance False Prophets: ▸ Google AMP ▸ Facebook Instant Articles ▸ Apple News Articles
5. WHAT WE DISCUSSED LAST TIME ▸ We need Performance Budgets ▸ Use the right type of images ▸ PNGs can be better than JPEGs ▸ Sometimes all you need is an SVG ▸ WebP All The Things (when it helps) ▸ Measure Measure Measure!!!
6. WHAT WE DISCUSSED LAST TIME ▸ Why performance matters: ▸ Long load times impacted bounce rate and conversion rate ▸ We knew somehow it impacted the bottom line of businesses selling online ▸ Slow sites suck
7. WHAT’S NEW
8. Patrick Meenan and Tammy Everts
9. Patrick Meenan and Tammy Everts
10. Patrick Meenan and Tammy Everts
11. Patrick Meenan and Tammy Everts
12. HOW MUCH ARE YOU LEAVING ON THE TABLE?
13. DEMO: SPEED SCORECARD mattshull.com/webperf2018
14. USER CENTRIC METRICS
15. SPEED INDEX ▸ Helps us understand how fast the user perceived the page to load ▸ Number of seconds when 90% of the above the fold content loaded ▸ Ability to track “in the lab” for the last few years ▸ Ability to track “in the field” somewhat available
16. SPEED INDEX
17. NEW QUESTIONS ▸ Is it useful? ▸ Is it usable? ▸ Is it delightful?
18. NEW METRICS
19. FIRST MEANINGFUL PAINT ▸ Answers the “is it useful?” question ▸ Useful is subjective and hard to measure
20. FIRST MEANINGFUL PAINT
21. FIRST MEANINGFUL PAINT ▸ Answers the “is it useful?” question ▸ Useful is subjective and hard to measure ▸ “Hero Elements” ▸ Loading these important parts first makes the user perceive the page is loading faster
22. FIRST INTERACTIVE ▸ Time when the page is both visually rendered and capable of reliably responding to user input ▸ Reasons for long FI: ▸ JavaScript needed to make components on the page work hasn’t loaded ▸ There are long tasks blocking the main thread
23. CONSISTENTLY INTERACTIVE & INPUT LATENCY ▸ Consistently Interactive ▸ Time at when the main thread is able to consistently respond to user input ▸ Input Latency ▸ Should be 100ms or less for a smooth, interactive experience
24. SO WHAT? mattshull.com/webperf2018
25. BETTER TOOLING
26. “IN THE LAB” TESTING: LIGHTHOUSE ▸ Created by Google ▸ Allows you to measure performance and other important features/analytics ▸ Takes measurements from Javascript and other tools (such as ffmpeg for screen captures)
27. mattshull.com/webperf2018 DEMO: LIGHTHOUSE
28. “IN THE LAB” TESTING: WEBPAGETEST.ORG ▸ Still a great tool for measuring: ▸ Time to First Byte ▸ Speed Index ▸ Page Weight
29. “IN THE LAB” TESTING: WEBPAGETEST.ORG
30. “IN THE LAB” TESTING: WEBPAGETEST.ORG
31. “IN THE FIELD” TESTING: FIRST PAINT & FIRST CONTENTFUL PAINT
32. “IN THE FIELD” TESTING: FIRST PAINT & FIRST CONTENTFUL PAINT
33. “IN THE FIELD” TESTING: FIRST PAINT & FIRST CONTENTFUL PAINT
34. “IN THE FIELD” TESTING: FIRST MEANINGFUL PAINT
35. “IN THE FIELD” TESTING: FIRST MEANINGFUL PAINT
36. “IN THE FIELD” TESTING: FIRST MEANINGFUL PAINT
37. “IN THE FIELD” TESTING: FIRST CONSISTENTLY INTERACTIVE
38. WHAT’S COMING
39. REMEMBER GOOGLE AMP? mattshull.com/webperf2018
40. MACHINE LEARNING ▸ Going to really give us actionable insights ▸ Find correlations between metrics that we don’t realize impact each other ▸ Also a buzz word! (But really it’s just stats and programming)
41. TAKE AWAYS
42. NEW METRICS ▸ First Meaningful Paint ▸ First Interactive / Consistently Interactive ▸ Input Latency
43. OLDER METRICS STILL WORK! ▸ Time to First Byte ▸ Speed Index ▸ Page Weight
44. MEASURE MEASURE MEASURE ▸ Lighthouse in Chrome Dev Tools ▸ WebPageTest.org ▸ Javascript metrics ▸ Find the metrics that are important to you
45. PERFORMANCE ISN’T A SINGLE POINT IN TIME
46. MATT SHULL Web Performance Consultant
 mattshull.com/webperf2018