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.

Building for, perceiving and measuring performance for mobile web

1,072 views

Published on

Talk from Google Firestarters 18. High level talk around performance on mobile web.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Building for, perceiving and measuring performance for mobile web

  1. 1. Robin Glen Principal Developer YOOX NET-A-PORTER GROUP @arielwithlegs
  2. 2. Building for, perceiving and measuring performance for mobile web
  3. 3. MPAs “Multiple-page applications work in a ‘traditional’ way. Every change e.g. display the data or submit data back to server requests rendering a new page from the server in the browser.” - Paweł Skólsk https://goo.gl/7Zjyh8
  4. 4. SPAs https://goo.gl/7Zjyh8 “A single-page application is an app that works inside a browser and does not require page reloading during use.”- Paweł Skólsk
  5. 5. Why websites moved towards SPAs
  6. 6. Why websites moved towards SPAs Native like experience
  7. 7. Why companies moving towards SPAsWhy websites moved towards SPAs Less data consumption
  8. 8. Why websites moved towards SPAs Less battery usage
  9. 9. Why companies moving towards SPAsWhy websites moved towards SPAs More performant* MPA pagination with simulated 3G network MPA* Potentially
  10. 10. Why companies moving towards SPAsWhy websites moved towards SPAs More performant* SPA pagination with simulated 3G network SPA* Potentially
  11. 11. However, these gains are dependant on a performant API
  12. 12. https://goo.gl/CahHPp SPAs vs MPAs With extremely large datasets
  13. 13. How you can help ensure performant SPAs
  14. 14. How you can help ensure performant SPAs API basics
  15. 15. How you can help ensure performant SPAs API basics - Compression
  16. 16. How you can help ensure performant SPAs API basics - Compression - CDN (get closer to customers)
  17. 17. - Compression - CDN (get closer to customers) - Cut down on bloat API basics How you can help ensure performant SPAs
  18. 18. API advanced How you can help ensure performant SPAs
  19. 19. - Selectable properties (partial response) API advanced How you can help ensure performant SPAs
  20. 20. - Selectable properties (partial response) - Client hints API advanced How you can help ensure performant SPAs
  21. 21. - Selectable properties (partial response) - Client hints - Streams API advanced How you can help ensure performant SPAs
  22. 22. https://goo.gl/UizzKD - Selectable properties (partial response) - Client hints - Streams API advanced How you can help ensure performant SPAs
  23. 23. Application How you can help ensure performant SPAs
  24. 24. - Ship less code Application How you can help ensure performant SPAs
  25. 25. - Ship less code - HTTP/2 Application How you can help ensure performant SPAs
  26. 26. - Ship less code - HTTP/2 - Offline first Application How you can help ensure performant SPAs
  27. 27. - Ship less code - HTTP/2 - Offline first - Trick your customers Application How you can help ensure performant SPAs
  28. 28. Perceived performance
  29. 29. Famous example iOS Load image of app’s last state
  30. 30. Applying perceived performance to the web
  31. 31. Perceived performance White screen Synchronous loading of content over slow 3G connection
  32. 32. Perceived performance Spinner Asynchronous loading of content over slow 3G connection
  33. 33. Perceived performance Skeleton CSS Asynchronous loading of content over slow 3G connection
  34. 34. Spinner vs Skeleton
  35. 35. Measuring performance
  36. 36. We build mobile first, but measuring performance should be mobile only
  37. 37. Measuring performance RAIL Performance budgets
  38. 38. Measuring performance RAIL Instant feedback Input latency < 100ms Performance budgets
  39. 39. Measuring performance RAIL Instant feedback Input latency < 100ms Run at 60fps Each frame’s work < 16ms Performance budgets
  40. 40. Measuring performance RAIL Instant feedback Input latency < 100ms Run at 60fps Each frame’s work < 16ms Schedule work Main thread work chunked < 50ms Performance budgets
  41. 41. Measuring performance RAIL Instant feedback Input latency < 100ms Run at 60fps Each frame’s work < 16ms Schedule work Main thread work chunked < 50ms Render critical path < 1000ms Performance budgets
  42. 42. https://goo.gl/C2x54g Measuring performance RAIL Instant feedback Input latency < 100ms Run at 60fps Each frame’s work < 16ms Schedule work Main thread work chunked < 50ms Render critical path < 1000ms Performance budgets
  43. 43. We have tools to help
  44. 44. Measuring performance Chrome dev tools Performance tab, throttle network and CPU
  45. 45. https://goo.gl/3KeEKQ Measuring performance RAPIP Mobile API performance tool
  46. 46. “If you can’t measure it, you can’t improve it”
  47. 47. “If you can’t measure it, you can’t improve it” Robin Glen
  48. 48. “If you can’t measure it, you can’t improve it” Robin Glen Peter Drucker
  49. 49. Monitoring performance
  50. 50. DOM complete is a blunt instrument
  51. 51. Monitoring performance RAIL Chrome performance APIs
  52. 52. Monitoring performance RAIL Interaction response timings Performance mark / measure (Chome 43+) Chrome performance APIs
  53. 53. Monitoring performance RAIL Interaction response timings Performance mark / measure (Chome 43+) Long tasks / dropped frames PerformanceLongTaskTiming (Chrome 58+) Chrome performance APIs
  54. 54. Monitoring performance RAIL Interaction response timings Performance mark / measure (Chome 43+) Long tasks / dropped frames PerformanceLongTaskTiming (Chrome 58+) First paint / First contentful paint PerformanceObserver (Chrome 60+) Chrome performance APIs
  55. 55. Monitoring performance RAIL Interaction response timings Performance mark / measure (Chome 43+) Long tasks / dropped frames PerformanceLongTaskTiming (Chrome 58+) First paint / First contentful paint PerformanceObserver (Chrome 60+) Chrome performance APIs Hero elements Currently being worked on
  56. 56. Monitoring performance RAIL Interaction response timings Performance mark / measure (Chome 43+) Long tasks / dropped frames PerformanceLongTaskTiming (Chrome 58+) First paint / First contentful paint PerformanceObserver (Chrome 60+) Chrome performance APIs Hero elements Currently being worked on Time to interactive Polyfill https://goo.gl/YNbcU7
  57. 57. Monitoring performance RAIL Interaction response timings Performance mark / measure (Chome 43+) Long tasks / dropped frames PerformanceLongTaskTiming (Chrome 58+) First paint / First contentful paint PerformanceObserver (Chrome 60+) Chrome performance APIs Hero elements Currently being worked on Time to interactive Polyfill https://goo.gl/YNbcU7https://goo.gl/iKifq9
  58. 58. Performance metrics are not a number, they are a histogram
  59. 59. Time (ms) Load metrics https://goo.gl/iKifq9
  60. 60. Finally
  61. 61. One surefire way to ruin your website performance
  62. 62. Unregulated marketing tags!
  63. 63. Performance killers Tags Name and shame with third party attributions
  64. 64. Thanks Robin Glen Principal Developer YOOX NET-A-PORTER GROUP @arielwithlegs

×