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

Transcript

1. Web performance tuning with browser APIs
2. G’Day Yas (Yaser Adel Mehraban) @yashints yashints.dev Lead consultant @TelstraPurple
3. Web Performance Let’s get on the same page
4. “Performance optimisation is the act of monitoring and analysing the speed and interactivity of the application and identifying ways to improve it.” @yashints
5. Can happen on both sides @yashints
6. Process Gray @yashints
7. @yashints The process is easy Lab Production Lab
8. Metrics Perceived load speed Load responsiveness Runtime responsiveness Visual stability Smoothness @yashints
9. @yashints Why does it matter?
10. Why it matters? @yashints Conversion Traffic UX
11. Amazon 100ms delay = 1% sales @yashints
12. @yashints $3.3B - 2019 $330m p/a
13. Place your screenshot here How to measure? ✘ Chrome DevTools (lighthouse) ✘ 3rd party tools @yashints
14. Monitoring APIs @yashints
15. Monitoring ✘ User Timing API ✘ Performance Timeline API ✘ Navigation timing API ✘ Resource timing API ✘ Long tasks API
16. User Timing API ✘ Performance marks ✘ Performance measures ✘ Accessible by `performance` object @yashints
17. Create marks
18. Creating measures
19. Clearing marks
20. @yashints
21. Performance Timeline API ✘ Performance extensions ✘ Performance obervers (experimental) @yashints
22. Getting the marks
23. Performance Observers @yashints
24. PerformanceEntry ✘ name ✘ entryType ✘ startTime ✘ duration @yashints
25. @yashints
26. Navigation timing API ✘ PerformanceNavigationTiming ✗ Total page load time ✗ Request response time ✗ Page render time @yashints
27. Calculating total page load time @yashints
28. Calculating the request response time @yashints
29. Calculating page render time @yashints
30. @yashints
31. Getting navigation properties @yashints
32. @yashints
33. Resource timing API ✘ Network request timing ✗ High-resolution timestamps ✗ Resource loading timestamps ✗ Resource size @yashints
34. yas.fyi/3dG3aCN
35. Calculating the redirect time @yashints
36. Calculating fetch till response time @yashints
37. Calculating resource size @yashints
38. Long Task API ✘ Tasks running for 50ms or more ✗ Culprit browsing context container ✗ Attreibutions @yashints
39. Detecting long running tasks @yashints
40. This API is in draft state @yashints ⚠
41. Helpful APIs @yashints
42. @yashints Use what you already have Page Visibility API Network Information API Intersection Observer API Resize Observer API
43. Network Information API ✘ NetworkInformation ✗ Detect connection changes ✗ Preload large requests ✗ Exposed via `navigator.connection` @yashints
44. Detecting connection changes @yashints
45. Stop preloading if connection speed drops or is slow @yashints
46. @yashints
47. Page Visibility API ✘ Watch for when a page is not visible to user ✘ document.hidden ✘ document.visibiltyState ✘ document.onVisibilityChange @yashints
48. Use cases Video playback Image carousels Switch off sounds Server calls @yashints
49. Detecting the property name based on the browser @yashints
50. Pause or Play video based on page visibility @yashints
51. Resize Observer API ✘ Monitoring object sizes in a performant way ✘ ResizeObserver ✘ ResizeObserverEntry @yashints
52. Pause or Play video based on page visibility @yashints
53. @yashints
54. Intersection Observer API ✘ Observe changes in intersection of an element asyncronously ✘ IntersectionObserver ✘ IntersectionObserverEntry @yashints
55. Use cases Lazy loading images Infinite scrolling Prevent running tasks or animations Ad revenue reporting @yashints
56. Observe when an element is inside an area @yashints
57. Callback @yashints
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
59. THANKS! Any questions? You can find me at @yashints me@yashints.dev