Web Performance 101

David Novicki

Why?!

Why WE care

• Our app is growing in size everyday
• Large data sources served via client-side
• A user's flow of thoughts change > 1s
• Performance can impact our consultants the ability to deliver their service

What are some metrics we care about?

https://medium.com/@novicki_david/web-performance-metrics-everyone-should-care-about-63e395c50778

Goals

• Speed Index < 1-2.5s
• First meaningful paint 1-3s
• First interactive 2-4s

How do we measure?

https://medium.com/@novicki_david/measuring-web-performance-tools-101-f95ad7c8e86a

General Improvements

• HTTP/2 -> HTTP/3
• Client-side Caching
• CSS trimming
• Code Splitting
• DNS-prefetch
• No images in CSS

Extreme Optimizations

• ATF in 14.6 KiB
• Avoid HTTP to HTTPS redirects (hstspreload.org)
• zopfli/brotli > gzip ~25% data transfer savings
• Readable Streams
• Cache-control: immutable
• Stale while Revalidate
• Font-display: optional or swap
• Long Task tracking
• Avoid unnecessary repaints