How To:
•impress your Boss
•impress your Co-Workers
•impress your Mom
Put Another Way…
Slide 8
Slide 8 text
#WebPerf
Slide 9
Slide 9 text
"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"
Slide 10
Slide 10 text
Page Load Time: Seconds
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
2 Second Magic Number
Page Load Time: Seconds
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
#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
Slide 18
Slide 18 text
Slide 19
Slide 19 text
"Add more Javascript!
It will make your
website faster!"
- Said nobody ever
Slide 20
Slide 20 text
Service Workers
Slide 21
Slide 21 text
@colinbendell
Slide 22
Slide 22 text
@colinbendell
Slide 23
Slide 23 text
"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/
Slide 24
Slide 24 text
if (navigator.serviceWorker) {
navigator.serviceWorker.register('/serviceworker.js');
}
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Source: Google Dev
Slide 27
Slide 27 text
/**
* 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) { ... }
Slide 28
Slide 28 text
/**
* Typical SW cache things
*/
let CACHE = 'cache-only'
caches.open(CACHE).then( myCache => ... )
Slide 29
Slide 29 text
/**
* Typical SW cache things
*/
let CACHE = 'cache-only'
return caches.open(CACHE).then( myCache => {
return myCache.addall(['/logo.jpg', '/prices.json'])
}
Slide 30
Slide 30 text
/**
* Typical SW cache things
*/
let CACHE = 'cache-only'
return caches.open(CACHE).then( myCache => {
return myCache.match(fetchEvent.request)
}
Slide 31
Slide 31 text
• 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
Slide 32
Slide 32 text
SW for Image/Video Performance
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
if (navigator.serviceWorker) {
navigator.serviceWorker.register('/serviceworker.js');
}
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 )
) {
Slide 49
Slide 49 text
What is this madness?
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
“…25% of new Android phones
have only 512MB of RAM.”
Jen Fitzpatrick
VP of product management for Google Maps
Slide 53
Slide 53 text
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 )
) {
Slide 54
Slide 54 text
3%
Use Save-Date
!!
Slide 55
Slide 55 text
~20%
Cell users are laptops
!!
Slide 56
Slide 56 text
Announcing:
Cloudinary Net-Info API
Sneak Preview
Slide 57
Slide 57 text
/.well-known/cloudinary/netinfo
Slide 58
Slide 58 text
GET /.well-known/cloudinary/netinfo
...
200 OK
Content-Type: application/json
{cell:true, rtt:322}
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)
) {