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 full-size slide

  2. Matt Shull
    Director of Aristotle Labs


    mattshull.com"

    @themattshull"

    [email protected]

    View full-size slide

  3. aristotlelabs.com/cg16

    View full-size 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 full-size slide

  5. Why Performance Matters

    View full-size slide

  6. Why Performance Matters

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. What is
    web performance?

    View full-size slide

  12. Total Load Time

    View full-size slide

  13. 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 full-size slide

  14. Time to First Byte
    •  Rendering of server side code
    – API calls
    – Slow SQL queries"

    •  Connection to the server
    – Memory leaks
    – Poor server resources

    View full-size slide

  15. 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 full-size slide

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

    View full-size slide

  17. Where do I start?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Responsive Images
     
             
                     
                     
                     
                     
                     
                     
                     
               
     

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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 full-size slide

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

    View full-size slide

  26. Fonts
    •  Reduce font weights"

    •  Strip out characters not needed using Font Squirrel"
    "

    •  Use browser font loading events"

    •  FOIT vs FOUT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. Browser Hints
    •  DNS Prefetch"

    •  Preconnect"

    •  Prefetch"

    •  Prerender

    View full-size slide

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

     

     
     

    View full-size slide

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

     

     
     

    View full-size slide

  33. Measuring
    Performance

    View full-size slide

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

    View full-size slide

  35. Median vs Average

    View full-size slide

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

    View full-size slide

  37. GetSwiftSage.com/cg16

    View full-size slide

  38. Beware of False Performance Prophets
    •  Google AMP"

    •  Facebook Instant Articles
    •  Apple News

    View full-size slide

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

    View full-size slide

  40. 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 full-size slide

  41. Performance Budget
    •  HTML: 5%
    •  CSS: 10%
    •  Javascript: 10%
    •  Images: 65%
    •  Fonts: 5%
    •  Other: 5%"

    •  Page Size Goal: 1500 kb (+/- 500 kb)

    View full-size slide

  42. Performance Awards

    View full-size slide

  43. What’s Next?
    •  Javascript API for detecting connection speed"

    •  Measuring speed index in RUM"

    •  How does web performance impact conversions and
    user behavior?

    View full-size slide

  44. 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 full-size slide

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

    View full-size slide