Demystifying Web Vitals
1 like459 views
The document discusses crucial metrics for quantifying web performance, including web vitals like Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID). It covers measurement techniques, tools, and strategies to improve these metrics to enhance user experience on web pages. The content emphasizes the importance of continuous iteration and optimization based on performance data gathered from real user measurement and synthetic lab conditions.
![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](https://image.slidesharecdn.com/demystifyingwebvitals-200704103925/85/Demystifying-Web-Vitals-17-320.jpg)
Demystifying Web Vitals
- 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
- 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
- 22. Cumulative layout shift(CLS) source: addyosmani.com/blog/web-vitals-extension/
- 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
- 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
- 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/
- 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
- 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
- 42. Webpagetest showing web vitals
- 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