Improving Media Content Performance with Service Workers #BuzzJS

The Next Billion Users are the next generation internet users and most of them have little outreach to strong internet resources. As developers, it's our responsibility to optimize, cache and deliver contents to them at all times (even when offline). This talk centers around the concepts of JavaScript Service Workers, browser caching for certain offline scenarios, and performance best practices to boost user conversion and experience.

Transcript

1. 1 Service Workers & Media: for the rest of your users @ColinBendell CTO Office, Cloudinary
4. JS PREACHER CHRISTIAN NWAMBA PROGRAM MANAGER / WRITER SCOTCH.IO DEV ADVOCATE / MARKETING CLOUDINARY ORGANIZER ANGULAR NIGERIA ORGANIZER FORLOOP AFRICA @codebeast AUTHOR
6. Page Load Time: Seconds
9. 2012: 3,977 Different Android Devices Source: OpenSignal 2012: 3,977 Different Android Devices
10. Source: OpenSignal 2015: 24.0k Different Android Devices
11. “…25% of new Android phones have only 512MB of RAM.” Jen Fitzpatrick VP of product management for Google Maps
13. @codebeast @colinbendell
14. 2 Second Magic Number Page Load Time: Seconds
16. Next Billion Users @codebeast @colinbendell
17. Next Billion Users @codebeast @colinbendell Including the baby
18. Common Strategies • USSD / SMS • Accessibility • Research • Service Workers & PWA • Empathy @codebeast @colinbendell
19. Service Workers and PWA
20. @codebeast @colinbendell
21. SW Basics • Persistent across page loads • Intercept Request & Response • Offline & Enhanced caching • Manifest: home icon, splash screen, standalone app @codebeast @colinbendell
22. <script src="make_page_faster.js">
24. if (navigator.serviceWorker) { navigator.serviceWorker.register('/serviceworker.js'); }
26. Source: Google Dev
27. L1: 0.0005μs L2: 0.007μs L2: 0.030μs RAM: 0.1 μs SSD: 0.15 ms Seek: 10 ms Wifi: 25ms LTE: 75ms 3G: 150ms 1 bit of data accessed from CPU, Memory, Disk, Network Caching is Everywhere (200x L1) (20,000,000x L1) (300,000,000x L1) (1,000,000,000x L1) (10,000,000,000x L1)
28. • Image optimization • Progressive image delivery (use Intersection Observer) • Use bundle splitting • Deferred fetching with lazy loading • Prefetching • Take advantage of cache and web storage • Pretty much every other thing to make your web app fast and deliver better user experience
29. if (navigator.serviceWorker) { navigator.serviceWorker.register('/serviceworker.js'); }
30. addEventListener( 'fetch', ( fetchEvent ) => { } );
31. addEventListener( 'fetch', ( fetchEvent ) => { if ( fetchEvent.request.destination !== 'image' ) { // console.log('not an image request'); return; } } );
32. addEventListener( 'fetch', ( fetchEvent ) => { if ( fetchEvent.request.destination !== 'image' ) { // console.log('not an image request'); return; } const url = fetchEvent.request.url; fetchEvent.respondWith( fetch(url); ); } );
33. addEventListener( 'fetch', ( fetchEvent ) => { if ( fetchEvent.request.destination !== 'image' ) { // console.log('not an image request'); return; } const url = fetchEvent.request.url; fetchEvent.respondWith( fetch( downscaled( url ) ); ); } );
40. if ( // Save-Data is on fetchEvent.request.headers.get( 'save-data' ) // bandwidth or RTT is slower than a typical 3G connect || (navigator.connection.effectiveType.match( /2g/ ) ) // we have less than ~1GB of RAM || (navigator.deviceMemory < 1 ) ) {
41. Resize Demo https://codepen.io/eeeps/project/live/ZLGOyN/
42. Progressive Img Demo https://codepen.io/eeeps/pen/wjmyOz
43. Progressive Image Demo2 https://codepen.io/eeeps/pen/ZdGzya
44. 44 Does this feel weird?
45. Source: Auth0 Flipkart 3x less data usage 40% higher re-engagement 70% conversion rate @codebeast @colinbendell
46. Source: Auth0 Housing.com 40% lower bounce rate 30% faster page load 10% longer avg session @codebeast @colinbendell
47. @codebeast @colinbendell
48. Summary • We are technologists, you are not the typical user • Use Service Workers to adapt the User Experience • Offline Caching • Reduce pixel dimensions in fragile Networks
49. @ColinBendell