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

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.

Patrick Hamann

April 24, 2013
Tweet

More Decks by Patrick Hamann

Other Decks in Programming

Transcript

  1. Measuring your
    websites
    performance
    Patrick Hamann
    Front-end London - April 2013
    Why performance matters

    View Slide

  2. Who am I?
    • @patrickhamann
    • Client-side developer
    • Performance geek

    View Slide

  3. Who I work for

    View Slide

  4. What am I going to cover?

    View Slide

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

    View Slide

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

    View Slide

  7. What am I going to cover?
    • Why performance matters
    • How to measure your websites
    performance bottlenecks
    • Myths, tips and best practices

    View Slide

  8. Ideal load time?

    View Slide

  9. < 3 secs

    View Slide

  10. Reality:

    View Slide

  11. 7.25 secs

    View Slide

  12. Page weight is increasing YoY
    Source: HTTPArchive

    View Slide

  13. 1.4 Mb

    View Slide

  14. User load time expectations
    Source: Web Performance Today

    View Slide

  15. 71% of users want your mobile site to
    load as fast as the desktop
    equivalent.
    Source: Gomez

    View Slide

  16. "We made the new platform
    60% faster and this resulted
    in a 14% increase in donation
    conversions."
    Kyle Rush - Obama Campaign

    View Slide

  17. Measuring performance
    Tools

    View Slide

  18. The critical path
    Network Parse Paint

    View Slide

  19. Waterfall analysis

    View Slide

  20. View Slide

  21. View Slide

  22. Size

    View Slide

  23. Size
    Latency

    View Slide

  24. Size
    Latency
    Download

    View Slide

  25. Size
    Latency
    Download
    DOMContentReady

    View Slide

  26. Size
    Latency
    Download
    DOMContentReady
    Load

    View Slide

  27. WebPageTest.org

    View Slide

  28. WebPageTest.org

    View Slide

  29. WebPageTest.org

    View Slide

  30. WebPageTest.org

    View Slide

  31. WebPageTest.org

    View Slide

  32. WebPageTest.org

    View Slide

  33. WebPageTest : Comparison

    View Slide

  34. WebPageTest : Video

    View Slide

  35. PROBLEMS

    View Slide

  36. Common performance bottlenecks
    • Latency
    • Payload
    • Caching
    • Paint

    View Slide

  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 ?!

    View Slide

  38. Reduce payload: 101
    • Compression
    • GZip (mod_deflate mod_pagespeed)
    • Concatenate CSS/JS
    • Defer to load event (lazy-load)
    • Conditional loading
    • Cache

    View Slide

  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 ?*&%!

    View Slide

  40. View Slide

  41. WTF!

    View Slide

  42. Reduce payload: Images
    • Compression:
    • Photoshop 60% > ImageOptim 25/70%
    • Progressive JPEGs
    • WebP
    • Base64 icons or icon fonts
    • Clean SVGs
    • No images at all?

    View Slide

  43. Progressive JPEGs
    Source: Performance calendar

    View Slide

  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

    View Slide

  45. Caching
    • Far-future cache headers
    • Invalidation
    • AppCache is broken :(
    • Mobile is harder
    • Smaller shared cache
    • Stuff critical assets in localStorage

    View Slide

  46. View Slide

  47. WTF!

    View Slide

  48. Render
    • Don't use setTimeout
    • Use request animation frame instead.
    • CSS Animations get over these issues.
    • Avoid recalculation
    • Bisecting slow CSS styles & elements

    View Slide

  49. Render: Timeline
    Source: Addy Osmani

    View Slide

  50. Continuous paint mode
    Source: HTML5 Rocks

    View Slide

  51. R.U.M

    View Slide

  52. Navigation timing API
    Source: W3C

    View Slide

  53. Navigation timing API
    Source: W3C

    View Slide

  54. View Slide

  55. View Slide

  56. Google Analytics: Site Speed

    View Slide

  57. HAR

    View Slide

  58. View Slide

  59. Automation: PhantomJS & YSlow
    Source: Ilya Grigorik

    View Slide

  60. Automation: HAR Storage
    Source: https://code.google.com/p/harstorage/

    View Slide

  61. Automation: CI Integration
    Build Test
    Deploy
    Users
    Monitor

    View Slide

  62. Automation: CI Integration
    Build Test
    Deploy
    Users
    Monitor
    YSlow

    View Slide

  63. The Future

    View Slide

  64. The Future
    • SPDY/HTTP 2.0

    View Slide

  65. The Future
    • SPDY/HTTP 2.0
    • Responsive images

    View Slide

  66. The Future
    • SPDY/HTTP 2.0
    • Responsive images

    View Slide

  67. The Future
    • SPDY/HTTP 2.0
    • Responsive images

    • Application controller

    View Slide

  68. The Future
    • SPDY/HTTP 2.0
    • Responsive images

    • Application controller
    • WebP

    View Slide

  69. The Future
    • SPDY/HTTP 2.0
    • Responsive images

    • Application controller
    • WebP
    • Client-hints

    View Slide

  70. The Future
    • SPDY/HTTP 2.0
    • Responsive images

    • Application controller
    • WebP
    • Client-hints
    • RESS?

    View Slide

  71. It sounds easy...
    • It’s not
    • Requires a lot of dev time
    • Maintenance and upkeep
    • How do you track regression?

    View Slide

  72. Performance budget
    • Optimize an existing feature or asset
    • Remove an existing feature or asset
    • Don’t add the new feature or asset

    View Slide

  73. PERFORMANCE
    FIRST

    View Slide

  74. Thank you!
    @patrickhamann
    Front-end London - April 2013
    We’re hiring!

    View Slide