Measuring web vitals with lighthouse (Google I/O extended GDGMpape 2021))

Transcript

1. MEASURING WEB VITALS USING LIGHTHOUSE Abdulqudus Abubakre Frontend Developer @ Outsource global @ibn_abubakre
2. It’s easy to boast about how fast your website loads. But what happens when you’re asked to provide stats?
3. Web Vitals
4. What are web vitals? Web vitals help you quantify the experience of your applications and provide you insights into what needs improving Web vitals is an initiative by google for keep track of metrics that matter the most in their applications. These metrics are called core web vitals
5. Core Web Vitals • Largest Contentful Paint • First Input Delay • Cumulative Layout Shift
6. Largest Contentful Paint (LCP) Largest Contentful Paint refers to the render time of the largest visible element in the viewport. LCP measures the loading performance of your application. For a good user experience, LCP should occur within the first 2.5 seconds after the page starts loading
7. First Input Delay is the time it takes for a click of a link or a button to respond or for the browser to trigger the event listener. FID can occur when the browser is running a blocking operation in the background LCP measures the interactivity of your application and should occur within the first 100 milliseconds after the page starts loading First Input Delay (FID)
8. Unexpected page movement could occur when data is loaded asynchronously or when DOM elements gets dynamically added to the page. Cumulative Layout Shift helps you address this problem by measuring how often it's occurring for real users Cumulative Layout Shift (CLS)
9. CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. To provide a good user experience, sites should strive to have a CLS score of 0.1 or less. Cumulative Layout Shift (CLS) contd;
10. Measuring Core Web Vitals with lighthouse
11. Lighthouse Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more. You can use lighthouse from the chrome devtools, on the command line, or as a node module
12. Using lighthouse in google chrome • In your chrome browser, enter the URL of the website you want to audit • Open the devtools: cmd + shift + i on mac or ctrl + shift + i on windows • Head over to the lighthouse or audit tab. • Click on generate report to get started with the site audit
13. Using lighthouse in google chrome
14. Measuring web vitals is important and it helps you understand what needs improvement in your applications. It also provides a better user experience overall
15. THANK YOU FOR LISTENING Abdulqudus Abubakre Frontend Developer @ Outsource global @ibn_abubakre