Tweet
Tweet

Slide 1

Slide 1 text

Web performance tuning with browser APIs

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Web Performance Let’s get on the same page

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Can happen on both sides @yashints

Slide 6

Slide 6 text

Process Gray @yashints

Slide 7

Slide 7 text

@yashints The process is easy Lab Production Lab

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

@yashints Why does it matter?

Slide 10

Slide 10 text

Why it matters? @yashints Conversion Traffic UX

Slide 11

Slide 11 text

Amazon 100ms delay = 1% sales @yashints

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Monitoring APIs @yashints

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Create marks

Slide 18

Slide 18 text

Creating measures

Slide 19

Slide 19 text

Clearing marks

Slide 20

Slide 20 text

@yashints

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Getting the marks

Slide 23

Slide 23 text

Performance Observers @yashints

Slide 24

Slide 24 text

PerformanceEntry ✘ name ✘ entryType ✘ startTime ✘ duration @yashints

Slide 25

Slide 25 text

@yashints

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Calculating total page load time @yashints

Slide 28

Slide 28 text

Calculating the request response time @yashints

Slide 29

Slide 29 text

Calculating page render time @yashints

Slide 30

Slide 30 text

@yashints

Slide 31

Slide 31 text

Getting navigation properties @yashints

Slide 32

Slide 32 text

@yashints

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

yas.fyi/3dG3aCN

Slide 35

Slide 35 text

Calculating the redirect time @yashints

Slide 36

Slide 36 text

Calculating fetch till response time @yashints

Slide 37

Slide 37 text

Calculating resource size @yashints

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Detecting long running tasks @yashints

Slide 40

Slide 40 text

This API is in draft state @yashints ⚠

Slide 41

Slide 41 text

Helpful APIs @yashints

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Detecting connection changes @yashints

Slide 45

Slide 45 text

Stop preloading if connection speed drops or is slow @yashints

Slide 46

Slide 46 text

@yashints

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Detecting the property name based on the browser @yashints

Slide 50

Slide 50 text

Pause or Play video based on page visibility @yashints

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Pause or Play video based on page visibility @yashints

Slide 53

Slide 53 text

@yashints

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Observe when an element is inside an area @yashints

Slide 57

Slide 57 text

Callback @yashints

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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