$30 off During Our Annual Pro Sale. View Details »

Web performance - Browser APIs

Yas
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

Yas

October 14, 2020
Tweet

More Decks by Yas

Other Decks in Programming

Transcript

  1. Web performance
    tuning with browser
    APIs

    View Slide

  2. G’Day
    Yas (Yaser Adel Mehraban)
    @yashints
    yashints.dev
    Lead consultant @TelstraPurple

    View Slide

  3. Web Performance
    Let’s get on the same page

    View Slide

  4. “Performance optimisation is the act of monitoring
    and analysing the speed and interactivity of the
    application and identifying ways to improve it.”
    @yashints

    View Slide

  5. Can happen on both sides
    @yashints

    View Slide

  6. Process
    Gray
    @yashints

    View Slide

  7. @yashints
    The process is easy
    Lab Production Lab

    View Slide

  8. Metrics
    Perceived load speed Load responsiveness
    Runtime
    responsiveness
    Visual stability Smoothness
    @yashints

    View Slide

  9. @yashints
    Why
    does it matter?

    View Slide

  10. Why it matters?
    @yashints
    Conversion Traffic UX

    View Slide

  11. Amazon
    100ms delay = 1% sales
    @yashints

    View Slide

  12. @yashints
    $3.3B - 2019
    $330m p/a

    View Slide

  13. Place your screenshot here
    How to measure?
    ✘ Chrome DevTools
    (lighthouse)
    ✘ 3rd party tools
    @yashints

    View Slide

  14. Monitoring
    APIs
    @yashints

    View Slide

  15. Monitoring
    ✘ User Timing API
    ✘ Performance Timeline API
    ✘ Navigation timing API
    ✘ Resource timing API
    ✘ Long tasks API

    View Slide

  16. User Timing API
    ✘ Performance marks
    ✘ Performance measures
    ✘ Accessible by `performance` object
    @yashints

    View Slide

  17. Create marks

    View Slide

  18. Creating measures

    View Slide

  19. Clearing marks

    View Slide

  20. @yashints

    View Slide

  21. Performance Timeline API
    ✘ Performance extensions
    ✘ Performance obervers (experimental)
    @yashints

    View Slide

  22. Getting the marks

    View Slide

  23. Performance Observers
    @yashints

    View Slide

  24. PerformanceEntry
    ✘ name
    ✘ entryType
    ✘ startTime
    ✘ duration
    @yashints

    View Slide

  25. @yashints

    View Slide

  26. Navigation timing API
    ✘ PerformanceNavigationTiming
    ✗ Total page load time
    ✗ Request response time
    ✗ Page render time
    @yashints

    View Slide

  27. Calculating total page load time
    @yashints

    View Slide

  28. Calculating the request response time
    @yashints

    View Slide

  29. Calculating page render time
    @yashints

    View Slide

  30. @yashints

    View Slide

  31. Getting navigation properties
    @yashints

    View Slide

  32. @yashints

    View Slide

  33. Resource timing API
    ✘ Network request timing
    ✗ High-resolution timestamps
    ✗ Resource loading timestamps
    ✗ Resource size
    @yashints

    View Slide

  34. yas.fyi/3dG3aCN

    View Slide

  35. Calculating the redirect time
    @yashints

    View Slide

  36. Calculating fetch till response time
    @yashints

    View Slide

  37. Calculating resource size
    @yashints

    View Slide

  38. Long Task API
    ✘ Tasks running for 50ms or more
    ✗ Culprit browsing context container
    ✗ Attreibutions
    @yashints

    View Slide

  39. Detecting long running tasks
    @yashints

    View Slide

  40. This API is in draft state
    @yashints
    ⚠

    View Slide

  41. Helpful
    APIs
    @yashints

    View Slide

  42. @yashints
    Use what you already have
    Page Visibility
    API
    Network
    Information API
    Intersection
    Observer API
    Resize
    Observer API

    View Slide

  43. Network Information API
    ✘ NetworkInformation
    ✗ Detect connection changes
    ✗ Preload large requests
    ✗ Exposed via `navigator.connection`
    @yashints

    View Slide

  44. Detecting connection changes
    @yashints

    View Slide

  45. Stop preloading if connection speed drops or is slow
    @yashints

    View Slide

  46. @yashints

    View Slide

  47. Page Visibility API
    ✘ Watch for when a page is not visible to user
    ✘ document.hidden
    ✘ document.visibiltyState
    ✘ document.onVisibilityChange
    @yashints

    View Slide

  48. Use cases
    Video
    playback
    Image
    carousels
    Switch off
    sounds
    Server calls
    @yashints

    View Slide

  49. Detecting the property name based on the browser
    @yashints

    View Slide

  50. Pause or Play video based on page visibility
    @yashints

    View Slide

  51. Resize Observer API
    ✘ Monitoring object sizes in a performant way
    ✘ ResizeObserver
    ✘ ResizeObserverEntry
    @yashints

    View Slide

  52. Pause or Play video based on page visibility
    @yashints

    View Slide

  53. @yashints

    View Slide

  54. Intersection Observer API
    ✘ Observe changes in intersection of an
    element asyncronously
    ✘ IntersectionObserver
    ✘ IntersectionObserverEntry
    @yashints

    View Slide

  55. Use cases
    Lazy loading images Infinite scrolling
    Prevent running
    tasks or animations
    Ad revenue
    reporting
    @yashints

    View Slide

  56. Observe when an element is inside an area
    @yashints

    View Slide

  57. Callback
    @yashints

    View Slide

  58. References
    https://developer.mozilla.org/en-US/docs/Web/API
    https://yashints.dev/blog/2020/06/22/intersection-observer-v2
    https://yashints.dev/blog/2019/11/18/network-info-api
    https://yashints.dev/blog/2019/09/29/navigation-timing
    https://yashints.dev/blog/2019/09/22/page-visibility-api
    https://yashints.dev/blog/2019/09/05/resize-observer
    https://yashints.dev/blog/2019/08/25/native-lazyloading
    https://yashints.dev/blog/2019/05/11/offscreen-canvas
    @yashints

    View Slide

  59. THANKS!
    Any questions?
    You can find me at
    @yashints
    [email protected]

    View Slide