Instant Loading

PWA Roadshow London & Bangalore

Transcript

1. Instant Loading
   

   View Slide

2. Proprietary + Confidential
   Proprietary + Confidential
   Surma
   @DasSurma
   

   View Slide

3. Instant Loading
   

   View Slide

4. Done.
   

   View Slide

5. Proprietary + Confidential
   End
   

   View Slide

6. Instant Loading
   

   View Slide

7. Instant Loading*
   

   View Slide

8. Asset delivery
   …fast
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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 ✅
    

    View Slide

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

    View Slide

13. Speed
    = Money
    

    View Slide

14. Goals
    

    View Slide

15. Goals 1. Don’t be big
    

    View Slide

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

    View Slide

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

    View Slide

18. Step.by.Step
    

    View Slide

19. Compression
    

    View Slide

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%
    

    View Slide

21. goo.gl/631F31
    30% over JPEG
    25% over PNG
    

    View Slide

22. View Slide

23. 
    
    
    
    
    

    View Slide

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

    View Slide

25. Round Trips
    +50ms @WiFi
    +500ms @3G
    +2500ms @2G
    

    View Slide

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

    View Slide

27. href="https://example.com/">
    href="https://example.com/">
    href="https://example.com/footer.jpg"
    as="image">
    href="https://example.com/next-page.html"
    as="html">
    

    View Slide

28. HTTP/1.1 200 OK
    Date:
    ...
    Link: ; rel=preload; as=image
    ...
    

    View Slide

29. Be interactive
    

    View Slide

30. View Slide

31. <br/>

    View Slide

32. CSS?
    

    View Slide

33. CSS?
    github.com/filamentgroup/loadCSS
    

    View Slide

34. Regioning/Critical
    …then Rest
    

    View Slide

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

    View Slide

36. Defer iFrames
    
    
    <br/>document.addEventListener('load', () => {<br/>Array.from(document.querySelectorAll('iframe'))<br/>.forEach(iframe => iframe.src = iframe.dataset.src);<br/>});<br/>
    

    View Slide

37. Conserve Data
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. goo.gl/M3v9iv
    

    View Slide

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

    View Slide

43. CDNs
    

    View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. github.com/GoogleChrome/simplehttp2server
    

    View Slide

53. Best Practices
    

    View Slide

54. ● Concatenation
    ● Sharding
    ● Cookies
    

    View Slide

55. ● Concatenation
    ● Sharding
    ● Cookies
    

    View Slide

56. ● Concatenation
    ● Sharding
    ● Cookies
    

    View Slide

57. ● Concatenation
    ● Sharding
    ● Cookies
    

    View Slide

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
    

    View Slide

59. Proprietary + Confidential
    End
    Surma
    @DasSurma
    

    View Slide