Codegarden 2016

Talk on web performance and Umbraco. Given at Codegarden 2016 in Odense, Denmark.

Transcript

1. #webperf and Umbraco
   Codegarden 2016 – Odense, Denmark
   

   View Slide

2. Matt Shull
   Director of Aristotle Labs
   
   
   mattshull.com"
   
   @themattshull"
   
   mshull@aristotleweb.com
   

   View Slide

3. aristotlelabs.com/cg16
   

   View Slide

4. Why Performance Matters
   First and foremost, we believe that
   speed is more than a feature.
   Speed is the most important
   feature.
   -Fred Wilson
   

   View Slide

5. Why Performance Matters
   

   View Slide

6. Why Performance Matters
   

   View Slide

7. View Slide

8. 40% of users will
   abandon a request
   if it doesn’t load within 3 seconds.
   

   View Slide

9. View Slide

10. 2% increase in
    conversions
    for every 1 second load time decreased
    

    View Slide

11. 80% decrease in"
    load time
    80% increase in traffic
    32% increase in median time spent on site
    

    View Slide

12. 0.3second decrease"
    in latency
    customers spent an extra £8 million a year
    

    View Slide

13. What is
    web performance?
    

    View Slide

14. Total Load Time
    

    View Slide

15. Time to First Byte
    TTFB measures the duration from
    the user or client making an HTTP
    request to the first byte of the page
    being received by the client's
    browser.
    

    View Slide

16. View Slide

17. View Slide

18. Time to First Byte
    •  Rendering of server side code
    – API calls
    – Slow SQL queries"
    
    •  Connection to the server
    – Memory leaks
    – Poor server resources
    

    View Slide

19. Speed Index
    Speed Index is the average time at
    which visible parts of the page are
    displayed. It is expressed in
    milliseconds and dependent on size
    of the view port.
    

    View Slide

20. Page Size
    Page size measures the number of
    kilobytes the site downloads to the
    user’s device.
    

    View Slide

21. Where do I start?
    

    View Slide

22. Images
    ~63%
    http://httparchive.org/interesting.php
    

    View Slide

23. Image File Types
    WebP
    •  Uses transparency
    •  Animation
    •  Photographs
    •  50%-75% smaller
    •  Android and Chrome
    

    View Slide

24. Image File Types
    JPEG2000
    •  Uses transparency
    •  Photographs
    •  Sometimes smaller
    •  Safari
    

    View Slide

25. Responsive Images
     
             
                     
                     
                     
                     
                     
                     
                     
               
     
    

    View Slide

26. Responsive Background Images
    https://modernizr.com/
     
           .webp  .container  {  
     background-­‐image:  url(‘image.webp’);  
           }  
     
           .no-­‐webp  .container  {  
     background-­‐image:  url(‘image.jpeg’);  
           }  
     
    

    View Slide

27. CSS
    ~3.5%
    http://httparchive.org/interesting.php
    

    View Slide

28. CSS
    •  Minify files"
    
    •  Split into 3 files
    – Above the fold main page
    – Below the fold main page
    – Interior
    •  Use LoadCSS to load in below the fold css
    – Use as a fallback
    

    View Slide

29. Fonts
    ~5.5%
    http://httparchive.org/interesting.php
    

    View Slide

30. Fonts
    •  Reduce font weights"
    
    •  Strip out characters not needed using Font Squirrel"
    "
    
    •  Use browser font loading events"
    
    •  FOIT vs FOUT
    

    View Slide

31. Javascript
    ~16%
    http://httparchive.org/interesting.php
    

    View Slide

32. Javascript
    •  Minify files
    •  Use HTML/CSS alternatives
    – Image rotators
    – Tabs
    – Responsive Navigation
    •  Split into mainpage.js and interior.js
    

    View Slide

33. Javascript
    

    View Slide

34. Javascript: Lessons Learned
    •  Javascript Libraries
    •  Umbraco Forms
    •  AJAX all the things!
    

    View Slide

35. Browser Hints
    •  DNS Prefetch"
    
    •  Preconnect"
    
    •  Prefetch"
    
    •  Prerender
    

    View Slide

36. Browser Hints: Prefetch
    Download and cache specific files
    once the browser is idle."
    
     
    
     
     
    

    View Slide

37. Browser Hints: Prerender
    Download and cache an entire page."
    
     
    
     
     
    

    View Slide

38. Measuring
    Performance
    

    View Slide

39. Measuring Performance
    •  RUM
    – Real User Data
    – Measured using browser APIs
    •  Synthetic
    – Simulated User Testing
    – Simulated using real devices and browsers
    

    View Slide

40. Median vs Average
    

    View Slide

41. On-demand testing: WebPageTest.org
    Monitoring: GetSwiftSage.com
    Synthetic Testing
    

    View Slide

42. View Slide

43. GetSwiftSage.com/cg16
    

    View Slide

44. Beware of False Performance Prophets
    •  Google AMP"
    
    •  Facebook Instant Articles
    •  Apple News
    

    View Slide

45. Everything should have value,
    because everything has a cost
    Tim Kadlec
    

    View Slide

46. Creating a Culture of Performance
    •  Has to come from the top down
    – Show the impact performance has on business
    – Use video to show you vs competitor"
    
    •  Create a Performance Budget / Specification"
    
    •  Recognize developers and designers great work
    

    View Slide

47. Performance Budget
    •  HTML: 5%
    •  CSS: 10%
    •  Javascript: 10%
    •  Images: 65%
    •  Fonts: 5%
    •  Other: 5%"
    
    •  Page Size Goal: 1500 kb (+/- 500 kb)
    

    View Slide

48. Performance Awards
    

    View Slide

49. What’s Next?
    •  Javascript API for detecting connection speed"
    
    •  Measuring speed index in RUM"
    
    •  How does web performance impact conversions and
    user behavior?
    

    View Slide

50. We’re Just Scratching the Surface
    •  Designing for Performance by Lara Hogan"
    
    •  Follow Tammy Everts on Twitter and Blog"
    
    •  Follow Steve Souders Twitter and Blog"
    
    •  Follow me and @getswiftsage on Twitter"
    
    •  More resources at aristotlelabs.com/cg16
    

    View Slide

51. Thank you!
    aristotlelabs.com/cg16
    getswiftsage.com/cg16
    

    View Slide