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

Codegarden 2016

Codegarden 2016

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

Matt Shull

June 15, 2016
Tweet

More Decks by Matt Shull

Other Decks in Technology

Transcript

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

    View Slide

  2. Matt Shull
    Director of Aristotle Labs


    mattshull.com"

    @themattshull"

    [email protected]

    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