Instant Loading

PWA Roadshow London & Bangalore

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
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
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
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
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