List Web Vitals Tools
Web Vitals and Performance: a list of tools and a small introduction how to start your workflow.
- PageSpeed Insights
- Chrome DevTools
- Search Console
- web.dev’s measure tool
- Web Vitals Chrome extension
- Chrome UX Report
Workflow – steps- to optimize User Experience
1: Search Console will generate a Core Web Vitals report, identifying the pages that need optimization, based on field data.
2: After identifying the pages, go to PageSpeed Insights (powered by Lighthouse and Chrome UX Report) to diagnose issues on a page. You can obtain PageSpeed Insights (PSI) through the Search Console. Otherwise, you can also enter a URL on PSI directly.
3: Once you are ready to optimize your site locally in the lab, use Lighthouse and Chrome DevTools. It will measure Core Web Vitals and get actionable guidance on what you need to fix. With the Web Vitals Chrome extension, you will have a real-time view of metrics on desktop.
4: If you want a custom dashboard of Core Web Vitals, you can use the updated CrUX Dashboard or new Chrome UX Report API. It will help you with field data or PageSpeed Insights API for lab data.
5: To optimize your site, use web.dev/measure. It will measure your page and display a prioritized set of guides. Besides, it will also provide codelabs using PSI data.
6: The final step, where you have to use Lighthouse CI on pull requests. It will ensure there are no regressions in Core Web Vitals before making changes to production.
Is this all too technical for you? We have an expert in the house! Call us
Send a Request for a
Fill out this form to let me know you’re interested. I’ll answer to you within 48 hours and we can discuss the details.