Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimizing browser experience - App!mobile 2013 conf


Published on

Optimizing browser experience focusing on Mobile on HWSW App!mobile 2013 Conference

Published in: Technology, Design
  • ⇒⇒⇒ ⇐⇐⇐ has really great writers to help you get the grades you need, they are fast and do great research. Support will always contact you if there is any confusion with the requirements of your paper so they can make sure you are getting exactly what you need.
    Are you sure you want to  Yes  No
    Your message goes here
  • You can ask here for a help. They helped me a lot an i`m highly satisfied with quality of work done. I can promise you 100% un-plagiarized text and good experts there. Use with pleasure! ⇒ ⇐
    Are you sure you want to  Yes  No
    Your message goes here

Optimizing browser experience - App!mobile 2013 conf

  1. 1. Optimizing Browser experience focusing on Mobile M AT E N A D A S D I @matenadasdi
  2. 2. Perf matters • 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 Page load speed on the globe
  3. 3. Some facts about Mobile vs Desktop perf • 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
  4. 4. Memorize 2 numbers 1000ms - Show usable content to the user 16.6ms - Deliver a frame to go for 60FPS
  5. 5. Networking DNS lookup TCP connect Handshake HTTP Request Download …
  6. 6. Networking • 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.
  7. 7. Response parsing DOM Render tree CSSOM Layout Render into layers Transfer to GPU Rock&Roll!
  8. 8. 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.
  9. 9. Measure, Analyze, Optimize! Pagespeed insights ( !
  10. 10. Measure, Analyze, Optimize! API/Docs: !
  11. 11. Measure, Analyze, Optimize! DevTools timeline panel - ! !
  12. 12. Measure, Analyze, Optimize! Navigation Timing API ! !
  13. 13. In-App rendering • 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
  14. 14. Rendering Tips • 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.
  15. 15. Rendering perf tools DevTools timeline frames panel ! !
  16. 16. Rendering perf tools DevTools layers (experimental - Canary) ! !
  17. 17. Chrome DevTools frames panel & layers panel DEMO!
  18. 18. Thank you! Q&A? Props to Ilya Grigorik for the review @matenadasdi