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.

7b8d0adf6fd2decedeb551dc9dd027de?s=128

Matt Shull

June 15, 2016
Tweet

Transcript

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

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

  3. aristotlelabs.com/cg16

  4. Why Performance Matters First and foremost, we believe that speed

    is more than a feature. Speed is the most important feature. -Fred Wilson
  5. Why Performance Matters

  6. Why Performance Matters

  7. None
  8. 40% of users will abandon a request if it doesn’t

    load within 3 seconds.
  9. None
  10. 2% increase in conversions for every 1 second load time

    decreased
  11. 80% decrease in" load time 80% increase in traffic 32%

    increase in median time spent on site
  12. 0.3second decrease" in latency customers spent an extra £8 million

    a year
  13. What is web performance?

  14. Total Load Time

  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.
  16. None
  17. None
  18. Time to First Byte •  Rendering of server side code

    – API calls – Slow SQL queries" •  Connection to the server – Memory leaks – Poor server resources
  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.
  20. Page Size Page size measures the number of kilobytes the

    site downloads to the user’s device.
  21. Where do I start?

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

  23. Image File Types WebP •  Uses transparency •  Animation • 

    Photographs •  50%-75% smaller •  Android and Chrome
  24. Image File Types JPEG2000 •  Uses transparency •  Photographs • 

    Sometimes smaller •  Safari
  25. Responsive Images          <picture>      

               <source  srcset=“./large.webp”  type=“image/webp”  media=“(min-­‐width:  800px)”>                  <source  srcset=“./large.jpf”  type=“image/jpf”  media=“(min-­‐width:  800px)”>                  <source  srcset=“./large.jpg”  type=“image/jpg”  media=“(min-­‐width:  800px)”>                  <source  srcset=“./small.webp”  type=“image/webp”  media=“(max-­‐width:  799px)”>                  <source  srcset=“./small.jpf”  type=“image/jpf”  media=“(max-­‐width:  799px)”>                  <source  srcset=“./small.jpg”  type=“image/jpg”  media=“(max-­‐width:  799px)”>                  <img  srcset=“./large.jpg”  alt=“…”>          </picture>      
  26. Responsive Background Images https://modernizr.com/          .webp  .container

     {    background-­‐image:  url(‘image.webp’);          }            .no-­‐webp  .container  {    background-­‐image:  url(‘image.jpeg’);          }    
  27. CSS ~3.5% http://httparchive.org/interesting.php

  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 <noscript> as a fallback
  29. Fonts ~5.5% http://httparchive.org/interesting.php

  30. Fonts •  Reduce font weights" •  Strip out characters not

    needed using Font Squirrel" " •  Use browser font loading events" •  FOIT vs FOUT
  31. Javascript ~16% http://httparchive.org/interesting.php

  32. Javascript •  Minify files •  Use HTML/CSS alternatives – Image rotators

    – Tabs – Responsive Navigation •  Split into mainpage.js and interior.js
  33. Javascript

  34. Javascript: Lessons Learned •  Javascript Libraries •  Umbraco Forms • 

    AJAX all the things!
  35. Browser Hints •  DNS Prefetch" •  Preconnect" •  Prefetch" • 

    Prerender
  36. Browser Hints: Prefetch Download and cache specific files once the

    browser is idle."   <link  rel=”prefetch"  href=”bO.min.css">    
  37. Browser Hints: Prerender Download and cache an entire page."  

    <link  rel=“prerender”  href=“hPp://maPshull.com/umbraco”>    
  38. Measuring Performance

  39. Measuring Performance •  RUM – Real User Data – Measured using browser

    APIs •  Synthetic – Simulated User Testing – Simulated using real devices and browsers
  40. Median vs Average

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

  42. None
  43. GetSwiftSage.com/cg16

  44. Beware of False Performance Prophets •  Google AMP" •  Facebook

    Instant Articles •  Apple News
  45. Everything should have value, because everything has a cost Tim

    Kadlec
  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
  47. Performance Budget •  HTML: 5% •  CSS: 10% •  Javascript:

    10% •  Images: 65% •  Fonts: 5% •  Other: 5%" •  Page Size Goal: 1500 kb (+/- 500 kb)
  48. Performance Awards

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

    Measuring speed index in RUM" •  How does web performance impact conversions and user behavior?
  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
  51. Thank you! aristotlelabs.com/cg16 getswiftsage.com/cg16