Instant Loading

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