Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web performance - Browser APIs

October 14, 2020

Web performance - Browser APIs

Performing tuning and improvements has never been this easy. Why use 3rd party tools when you have many APIs available right within your browser


October 14, 2020

More Decks by Yas

Other Decks in Programming


  1. “Performance optimisation is the act of monitoring and analysing the

    speed and interactivity of the application and identifying ways to improve it.” @yashints
  2. Place your screenshot here How to measure? ✘ Chrome DevTools

    (lighthouse) ✘ 3rd party tools @yashints
  3. Monitoring ✘ User Timing API ✘ Performance Timeline API ✘

    Navigation timing API ✘ Resource timing API ✘ Long tasks API
  4. User Timing API ✘ Performance marks ✘ Performance measures ✘

    Accessible by `performance` object @yashints
  5. Navigation timing API ✘ PerformanceNavigationTiming ✗ Total page load time

    ✗ Request response time ✗ Page render time @yashints
  6. Resource timing API ✘ Network request timing ✗ High-resolution timestamps

    ✗ Resource loading timestamps ✗ Resource size @yashints
  7. Long Task API ✘ Tasks running for 50ms or more

    ✗ Culprit browsing context container ✗ Attreibutions @yashints
  8. @yashints Use what you already have Page Visibility API Network

    Information API Intersection Observer API Resize Observer API
  9. Network Information API ✘ NetworkInformation ✗ Detect connection changes ✗

    Preload large requests ✗ Exposed via `navigator.connection` @yashints
  10. Page Visibility API ✘ Watch for when a page is

    not visible to user ✘ document.hidden ✘ document.visibiltyState ✘ document.onVisibilityChange @yashints
  11. Resize Observer API ✘ Monitoring object sizes in a performant

    way ✘ ResizeObserver ✘ ResizeObserverEntry @yashints
  12. Intersection Observer API ✘ Observe changes in intersection of an

    element asyncronously ✘ IntersectionObserver ✘ IntersectionObserverEntry @yashints
  13. Use cases Lazy loading images Infinite scrolling Prevent running tasks

    or animations Ad revenue reporting @yashints