Slapdash

Web Performance

Web Performance

Metrics

Quantitative Metrics

  • Not good for absolute evaluation, but good for before/after comparison
  • Example: number of JS files (may not apply anymore with HTTP/2, maybe total bytes instead)

Rule-Based Metrics

  • Score against industry best practices
    • May not matter for your site
  • Google PageSpeed

Milestone Metrics

  • Time to first byte: figuring out if backend is fast or slow
    • Need to break down into segments to see when different factors affect it
      • DNS
      • TCP
      • TLS
      • TTFB
  • Time to first paint
  • Time to DOM content loaded
  • Time to first meaningful paint/time to first contentful paint
  • Time to first [meaningful] interaction (relates to hydration)
  • App-specific ones

Perceived Metrics

  • Speed Index: a single number that measures how much “differences over time” there is

Real User Monitoring

  • W3C Web Performance Working Group provides a solution
    • Navigation Timing: HTML only
    • Resource Timing: images etc
    • User Timing: app-specific events?
    • Beacon: way to send data to a server
  • Is it actually slow for someone in a real condition?
  • Tests all real combinations

Synthentic Testing

  • Answers “how do I make my page faster”?
  • Specially-instrumented browsers that gather lots of data
  • webpagetest.org

Continuous Improvement

  • cli commands that check for certain measures and fail if you regress

What’s Fast Enough?

  • Psychology research
    • 100ms feels instant
    • 1,000ms uninterrupted thought - recommended Speed Index
    • 10,000ms lose attention
  • Competitive analysis: beat your competitors by 20% as that’s when people switch for performance alone

Techniques

  • Bundling
  • Caching
  • Compression
  • Dead Code Elimination
  • Deferred Loading
  • Preloading

https://vimeo.com/113715672 http://designingforperformance.com/basics-of-page-speed/

  • Fewer requests
    • Bundling
  • Less data transferred
    • Compression
    • Minification
    • Dead Code elimination
  • Defer requests until after page loaded
    • Deferred loading
  • Defer requests until a feature is needed
  • Only load assets if required by the browser
    • Optional loading
  • Preloading assets anticipated needed for the future

Resources