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.
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!!!
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
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
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
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
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
“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)
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)
mattshull
sbtechnight
sqlmaria
excitejp
ytsuzaki
imanolteran
ryomaru0825
stefafafan
hariby
datarian
oracle4engineer
jacopen
yeseniaperezcruz
jcasabona
addyosmani
tmm1
geoffreycrofte
afnizarnur
trishagee
lara
caitiem20
moore
bkeepers
michaelherold