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.

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