Why performance matters: Measuring your websites performance

Why performance matters: Measuring your websites performance

A brief introduction to client-side performance. How to measure your websites performance bottlenecks. Followed by a few tips and best practices to overcome common client-side performance issues and some examples of how we are tackling these issues at the Guardian.

276c149f793de9af4e98991ed52ff874?s=128

Patrick Hamann

April 24, 2013
Tweet

Transcript

  1. 6.

    What am I going to cover? • Why performance matters

    • How to measure your websites performance bottlenecks
  2. 7.

    What am I going to cover? • Why performance matters

    • How to measure your websites performance bottlenecks • Myths, tips and best practices
  3. 10.
  4. 11.
  5. 13.
  6. 15.

    71% of users want your mobile site to load as

    fast as the desktop equivalent. Source: Gomez
  7. 16.

    "We made the new platform 60% faster and this resulted

    in a 14% increase in donation conversions." Kyle Rush - Obama Campaign
  8. 20.
  9. 21.
  10. 22.
  11. 35.
  12. 37.

    Latency • Time to first byte (TTFB) • Incurred on

    every request • Much worse on mobile • CDN’s • The closer to the user, the lower the latency • Edge side compression • HTML ?!
  13. 38.

    Reduce payload: 101 • Compression • GZip (mod_deflate mod_pagespeed) •

    Concatenate CSS/JS • Defer to load event (lazy-load) • Conditional loading • Cache
  14. 39.

    Reduce payload: CSS • Only resource that should block the

    parser! • Load only bare minimum for page chrome • Conditionally load the rest • Browsers download CSS they don't need : e.g. print, tv, device-ratio... • Serve of same host - no DNS lookup • Inline ?*&%!
  15. 40.
  16. 41.
  17. 42.

    Reduce payload: Images • Compression: • Photoshop 60% > ImageOptim

    25/70% • Progressive JPEGs • WebP • Base64 icons or icon fonts • Clean SVGs • No images at all?
  18. 44.

    WebP - Content negotiation WebP lossless images are 26% smaller

    in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG Source: NetDNA blog
  19. 45.

    Caching • Far-future cache headers • Invalidation • AppCache is

    broken :( • Mobile is harder • Smaller shared cache • Stuff critical assets in localStorage
  20. 46.
  21. 47.
  22. 48.

    Render • Don't use setTimeout • Use request animation frame

    instead. • CSS Animations get over these issues. • Avoid recalculation • Bisecting slow CSS styles & elements
  23. 51.
  24. 54.
  25. 55.
  26. 57.

    HAR

  27. 58.
  28. 67.
  29. 68.

    The Future • SPDY/HTTP 2.0 • Responsive images • <image

    defer/> • Application controller • WebP
  30. 69.

    The Future • SPDY/HTTP 2.0 • Responsive images • <image

    defer/> • Application controller • WebP • Client-hints
  31. 70.

    The Future • SPDY/HTTP 2.0 • Responsive images • <image

    defer/> • Application controller • WebP • Client-hints • RESS?
  32. 71.

    It sounds easy... • It’s not • Requires a lot

    of dev time • Maintenance and upkeep • How do you track regression?
  33. 72.

    Performance budget • Optimize an existing feature or asset •

    Remove an existing feature or asset • Don’t add the new feature or asset