Introduction core web vitals
0 likes161 views
The document discusses Core Web Vitals, which are key performance metrics evaluating user experience in terms of loading, interactivity, and visual stability. It outlines the specific metrics (LCP, FID, CLS), their thresholds for good performance, and the importance of tools like Google Lighthouse and PageSpeed Insights for measuring these metrics in both lab and real-user scenarios. Additionally, it emphasizes the relevance of performance metrics in relation to Google's search ranking factors.
Introduction core web vitals
- 1. Proprietary + Confidential Core Web Vitals: Performance Metrics & Thresholds
- 2. Prioritizing quality of experience Is it stable? Is it responsive? Is it happening? contentbazaar.co/20160314/pi-way Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco contentbazaar.co/20160314/pi-way contentbazaar.co/20160314/pi-way
- 3. LCP Largest Contentful Paint Core Web Vitals* User-centric performance metrics GOOD ADEQUATE NEEDS IMPROVEMENT 2.5 sec 4.0 sec CLS Cumulative Layout Shift GOOD ADEQUATE NEEDS IMPROVEMENT 0.1 0.25 FID First Input Delay GOOD ADEQUATE NEEDS IMPROVEMENT 100 ms 300 ms To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.
- 4. LCP Largest Contentful Paint web.dev/lcp GOOD ADEQUATE NEEDS IMPROVEMENT 2.5 sec 4.0 sec Why: Measures when the page becomes useful to the user or when the main content on the screen has likely loaded Major Factors: ● Server response time ● CSS blocking time ● Asset/subresource load time
- 6. FID First Input Delay web.dev/fid GOOD ADEQUATE NEEDS IMPROVEMENT 100 ms 300 ms Why: Measures your user’s first impression of your site’s interactivity and responsiveness
- 7. CLS Cumulative Layout Shift web.dev/cls GOOD ADEQUATE NEEDS IMPROVEMENT 0.1 0.25 Why: Measures layout stability to ensure users experience smooth and natural interactions layout shift score = impact fraction * distance fraction
- 9. 4B Internet Users Core Web Vitals - tl;dr Chrome announced "Core Web Vitals,” a set of essential metrics that measure quality of user experience, which correlate to loading, interactivity, and visual stability CHROME (blog post here) Search announced an evolution of the page experience factors considered for ranking content. It combines existing signals (such as mobile-friendly, HTTPS) with new signals - the Core Web Vitals. GOOGLE SEARCH (blog post here)
- 10. Tools That Measure Core Web Vitals Overview of Google Performance Tools Lighthouse PageSpeed Insights Chrome Dev Tools CrUX Google Search Console Web Vitals Chrome Extension Measures CWV by simulating page load in a lab environment and using proxy metrics when necessary (e.g. TBT instead of FID). Reports page-level CWV measurements made by running Lighthouse (lab) as well pulling data from CrUX (field). Exposes LCP in the performance timeline as well as CLS and TBT when running a performance trace. Provides an origin-level report for all CWV across country, device, and connection type dimensions Reports page-level CWV measurements pulling data from CrUX (field). This extension measures the CWV, providing instant feedback on loading, interactivity and layout shift metrics.
- 11. Real User Monitoring (RUM) & Core Web Vitals PERFORMANCE IS RELATIVE FIELD vs LAB METRICS Quickly respond to ever changing user needs ACCELERATE (RUM) allows for Field Testing, and is critical for improving your Core Web Vitals. RUM = FIELD TESTING Good start to see how your site performs, but only Field Metrics give you the full picture of how users experience your site. Performance is Relative - unique users experience your site differently.
- 12. Proprietary + Confidential Thank You