Yet Another SW Talk: Images & Video Perf

https://concatenate.io/

Transcript

1. Yet Another SW Talk: @ColinBendell CTO Office, Cloudinary Images, Video & The Little Guy Service Worker
2. @ColinBendell
3. Me Me You You
6. Today •Psychology & #WebPerf •Service Workers •SW 4 Media & Perf
7. How To: •impress your Boss •impress your Co-Workers •impress your Mom Put Another Way…
8. #WebPerf
9. "I just want to share my photos from last night" "I want to buy a birthday present for mom" "I want to check the news"
10. Page Load Time: Seconds
13. Your Brain Decides Without You Why do users leave when it's slow? http://nautil.us/issue/19/illusions/how-your-brain-decides-without-you
14. 2 Second Magic Number Page Load Time: Seconds
17. #WebPerf: Take Action •Measure user perf. Boomerang, Lux, etc •Empathise •Solve with tech (USSD, Service Workers, PWA, etc) •Business grows Boss gives you a raise
18. <script src="make_page_faster.js">
19. "Add more Javascript! It will make your website faster!" - Said nobody ever
20. Service Workers
21. @colinbendell
22. @colinbendell
23. "A service worker is a script that your browser runs in the background, separate from a web page" https://developers.google.com/web/fundamentals/primers/service-workers/
24. if (navigator.serviceWorker) { navigator.serviceWorker.register('/serviceworker.js'); }
26. Source: Google Dev
27. /** * Some Typical SW Events */ // trigger on first install or re-isntall addEventListener('install', function(event) { ... } // when the page connects to a SW addEventListener( 'activate', function(event) { ... } // when the browser makes a request (js/css/img/video) addEventListener( 'fetch', function(event) { ... }
28. /** * Typical SW cache things */ let CACHE = 'cache-only' caches.open(CACHE).then( myCache => ... )
29. /** * Typical SW cache things */ let CACHE = 'cache-only' return caches.open(CACHE).then( myCache => { return myCache.addall(['/logo.jpg', '/prices.json']) }
30. /** * Typical SW cache things */ let CACHE = 'cache-only' return caches.open(CACHE).then( myCache => { return myCache.match(fetchEvent.request) }
31. • 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
32. SW for Image/Video Performance
34. if (navigator.serviceWorker) { navigator.serviceWorker.register('/serviceworker.js'); }
35. addEventListener( 'fetch', ( fetchEvent ) => { } );
36. addEventListener( 'fetch', ( fetchEvent ) => { if ( fetchEvent.request.destination !== 'image' ) { // console.log('not an image request'); return; } } );
37. addEventListener( 'fetch', ( fetchEvent ) => { if ( fetchEvent.request.destination !== 'image' ) { // console.log('not an image request'); return; } const url = fetchEvent.request.url; fetchEvent.respondWith( fetch(url); ); } );
38. addEventListener( 'fetch', ( fetchEvent ) => { if ( fetchEvent.request.destination !== 'image' ) { // console.log('not an image request'); return; } const url = fetchEvent.request.url; fetchEvent.respondWith( fetch( fasterrrrr( url ) ); ); } );
39. https://codepen.io/colinbendell/project/live/AMywBz/
40. https://codepen.io/colinbendell/project/live/AMywBz/
41. /image/upload/WomenInTech-115.jpg /image/upload/w_320/WomenInTech-115.jpg
46. R: 78 G: 101 B: 23 A: 1 R: 31 G: 33 B: 26 A: 1
47. 1 2 8 0 X 5 2 0 X 4 B Y T E S = 2 . 6 M B !
48. if ( // Save-Data is on fetchEvent.request.headers.get( 'save-data' ) // bandwidth or RTT is slower than a typical 3G connection || (navigator.connection.effectiveType.match( /2g/ ) ) // we have less than ~1GB of RAM || (navigator.deviceMemory < 1 ) ) {
49. What is this madness?
52. “…25% of new Android phones have only 512MB of RAM.” Jen Fitzpatrick VP of product management for Google Maps
53. if ( // Save-Data is on fetchEvent.request.headers.get( 'save-data' ) // bandwidth or RTT is slower than a typical 3G connection || (navigator.connection.effectiveType.match( /2g/ ) ) // we have less than ~1GB of RAM || (navigator.deviceMemory < 1 ) ) {
54. 3% Use Save-Date !!
55. ~20% Cell users are laptops !!
56. Announcing: Cloudinary Net-Info API Sneak Preview
57. /.well-known/cloudinary/netinfo
58. GET /.well-known/cloudinary/netinfo ... 200 OK Content-Type: application/json {cell:true, rtt:322}
59. addEventListener( 'activate', function(event) { event.waitUntil( fetch('https://colinbendell.cloudinary.com /.well-known/cloudinary/netinfo') .then(res => res.json()) .then(netinfo => { console.log(`cell: {netinfo.cell}`); console.log(`rtt: {netinfo.rtt}`); }) ) }
60. if ( // Save-Data is on fetchEvent.request.headers.get( 'save-data' ) // bandwidth or RTT is slower than a typical 3G connection || (navigator.connection.effectiveType.match( /2g/ ) ) // we have less than ~1GB of RAM || (navigator.deviceMemory < 1 ) // we are on meh cellular || (this.cell === true && this.rtt >= 100) ) {
62. Resize Demo https://codepen.io/colinbendell/project/live/AMywBz
63. Progressive Image Demo https://codepen.io/colinbendell/project/live/ARawYg/
64. 67 Does this feel weird?
65. Source: Auth0 Flipkart 3x less data usage 40% higher re-engagement 70% conversion rate @colinbendell
66. Source: Auth0 Housing.com 40% lower bounce rate 30% faster page load 10% longer avg session @colinbendell
67. Service-Worker Take Action: •Remember the other users •SW to adapt the experience •Offline Caching •Reduce pixels to save bytes & memory
68. Thank-You!
69. @ColinBendell