app! - optimizing browser experience · •every second = 0.65% increase in bounce rate •...
TRANSCRIPT
![Page 1: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/1.jpg)
Optimizing Browser experience focusing on Mobile
M AT E N A D A S D I@matenadasdi
![Page 2: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/2.jpg)
• Every second = 0.65% increase in bounce rate
• Facebook 60FPS - 30FPS timeline experiment (lower engagement)
• 86% of the user waiting time spent on client side
Perf matters
Page load speed on the globe
![Page 3: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/3.jpg)
• 3G/4G vs Cable/Fiber
• Latency is higher (18ms - 26ms - 43ms - 150ms - 400ms)
• Radio Resource Controller is in the game
• Touch events - Software & Hardware input latency
• Users expects the same speed as desktop
Some facts about Mobile vs Desktop perf
![Page 4: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/4.jpg)
1000ms - Show usable content to the user
16.6ms - Deliver a frame to go for 60FPS
Memorize 2 numbers
![Page 5: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/5.jpg)
DNS lookup TCP connect Handshake HTTP Request Download …
Networking
![Page 6: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/6.jpg)
• 69,5% of time block on networking (Top 1 Million Alexa sites)
• DNS lookups and TCP connects are expensive
• DNS prefetch, Prefetch, Prerender
• Compress, Sprite images, count on TCP Slow Start
• Mobile radio is one of the most battery killer resources.
Networking
![Page 7: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/7.jpg)
DOMRender tree Layout Render into layers
Response parsing
CSSOM
Transfer to GPU Rock&Roll!
![Page 8: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/8.jpg)
Initial rendering tips
• Inline critical JS/CSS, lazy load others
• Do not load resources required for below the fold experience
• Use deferred, async JS to save page load time
• Remember! CSS is not incremental.
![Page 9: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/9.jpg)
Pagespeed insights (https://developers.google.com/speed/pagespeed/insights/)
!
Measure, Analyze, Optimize!
![Page 10: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/10.jpg)
webpagetest.org API/Docs: https://sites.google.com/a/webpagetest.org/docs/
!
Measure, Analyze, Optimize!
![Page 11: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/11.jpg)
DevTools timeline panel - https://developers.google.com/chrome-developer-tools/docs/timeline
!!
Measure, Analyze, Optimize!
![Page 12: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/12.jpg)
Navigation Timing API
https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html
!!
Measure, Analyze, Optimize!
![Page 13: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/13.jpg)
• We need 60fps for jank free rendering
• 16.6ms is not so much time for layout/paint/JS/GC
• Touch handlers can block the GPU Compositing on mobile
• Scroll handler functions have to finish in this range too
In-App rendering
![Page 14: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/14.jpg)
• Try to modify smaller subtrees in the Render Tree
• Animate props which affect compositing only (transform/opacity)
• Avoid setTimeout, use requestAnimationFrame
• Bind handlers close to the target
• Image resizing in the browser is evil!
• Dedicate layers for the most expensive parts.
Rendering Tips
![Page 15: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/15.jpg)
DevTools timeline frames panel http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
https://developers.google.com/chrome-developer-tools/docs/timeline !!
Rendering perf tools
![Page 16: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/16.jpg)
DevTools layers (experimental - Canary) !!
Rendering perf tools
![Page 17: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/17.jpg)
Chrome DevTools frames panel & layers panel
DEMO!
![Page 18: App! - Optimizing browser experience · •Every second = 0.65% increase in bounce rate • Facebook 60FPS - 30FPS timeline experiment (lower engagement) • 86% of the user waiting](https://reader036.vdocuments.site/reader036/viewer/2022062607/605a916972079e5c9407812a/html5/thumbnails/18.jpg)
Thank you!
Q&A?
@matenadasdiProps to Ilya Grigorik for the review
http://slideshare.net/matenadasdi1/optimizing-browser-experience-hwsw-app-conf