Edge Extension for Measuring Core Web Vitals and UX Quality Signals
Web Vitals are quality signals key to delivering great UX on the web (https://web.dev/vitals). This extension measures the Core Web Vitals, providing instant feedback on loading, interactivity and layout shift metrics. It is consistent with how these metrics are measured by Edge and reported to other Google tools (e.g. Edge User Experience Report, Page Speed Insights, Search Console).
The extension captures:
Largest Contentful Paint
Cumulative Layout Shift
First Input Delay
Interaction To Next Paint (experimental)
First Contentful Paint
Time To First Byte
The extension provides three core features:
1) Ambient Badge - This helps check if a page passing the Core Web Vitals thresholds.
Once installed, the extension will display a disabled state badge icon until you navigate to a URL. At this point it will update the badge to green or red depending on whether the URL passes the Core Web Vitals metrics thresholds.
The badge has a number of states:
* Disabled - gray
* Passing - green
* One or more metrics failing - red
If one or more metrics are failing, the badge will animate the values of these metrics.
2) Detailed drill-down in the popup
Clicking the Ambient badge icon will allow you to drill in to the individual metric values. In this mode, the extension will also say if a metric value might change or requires a user action.
For example, First Input Delay requires a real interaction (e.g click/tap) with the page and will be in a waiting for input state until this is the case. We recommend consulting the web.dev documentation for LCP, CLS and FID to get an understanding of when metric values settle.
As of version 1.0.0, the popup combines your local Core Web Vitals experiences with real-user data from the field via the Edge UX Report (CrUX) API. This integration gives you contextual insights to help you understand how similar your individual experiences are to other desktop users on the same page. We've also added a new option to "Compare local experiences to phone field data" instead, if needed. Note that CrUX data may not be available for some pages, in which case we try to load field data for the origin as a whole.
3) HUD Overlay
The overlay displays a Heads up display (HUD) which overlays your page. It is useful if you need a persistent view of your Core Web Vitals metrics during development. To enable the overlay:
Right-click on the Ambient badge and go to Options.
Check Display HUD overlay and click 'Save'
Reload the tab for the URL you wish to test. The overlay should now be present.
Latest reviews
- (2023-12-28) Lorenza: I've implemented Web Vitals into my project and found that it provides a very comprehensive view of website performance. This helped me identify issues and significantly enhance the user experience
- (2023-12-28) Cleveland: Web Vitals is an essential tool for measuring and tracking website performance. I find it user-friendly and provides detailed information on quality metrics. Very helpful for optimizing my website
- (2023-12-27) Bart: I used Web Vitals on a recent project and I was really impressed. It has significantly optimized my site and provided important insights to enhance performance. Very satisfied with this experience
- (2023-12-26) sivism: I noticed a significant difference in site speed and overall performance after implementing suggestions from Web Vitals. Visitors seem to engage more, and our bounce rates have decreased noticeably. It's a must-have tool for any website aiming for better user engagement
- (2023-12-26) perh760: As a developer, I appreciate how Web Vitals simplifies the process of understanding and measuring website performance. The clear metrics and guidance make it easier to prioritize improvements and ensure our site meets modern standards
- (2023-12-26) nyprogeny72: The insights provided helped us identify and fix performance issues, resulting in a tangible improvement in user experience. It became an integral part of our optimization strategy
- (2023-12-26) tress: After integrating Web Vitals into my project, I've noticed a significant improvement in website performance. Collecting data from this tool has empowered me to make smarter decisions to enhance speed and user experience. This is truly a major step forward for my project
- (2023-12-26) ting1086: Its detailed reporting feature has helped me understand more about the issues that need to be addressed to optimize the website. I especially appreciate how it measures things like LCP and CLS, guiding me to focus on the areas that need the most improvement.
- (2023-12-25) ched00: Web Vitals has become my go-to resource for monitoring and improving my site's performance. The actionable suggestions offered have made a noticeable difference in page speed and overall quality. It's user-friendly and incredibly beneficial for anyone serious about their online presence
Statistics
Installs
1,105
history
Category
Rating
4.2 (14 votes)
Last update / version
2023-09-16 / 3.9.16.1416
Listing languages