You Don't Need Permission to Build Fast Websites

You Don't Need Permission to Build Fast Websites

infoShare, Gdansk 2018

F085bf2092cb300bac787cc5bc65d301?s=128

Ryan Townsend

May 23, 2018
Tweet

Transcript

  1. 1.

    infoShare, Gdansk 2018 You don’t need permission to build fast

    websites Photo by Emil Vilsek on Unsplash
  2. 3.
  3. 7.

    “The result of rebuilding our pages for performance led to

    [...] a 15 percent increase in SEO traffic” – Pinterest Source – https://bit.ly/2ICPv4Z
  4. 8.

    “[…] starting in July 2018, page speed will be a

    ranking factor for mobile searches.” – Google Source – https://bit.ly/2Dt5Plz
  5. 10.

    “For every 100ms decrease in homepage load speed, Mobify's customer

    base saw a 1.11% lift in session based conversion, amounting to an average annual revenue increase of $376,789” – Mobify Source – https://bit.ly/2s0FDHS
  6. 11.

    “Similarly, for every 100ms decrease in checkout page load speed,

    Mobify's customers saw a 1.55% lift in session based conversion, amounting to an average annual revenue increase of $526,147” – Mobify Source – https://bit.ly/2s0FDHS
  7. 14.
  8. 17.

    Who believes performance is important to the user experience? Who

    actively wants to build faster websites? Who feels their clients or business don’t value performance as much as they should?
  9. 26.
  10. 27.
  11. 28.
  12. 30.
  13. 31.
  14. 33.

    You can’t control your infrastructure without permission, but you can

    check features are enabled: •GZIP / Brotli •OCSP for SSL •HTTP/2 •Connection: keep-alive
  15. 34.
  16. 35.

    Correct Order 1. <meta> character encoding / viewport 2. <title>

    3. Resource hints 4. Inline <script> 5. External stylesheet 6. Inline <style> 7. External <script> 8. Anything else, e.g. other meta tags Source – @csswizardry
  17. 37.
  18. 38.
  19. 39.
  20. 40.
  21. 41.

    Start Render SpeedIndex Interactive Bandwidth (-1.8s) (+184) (-0.1s) (no change)

    Value: $6,782,202 / year Value based on Modify case study
  22. 42.
  23. 45.
  24. 46.
  25. 48.
  26. 52.
  27. 54.
  28. 55.
  29. 56.
  30. 58.
  31. 59.
  32. 60.

    <picture> <!--[if IE 9]><video style="display: none;><![endif]--> <source srcset='hero@1600w.jxr 1600w, ...'

    type='image/vnd.ms-photo' /> <source srcset='hero@1600w.jp2 1600w, ...' type='image/jp2' /> <source srcset='hero@1600w.webp 1600w, ...' type='image/webp' /> <!--[if IE 9]></video><![endif]--> <img srcset=' hero@1600w.jpg 1600w, hero@1400w.jpg 1400w, hero@1200w.jpg 1200w, ...' src='hero@400w.jpg' alt='Hero Image' /> </picture>
  33. 61.
  34. 64.

    CSS

  35. 68.
  36. 69.

    Start Render SpeedIndex Interactive Bandwidth (-0.1s) (-348) (-0.2s) (no change)

    Value: $376,789 / year Value based on Modify case study
  37. 70.

    Start Render SpeedIndex Interactive Bandwidth (-90.1s) (-∞) (-0.2s) (no change)

    Value: $339,486,889 / year Value based on Modify case study
  38. 71.

    Start Render SpeedIndex Interactive Bandwidth (-90.1s) (-87630) (-0.2s) (no change)

    Value: $38,754 / hour Value based on Modify case study
  39. 78.
  40. 79.
  41. 80.
  42. 81.
  43. 82.
  44. 83.
  45. 85.
  46. 87.

    /* latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight:

    400; src: local('Montserrat Regular'), local(‘Montserrat-Regular'), url(/fonts/montserrat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
  47. 88.
  48. 89.

    Start Render SpeedIndex Interactive Bandwidth (-1.8s) (-258) (-0.1s) (no change)

    Value: $6,782,202 / year Value based on Modify case study
  49. 91.
  50. 96.
  51. 97.
  52. 98.

    function timeout(delay){ return new Promise(function(resolve, reject) { setTimeout(function(){ resolve(new Response('',

    { status: 408, statusText: 'Request timed out.' })); }, delay); }); } self.addEventListener('fetch', function(event { event.respondWith(Promise.race([ timeout(2000), fetch(event.request) ])); });