Partners in Tech & Data
Web Vitals Dashboard
Background
Like most other organizations with a website, we care about our search rankings. When people are explicitely looking for us online, they should be able to find us without any effort. When people are investigating topics that we are knowledgable about, our articles should contribute in their search for knowledge and support.
Besides our own digital presence for informative and commercial purposes, we care extra about our findability because we are often involved in technical SEO project. And who are we to advise others on this, if we don’t perform ourselves? 😉
That is one of the reasons why we have taken full control over our website. We don’t use heavy content management systems like WordPress, Webflow, Squarespace or CMS’s. Instead, we render our website with a static-site generator called Hugo. This way, we are in full control over every line of code of our website, while still being relatively agile when it comes to publishing content. So if we run a Pagespeed Insights test, it will look something like this (tested on 21 September 2024):
How ‘Web Vitals’ are often misinterpreted
What very little people realize when using services like this, is that these tools can only approximate the Web Vitals score. By using Pagespeed Insights, or others like GTmetrix, you ask a server to fetch your website and run an audit on several test points that are deemed relevant for the user experience. The scores from this audit are an approximation of what actual users experience when visiting your website.
But Google has a trick up their sleeves: they have access to the real web vitals scores. Their Chrome browser analyzes websites while they are loading on desktop and Android, and shares this data with Google. These scores are not being collected by a heavily optimized server, but also include web sessions on old devices, with poor network connections and other real-world scenario’s that your visitors are experiencing.
The good news is that you can get access to these real insights. For example: check out the CrUX report of Amazon.com
The bad news is that your website might not be listed here, because you to need have a decent amount of data points in the Google CrUX dataset to appear.
How we were able to obtain real Web Vitals data
Since we founded Marketing Engineers just over a year ago, our website is not (yet) listed in the CrUX dataset at the time of writing. However, we found a neat workaround to obtain these valuable insights.
Recently, our partner PostHog announced that they are introducing tracking of Web Vitals. Their code runs inside the browsers of our website visitors (client-side tracking) and collects (anonymously) the Web Vitals scores from the Chrome web browser.
We are gathering this data on their platform, which we then export daily to BigQuery. In BigQuery, we receive this data in the form of long JSON objects, which we transform using SQL. Once the data is neatly stored and organized in tables, we are able to visualize it using Looker Studio Pro. The result, is what you can see below: