Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Why performance matters: Measuring your website...

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.

Patrick Hamann

April 24, 2013
Tweet

More Decks by Patrick Hamann

Other Decks in Programming

Transcript

  1. What am I going to cover? • Why performance matters

    • How to measure your websites performance bottlenecks
  2. What am I going to cover? • Why performance matters

    • How to measure your websites performance bottlenecks • Myths, tips and best practices
  3. 71% of users want your mobile site to load as

    fast as the desktop equivalent. Source: Gomez
  4. "We made the new platform 60% faster and this resulted

    in a 14% increase in donation conversions." Kyle Rush - Obama Campaign
  5. 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 ?!
  6. Reduce payload: 101 • Compression • GZip (mod_deflate mod_pagespeed) •

    Concatenate CSS/JS • Defer to load event (lazy-load) • Conditional loading • Cache
  7. 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 ?*&%!
  8. Reduce payload: Images • Compression: • Photoshop 60% > ImageOptim

    25/70% • Progressive JPEGs • WebP • Base64 icons or icon fonts • Clean SVGs • No images at all?
  9. 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
  10. Caching • Far-future cache headers • Invalidation • AppCache is

    broken :( • Mobile is harder • Smaller shared cache • Stuff critical assets in localStorage
  11. Render • Don't use setTimeout • Use request animation frame

    instead. • CSS Animations get over these issues. • Avoid recalculation • Bisecting slow CSS styles & elements
  12. HAR

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

    defer/> • Application controller • WebP
  14. The Future • SPDY/HTTP 2.0 • Responsive images • <image

    defer/> • Application controller • WebP • Client-hints
  15. The Future • SPDY/HTTP 2.0 • Responsive images • <image

    defer/> • Application controller • WebP • Client-hints • RESS?
  16. It sounds easy... • It’s not • Requires a lot

    of dev time • Maintenance and upkeep • How do you track regression?
  17. Performance budget • Optimize an existing feature or asset •

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