Web Performance: Forget Everything I Said Last Time

by Matt Shull

Slide 1

Slide 1 text

WEB PERFORMANCE FORGET EVERYTHING I TOLD YOU LAST TIME

Slide 2

Slide 2 text

FLASHBACK

Slide 3

Slide 3 text

WHAT WE DISCUSSED LAST TIME ▸ Page Load Time Sucks ▸ Time to First Byte ▸ Speed Index ▸ Page Weight

Slide 4

Slide 4 text

WHAT WE DISCUSSED LAST TIME ▸ Performance False Prophets: ▸ Google AMP ▸ Facebook Instant Articles ▸ Apple News Articles

Slide 5

Slide 5 text

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!!!

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

WHAT’S NEW

Slide 8

Slide 8 text

Patrick Meenan and Tammy Everts

Slide 9

Slide 9 text

Patrick Meenan and Tammy Everts

Slide 10

Slide 10 text

Patrick Meenan and Tammy Everts

Slide 11

Slide 11 text

Patrick Meenan and Tammy Everts

Slide 12

Slide 12 text

HOW MUCH ARE YOU LEAVING ON THE TABLE?

Slide 13

Slide 13 text

DEMO: SPEED SCORECARD mattshull.com/webperf2018

Slide 14

Slide 14 text

USER CENTRIC METRICS

Slide 15

Slide 15 text

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 ﬁeld” somewhat available

Slide 16

Slide 16 text

SPEED INDEX

Slide 17

Slide 17 text

NEW QUESTIONS ▸ Is it useful? ▸ Is it usable? ▸ Is it delightful?

Slide 18

Slide 18 text

NEW METRICS

Slide 19

Slide 19 text

FIRST MEANINGFUL PAINT ▸ Answers the “is it useful?” question ▸ Useful is subjective and hard to measure

Slide 20

Slide 20 text

FIRST MEANINGFUL PAINT

Slide 21

Slide 21 text

FIRST MEANINGFUL PAINT ▸ Answers the “is it useful?” question ▸ Useful is subjective and hard to measure ▸ “Hero Elements” ▸ Loading these important parts ﬁrst makes the user perceive the page is loading faster

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

SO WHAT? mattshull.com/webperf2018

Slide 25

Slide 25 text

BETTER TOOLING

Slide 26

Slide 26 text

“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)

Slide 27

Slide 27 text

mattshull.com/webperf2018 DEMO: LIGHTHOUSE

Slide 28

Slide 28 text

“IN THE LAB” TESTING: WEBPAGETEST.ORG ▸ Still a great tool for measuring: ▸ Time to First Byte ▸ Speed Index ▸ Page Weight

Slide 29

Slide 29 text

“IN THE LAB” TESTING: WEBPAGETEST.ORG

Slide 30

Slide 30 text

“IN THE LAB” TESTING: WEBPAGETEST.ORG

Slide 31

Slide 31 text

“IN THE FIELD” TESTING: FIRST PAINT & FIRST CONTENTFUL PAINT

Slide 32

Slide 32 text

“IN THE FIELD” TESTING: FIRST PAINT & FIRST CONTENTFUL PAINT

Slide 33

Slide 33 text

“IN THE FIELD” TESTING: FIRST PAINT & FIRST CONTENTFUL PAINT

Slide 34

Slide 34 text

“IN THE FIELD” TESTING: FIRST MEANINGFUL PAINT

Slide 35

Slide 35 text

“IN THE FIELD” TESTING: FIRST MEANINGFUL PAINT

Slide 36

Slide 36 text

“IN THE FIELD” TESTING: FIRST MEANINGFUL PAINT

Slide 37

Slide 37 text

“IN THE FIELD” TESTING: FIRST CONSISTENTLY INTERACTIVE

Slide 38

Slide 38 text

WHAT’S COMING

Slide 39

Slide 39 text

REMEMBER GOOGLE AMP? mattshull.com/webperf2018

Slide 40

Slide 40 text

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)

Slide 41

Slide 41 text

TAKE AWAYS

Slide 42

Slide 42 text

NEW METRICS ▸ First Meaningful Paint ▸ First Interactive / Consistently Interactive ▸ Input Latency

Slide 43

Slide 43 text

OLDER METRICS STILL WORK! ▸ Time to First Byte ▸ Speed Index ▸ Page Weight

Slide 44

Slide 44 text

MEASURE MEASURE MEASURE ▸ Lighthouse in Chrome Dev Tools ▸ WebPageTest.org ▸ Javascript metrics ▸ Find the metrics that are important to you