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

uWestFest 2016

uWestFest 2016

Slides from uWestFest 2016 in San Diego for Umbraco and the Need for Speed.

7b8d0adf6fd2decedeb551dc9dd027de?s=128

Matt Shull

March 04, 2016
Tweet

Transcript

  1. Umbraco and the Need for Speed uWestFest 2016 – San

    Diego, CA
  2. Matt Shull Director of Labs Aristotle Interactive aristotle.net aristotleinteractive.com mattshull.com

    @themattshull mshull@aristotleweb.com
  3. mattshull.com/umbraco

  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. Why Performance Matters Up to 40% of users will abandon

    a request and possibly never return, if it doesn’t load within 3 seconds. -Gomez http://www.mcrinc.com/Documents/Newsletters/201110_why_web_performance_matters.pdf
  8. None
  9. Why Performance Matters Walmart saw up to a 2% increase

    in conversions for every 1 second of improvement in load time. Every 100ms improvement also resulted in up to a 1% increase in revenue. https://wpostats.com/2015/11/04/walmart-revenue.html
  10. Why Performance Matters The Aberdeen Group discovered a 1- second

    delay resulted in 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions. https://wpostats.com/2015/10/29/aberdeen-1-percent.html
  11. Why Performance Matters Mozilla cut load time by 2.2 seconds

    and saw download conversions increase by 15.4% https://wpostats.com/2015/10/29/mozilla-2point2.html
  12. Total Load Time

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

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

    site downloads to the user’s device.
  20. The Good Stuff

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

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

    Photographs •  50%-75% smaller •  Android and Chrome
  23. Image File Types

  24. Image File Types JPEG2000 •  Uses transparency •  Photographs • 

    Sometimes smaller
  25. Image File Types

  26. Responsive Images

  27. 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>      
  28. Responsive Images https://github.com/scottjehl/picturefill

  29. Responsive Images https://modernizr.com/          .webp  .container  {

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

  31. 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
  32. Fonts ~5.5% http://httparchive.org/interesting.php

  33. Fonts •  Reduce font weights •  Strip out characters not

    needed using Font Squirrel •  Use default fonts if possible
  34. Fonts •  Font loading event built into browsers soon • 

    Use current tools for best browser support – Font face observer – Google Web Font Loader – LoadCSS •  Decide whether you want FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text)
  35. Javascript ~16% http://httparchive.org/interesting.php

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

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

  38. Javascript                  <html>

       <head>            <script  src=“google-­‐analyNcs.js”>    </head>    <body>            //content            <script  defer=“defer”  src=“jquery.js”>            <script  defer=“defer”  src=mp.js”>    </body>          </html>    
  39. Javascript: Lessons Learned •  Umbraco Forms •  AJAX all the

    things!
  40. Browser Hints •  DNS Prefetch •  Preconnect •  Prefetch • 

    Prerender
  41. Browser Hints: Prefetch •  Download and cache specific files once

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

      <link  rel=“prerender”  href=“hRp://maRshull.com/umbraco”>    
  43. https://www.youtube.com/watch?v=_Jn93FDx9oI

  44. Measuring Performance

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

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

  47. Measuring Performance: RUM •  Navigation Timing API •  Resource Timing

    API •  User Timing API
  48. None
  49. Navigation Timing API •  Backend Time = responseEnd – requestStart

    •  Time to First Byte = responseStart – connectEnd •  Frontend Time = now – domLoading •  Total Time = now – navigationStart
  50. Navigation Timing API

  51. Resource Timing API •  Measure the performance of each resource

    being downloaded by the user. •  TTFB = responseStart – startTime •  DNS Lookup = domainLookupEnd – domain LookupStart •  TCP = connectEnd – connectStart
  52. Resource Timing API

  53. User Timing API •  Measure performance of web applications with

    high precision timing. •  mark() •  measure()
  54. User Timing API          window.performance.mark(‘start_req’);    

           $.get(‘./example.json’,  funcNon(data)  {    //do  something  with  data    window.performance.mark(‘end_req’);      window.performance.measure(‘measure_req’,  ‘start_req’,  ‘end_req’);          });    
  55. User Timing API          window.performance.getEntriesByName(‘start_req’);    

           window.performance.getEntriesByName(‘end_req’);            window.performance.getEntriesByName(‘measure_req’);    
  56. User Timing API

  57. Measuring Performance: Synthetic •  WebPageTest.org •  Soasta •  Speed Curve

  58. Beware of False Performance Prophets •  Google AMP •  Facebook

    Instant Articles •  Apple News
  59. 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
  60. Performance Budget •  HTML: 5% •  CSS: 10% •  Javascript:

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

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

    Measuring speed index in RUM •  Changes to <link> stylesheets
  63. 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 •  More resources at mattshull.com/umbraco
  64. Thank you! mattshull.com/umbraco aristotleinteractive.com