Presented web vitals in Bangalore Site Speed Meetup (4th) - https://www.meetup.com/Bangalore-Site-Speed/events/270620710/

1. Crucial metrics to quantify web performance.
Demystifying Web Vitals
By @samarpanda

2. ● Overview of user journey
● Quantify performance
● Synthetic(Lab) & Real User Measurement (RUM)
● Web vital metrics
● How to measure?
● Explore Tools
● Steps to improve
● Demos with devtools & webpagetest
Agenda

3. After typing an URL in the browser
source: medium.com/@lokeshchinni123

4. Rails is user-centric performance model
User's perceived performance
source: web.dev/rail/

5. The pixel pipeline & Flame chart
60 frames per second
1 frame 1000/60 = 16.66 ms

6. Is it useful?Is it happening?
bit.ly/reddit-wpt

7. Is it delightful?Is it usable?
bit.ly/reddit-wpt

8. Loading is a journey
First Paint First Contentful Paint
Time To Interactive
Largest contentful Paint
Navigation start

9. Navigation Timing
Application Round Trip Time (RTT)

10. Dissecting one of the requests

11. Browser API's - Demo
Navigation Timing Paint Timing User Timing

12. User timing API
Demo - https://odd-jumbo.glitch.me/

13. How metrics are measured?
Synthetic lab conditions In the field (Real User Measurement)

14. Httparchive state of the web
httparchive.org/reports

15. Web Vitals
performance

16. Largest contentful paint(LCP)
Time taken to render the largest text block or
image element within the viewport
Focuses on perceived load when the main
content has likely loaded
source: addyosmani.com/blog/web-vitals-extension/

17. const po = new PerformanceObserver(list => {
let entries = list.getEntries();
const lastEntry = entries[entries.length - 1];
console.log(`LCP is: ${lastEntry.startTime}`);
// LCP is: 167.1499
});
po.observe({type: 'largest-contentful-paint', buffered: true});
How to measure LCP?
bit.ly/measurelcp

18. What if the target element isn't the most important?
In LCP we are deriving the target element
with a rule of "largest" element rendered on
the page.
What if as per our product in a specific page
that is not the crucial element how do we
measure then?
Fallback -⚡DOM Element Timing API ⚡

19. What affects LCP?
● Slow server response time
● Render blocking JS & CSS
● Resource load times
● client-side rendering

20. How to improve LCP?
● Optimizing critical rendering path
● Apply instant loading with PRPL pattern
● Optimize Images
● Optimize web fonts
● Optimize CSS
● Optimize web fonts
● Optimize javascript

21. Demo - verdant-kiwi-kale.glitch.me
https://verdant-kiwi-kale.glitch.me/

22. Cumulative layout shift(CLS)
source: addyosmani.com/blog/web-vitals-extension/

23. WPT Filmstrip comparison

25. How to measure CLS?
bit.ly/measurecls
const po = new PerformanceObserver(list => {
for (const entry of list.getEntries()){
console.log(entry);
}
});
po.observe({type: 'layout-shift', buffered: true});
● CLS keeps updating till the unload of the page
● The cumulative part of the entry gives the total layout shift happened in a page
● CLS needs to be beaconed after the page changes to hidden

26. bit.ly/measurecls

27. How to improve CLS metric?
● Image size attributes
● Avoid adding content over existing content
● Prefer transform animations to animate

28. CLS demo using chrome devtools

29. bit.ly/bb-perf-01

30. First Input Delay
Measures the time from when a user first
interacts with the site to the time when the
browser actually able to respond to that
interaction.
Measure visual stability and quantifies the
amount of unexpected layout shift of visible
page content.
source: addyosmani.com/blog/web-vitals-extension/

31. Show first input delay(FID)
source: youtube.com/watch?v=Lx1cYJAVnzA

32. Network requests & Main thread activities
Source - addyosmani.com/blog/usability/

33. Time To Interactive (Lab data)
Source - addyosmani.com/blog/usability/

34. Source - addyosmani.com/blog/usability/

35. import {getCLS, getFID, getLCP} from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
How to measure all 3 metrics?
bit.ly/measurelcp
Use npm package - web-vitals
npm install web-vitals

36. Webpagetest results - 01 bit.ly/3hTjYcS

37. Webpagetest results -02 - bit.ly/37X2WGk

38. Web Vitals
performance
Tools

39. Google search console
Site owners can get field data
from this console referring to
exact urls split by web vitals

40. Pagespeed Insights
Field data is powered by Chrome User
experience report.
Lab data

41. Chrome devtools Lighthouse

42. Webpagetest showing web vitals

43. source: web.dev/vitals-tools/

44. tl;dr
1. Build & Iterate & improve web vital metrics
2. Deploy and collect web vital metrics to verify improvements
3. Tune your lab against RUM data
+ optimize locally()
+ goto(1)
4. Keep measuring the key metrics & keep improving
Thanks!
@samarpanda www.samarpanda.com