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

Instant Loading

8314890e50d87c60b2ab5fdab90a9630?s=47 Surma
March 20, 2016

Instant Loading

PWA Roadshow London & Bangalore

8314890e50d87c60b2ab5fdab90a9630?s=128

Surma

March 20, 2016
Tweet

Transcript

  1. Instant Loading

  2. Proprietary + Confidential Proprietary + Confidential Surma @DasSurma

  3. Instant Loading

  4. Done.

  5. Proprietary + Confidential End

  6. Instant Loading

  7. Instant Loading*

  8. Asset delivery …fast

  9. “Every step you make a user perform before they get

    value out of your app will cost you 20% of users” http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.htm
  10. “Every step you make a user perform before they get

    value out of your app will cost you 20% of users” http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.htm 1. Install
  11. “Every step you make a user perform before they get

    value out of your app will cost you 20% of users” http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.htm 1. Install ✅
  12. “Every step you make a user perform before they get

    value out of your app will cost you 20% of users” http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.htm 1. Install ✅ 2. Loading 3. ???
  13. Speed = Money

  14. Goals

  15. Goals 1. Don’t be big

  16. Goals 1. Don’t be big 2. Only download what you

    need
  17. Goals 1. Don’t be big 2. Only download what you

    need 3. Only download what changed
  18. Step.by.Step

  19. Compression

  20. goo.gl/hPLUqB Library Size Compressed size Compression ratio jquery-1.11.0.js 276 KB

    82 KB 70% jquery-1.11.0.min.js 94 KB 33 KB 65% angular-1.2.15.js 729 KB 182 KB 75% angular-1.2.15.min.js 101 KB 37 KB 63% bootstrap-3.1.1.css 118 KB 18 KB 85% bootstrap-3.1.1.min.css 98 KB 17 KB 83%
  21. goo.gl/631F31 30% over JPEG 25% over PNG

  22. None
  23. <picture> <source srcset="washing.webp"> <source srcset="washing.jpg"> <img src="washing.jpg"> </picture>

  24. <img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"

    srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing"> goo.gl/Aev18k
  25. Round Trips +50ms @WiFi +500ms @3G +2500ms @2G

  26. Round Trips 100 reqs/site 6 connections >833 ms spent in

    RTT @WiFi
  27. <link rel="dns-prefetch" href="https://example.com/"> <link rel="preconnect" href="https://example.com/"> <link rel="preload" href="https://example.com/footer.jpg" as="image">

    <link rel="prefetch" href="https://example.com/next-page.html" as="html">
  28. HTTP/1.1 200 OK Date: ... Link: <footer.jpg>; rel=preload; as=image ...

  29. Be interactive

  30. None
  31. <script async defer …>

  32. CSS?

  33. CSS? github.com/filamentgroup/loadCSS

  34. Regioning/Critical …then Rest

  35. https://aerotwist.com/blog/guitar-tuner/

  36. Defer iFrames <iframe data-src="https://example.com"></iframe> <iframe data-src="https://another.example.com"></iframe> <script> document.addEventListener('load', () =>

    { Array.from(document.querySelectorAll('iframe')) .forEach(iframe => iframe.src = iframe.dataset.src); }); </script>
  37. Conserve Data

  38. None
  39. None
  40. None
  41. goo.gl/M3v9iv

  42. { "css/unicorn.css": "css/unicorn-d41d8cd98f.css", "js/unicorn.js": "js/unicorn-273c2cin3f.js" } https://github.com/sindresorhus/gulp-rev

  43. CDNs

  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. github.com/GoogleChrome/simplehttp2server

  53. Best Practices

  54. • Concatenation • Sharding • Cookies

  55. • Concatenation • Sharding • Cookies

  56. • Concatenation • Sharding • Cookies

  57. • Concatenation • Sharding • Cookies

  58. • Compression • Smaller images ◦ Multi-sized images ◦ Multi-format

    images • Reduce Round Trips ◦ Redirects ◦ Preconnect/Prefetch • Be interactive ◦ async/defer scripts ◦ Lazy-load CSS ◦ Regioning CSS ◦ Defer iFrames • Good caching ◦ Cache forever or not at all ◦ Hash in names • CDNs • HTTP/2
  59. Proprietary + Confidential End Surma @DasSurma