Performing tuning and improvements has never been this easy. Why use 3rd party tools when you have many APIs available right within your browser
Web performancetuning with browserAPIs
View Slide
G’DayYas (Yaser Adel Mehraban)@yashintsyashints.devLead consultant @TelstraPurple
Web PerformanceLet’s get on the same page
“Performance optimisation is the act of monitoringand analysing the speed and interactivity of theapplication and identifying ways to improve it.”@yashints
Can happen on both sides@yashints
ProcessGray@yashints
@yashintsThe process is easyLab Production Lab
MetricsPerceived load speed Load responsivenessRuntimeresponsivenessVisual stability Smoothness@yashints
@yashintsWhydoes it matter?
Why it matters?@yashintsConversion Traffic UX
Amazon100ms delay = 1% sales@yashints
@yashints$3.3B - 2019$330m p/a
Place your screenshot hereHow to measure?✘ Chrome DevTools(lighthouse)✘ 3rd party tools@yashints
MonitoringAPIs@yashints
Monitoring✘ User Timing API✘ Performance Timeline API✘ Navigation timing API✘ Resource timing API✘ Long tasks API
User Timing API✘ Performance marks✘ Performance measures✘ Accessible by `performance` object@yashints
Create marks
Creating measures
Clearing marks
@yashints
Performance Timeline API✘ Performance extensions✘ Performance obervers (experimental)@yashints
Getting the marks
Performance Observers@yashints
PerformanceEntry✘ name✘ entryType✘ startTime✘ duration@yashints
Navigation timing API✘ PerformanceNavigationTiming✗ Total page load time✗ Request response time✗ Page render time@yashints
Calculating total page load time@yashints
Calculating the request response time@yashints
Calculating page render time@yashints
Getting navigation properties@yashints
Resource timing API✘ Network request timing✗ High-resolution timestamps✗ Resource loading timestamps✗ Resource size@yashints
yas.fyi/3dG3aCN
Calculating the redirect time@yashints
Calculating fetch till response time@yashints
Calculating resource size@yashints
Long Task API✘ Tasks running for 50ms or more✗ Culprit browsing context container✗ Attreibutions@yashints
Detecting long running tasks@yashints
This API is in draft state@yashints⚠
HelpfulAPIs@yashints
@yashintsUse what you already havePage VisibilityAPINetworkInformation APIIntersectionObserver APIResizeObserver API
Network Information API✘ NetworkInformation✗ Detect connection changes✗ Preload large requests✗ Exposed via `navigator.connection`@yashints
Detecting connection changes@yashints
Stop preloading if connection speed drops or is slow@yashints
Page Visibility API✘ Watch for when a page is not visible to user✘ document.hidden✘ document.visibiltyState✘ document.onVisibilityChange@yashints
Use casesVideoplaybackImagecarouselsSwitch offsoundsServer calls@yashints
Detecting the property name based on the browser@yashints
Pause or Play video based on page visibility@yashints
Resize Observer API✘ Monitoring object sizes in a performant way✘ ResizeObserver✘ ResizeObserverEntry@yashints
Intersection Observer API✘ Observe changes in intersection of anelement asyncronously✘ IntersectionObserver✘ IntersectionObserverEntry@yashints
Use casesLazy loading images Infinite scrollingPrevent runningtasks or animationsAd revenuereporting@yashints
Observe when an element is inside an area@yashints
Callback@yashints
Referenceshttps://developer.mozilla.org/en-US/docs/Web/APIhttps://yashints.dev/blog/2020/06/22/intersection-observer-v2https://yashints.dev/blog/2019/11/18/network-info-apihttps://yashints.dev/blog/2019/09/29/navigation-timinghttps://yashints.dev/blog/2019/09/22/page-visibility-apihttps://yashints.dev/blog/2019/09/05/resize-observerhttps://yashints.dev/blog/2019/08/25/native-lazyloadinghttps://yashints.dev/blog/2019/05/11/offscreen-canvas@yashints
THANKS!Any questions?You can find me at@yashints[email protected]
yashints
niftycorp
l2hyunwoo
fadis
twada
riku929hr
piyoppi
rdmueller
takamin55
zenorocha
ufuk
kastner
holman
jensimmons
philnash
marcduiker
keithpitt
destraynor
thekraken
soudai
eileencodes