Track, Analyze, and Visualize Web Vitals
Lightweight, simple integration for Web Vitals. Visualization charts and historical records. Improve website performance and SEO!
What are Web Vitals?
Through both internal studies and industry research, users show they prefer sites with a great page experience. In recent years, Search has added a variety of user experience criteria, such as how quickly pages load and mobile-friendliness, as factors for ranking results. Earlier this month, the Chrome team announced Core Web Vitals, a set of metrics related to speed, responsiveness and visual stability, to help site owners measure user experience on the web.~Evaluating page experience for a better web
Google's announcement linked above describes a change in its search algorithm to evaluate and prioritize page experience. In this announcement Google introduces a new set of metrics to help developers measure and analyze a user-centric page experience called "Web Vitals". According to web.dev, Core Web Vitals are the subset of Web Vitals that apply to all web pages, and should be measured by all site owners. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.
In summary, we can utilize Google projects like Lighthouse and Web Vitals to not only improve web page experience but also improve SEO.
Why Should I Care About Web Vitals?
The new Google Search algorithm has been announced to rollout in May, 2021 to prioritize page experience, quantified by Web Vitals and Lighthouse. Read more about Google's Search update here. Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web, but ultimately it provides insight into SEO ranking of your web pages after the new search update.
How to Track and Analyze Web Vitals
Google provides solutions to capture Web Vitals metrics as documented in the GitHub project. Foo aims to extend this cause with a robust solution for visualizing a historical record of Web Vitals collected in real-time. We provide an API that stores Web Vitals metrics you send to it. We display this data for analysis in timeline charts. Follow the step-by-step guide in this article to get started with Foo's Web Vitals implementation. Once a developer has implemented a simple JavaScript snippet, charts displaying metrics are accessible in a dashboard.
Web Vitals Data Studio Connector
Utilize our Data Studio connector to view and analyze Web Vitals metrics in beautiful charts! The below article provides a step-by-step guide to get started.
Pricing
We also offer pricing for combined services. All paid, premium accounts include a 1 month free trial. You can cancel anytime before trial end without being charged.
Customized Plans
Had something else in mind? Whether you want higher rate limiting or custom pricing, contact us to help us come up with a plan that best meets your needs.
FAQ
What is FCP?
First Contentful Paint (FCP) measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.
What is FID?
First Input Delay (FID) measures the time from when a user first interacts with a page to the time when the browser is able to respond to that interaction.
What is LCP?
Largest Contentful Paint (LCP) metric reports the render time of the largest content element visible within the viewport.
What is TTFB?
Time to First Byte (TTFB) is the time that it takes for a user's browser to receive the first byte of page content.
What is CLS?
Cumulative Layout Shift (CLS) measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. To calculate the layout shift score, the browser looks at the viewport size and the movement of unstable elements in the viewport between two rendered frames.