• Stars
    star
    503
  • Rank 87,705 (Top 2 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created about 4 years ago
  • Updated about 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Measure and report on your Web Vitals data in Google Analytics

⚡ Web Vitals Report

The Web Vitals Report is a web app that makes it easy for users of the web-vitals JavaScript library to create custom visualizations of the data they've sent to Google Analytics. The app is available to use as a standalone tool, or you can fork it and customize it to your needs.


 Launch Web Vitals Report  🚀

web-vitals-report

Overview

Google Analytics does not currently provide out-of-the-box support for Web Vitals, but it does offer a number of options for measuring custom events, which you can then aggregate and report on manually.

If you're a current Google Analytics user, there are a lot of advantages to capturing your site's Web Vitals data in the tool you're already using. Primarily, it allows you to compare performance and page experience across your existing user segments—to see how it affects your goals, conversions, and other business metrics.

This is critical, as it can help you answer questions like:

  • How do my site's Web Vitals correlate with its bounce rate?
  • Do pages perform better for returning users than new users?
  • Are users more likely to make a purchase when the experience is better?

The Web Vitals Report can give you insight into all of these questions, and more!

How to use the app

Step 0: (prerequisites)

The most important step—which must be done before you can use the Web Vitals Report—is to add the web-vitals JavaScript library to your site and configure it to send data to Google Analytics

If you have not completed this step, you'll get an error when trying to create any reports.

Step 1: (authorize)

Navigate to web-vitals-report.web.app and click the "Sign in with Google" button. The sign-in flow will prompt you for permission to allow the app to view your Google Analytics data, which is needed in order to create the report.

Step 2: (configure)

After you've logged in, a form will appear asking you to select:

  1. Your Google Analytics account (and property and view)
  2. A date range to query
  3. Select the segments to compare results for

While the app does suggest a few interesting segments to compare, you're not limited to just these suggestions. If you select the bottom option "Choose segments", you'll be able to pick any segment you want.

If a particular segment you're interested in looking at is not in the list, you can always create it yourself.

Advanced configuration options

There is also an option to "use advanced options (configurable per account)". These options are useful if you've customized your web-vitals JS implementation (e.g. changed the recommended event action or label values or the metric names). They also allow you to further filter the report (e.g. only events matching a particular custom dimension value).

Debug dimension

Within the advance configuration options section is a field labelled "Debug dimension". This option can be used as an additional drill-down dimension to help identify and debug Web Vitals issues.

You can set any valid dimension here, but typically this will be a custom dimension in the form of ga:dimensionXX (were XX refers to the index of the dimension shown in the Google Analytics Admin admin section under Property Settings > Custom Definitions > Custom Dimensions).

For details on what types of debug information is useful to capture, see: Debug Web Vitals in the field

Filter reference

The syntax for specifying filters is based on the format used in the Core Reporting API, with a few limitations:

  • Only dimension filters are supported (no metric filters)
  • Only AND combinations can be used (no OR combinations)

For example, the following filter would limit the report to only include Web Vitals events on "article" pages:

ga:pagePath=~^/articles/

And this example would limit it to just non-U.S. visitors who landed on a "product" page:

ga:country!=United States;ga:landingPagePath=~^/product/\d+

Step 3: (create & analyze)

Once you've configured the report, click "Submit" to make the API request(s) and render the report.

NOTE: querying your data and generating the report can sometimes take a long time, especially if your site receives a lot of traffic (>100K visitors a day). Refer to the limitations section for details.

The generated report consists of a histogram and timeline for each of the Core Web Vitals metric, helping you visualize how the results differ by segment. It also includes a drill down of the top five countries and pages (by total number of Web Vitals events received), so you can see if certain pages or user populations perform better or worse than others.

All of the scores reported represent the value at the 75th percentile for all metric events in that segment and dimension group. To help you quickly assess your overall compliance with the Core Web Vitals thresholds, each score is colored based on the following buckets (following the thresholds outlined in web.dev/vitals:

  • Green: "good"
  • Yellow: "needs improvement"
  • Red: "poor"

Limitations

While the Web Vitals Report app is powerful, it does have some limitations. In particular, large sites may find it quite slow or run up against row limitations (see below).

In general, this tool is best suited for small to mid-size websites—particularly those who are not large enough to have all their pages appear in the Chrome User Experience Report (CrUX) dataset.

Sites that send fewer than 100,000 Web Vitals events per day should not have any problems using this report. For larger sites, on-demand reporting of unaggregated event data is likely not practical.

1 million row limit

Google Analytics imposes a limit of 1 million unique rows in each report. After 1 million rows all results are grouped into an "(other)" bucket.

Unfortunately, in order for Web Vitals Report to build a distribution and calculate the 75th percentile, it needs access to each individual event value. As a result, a report cannot be created if a site has received more than 1 million Web Vitals events per day.

Large sites still wishing to use this tool may want to consider sampling the number of events they send to Google Analytics (e.g. only send events for 10% of users). Another option is to use the BigQuery export feature in Google Analytics, which does not have the 1 million row limit restriction. However, BigQuery export is beyond the scope of the Web Vitals Report tool.

Google Analytics 4 (GA4) properties are not supported

At the moment, the Web Vitals Report only supports Universal Analytics properties. Google Analytics 4 (GA4) is not supported as it's APIs are still in alpha preview and some required features are missing.

Once the APIs are publicly available and all required features have been added, GA4 properties will be supported.

Build and run the app locally

Developers can use the Web Vitals Report app at web-vitals-report.web.app as much as they want, but they can also fork the repo and build their own version of the tool—customizing it to meet their specific needs.

To build and run the app locally, follow these steps:

  1. Clone the repo (or a fork) to your local machine.
  2. Run npm install to download and install all dependencies.

Before you can run the app locally, you'll need to create your own OAuth 2.0 credential in order to query the Google Analytics APIs.

  1. Create a new project in the Google Cloud Console and enable the following APIs: i. Google Analytics API ii. Analytics Reporting API
  2. Set up OAuth 2.0 in your new project and create a client ID and make sure to add localhost:4040 to the list of Authorized JavaScript origins.
  3. In your clone of the web-vitals-report repo, replace the client IDs in the oauth.config.json file with the client ID you just created. (The file contains separate client IDs for dev and prod builds, but it's OK to use the same client ID for both, as long as all authorized domains are correctly configured).

Once you have your own client ID, you can run the app locally:

  1. Run npm start to build the app and start a local development server
  2. Visit localhost:4040 to use the app.

License

Apache 2.0

More Repositories

1

squoosh

Make images smaller using best-in-class codecs, right in the browser.
TypeScript
21,605
star
2

comlink

Comlink makes WebWorkers enjoyable.
TypeScript
11,198
star
3

quicklink

⚡️Faster subsequent page-loads by prefetching in-viewport links during idle time
JavaScript
11,024
star
4

ndb

ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools
JavaScript
10,913
star
5

carlo

Web rendering surface for Node applications
JavaScript
9,313
star
6

ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
JavaScript
5,452
star
7

sw-precache

[Deprecated] A node module to generate service worker code that will precache specific resources so they work offline.
JavaScript
5,236
star
8

react-adaptive-hooks

Deliver experiences best suited to a user's device and network constraints
JavaScript
5,097
star
9

ui-element-samples

A collection of prototyped UI elements
JavaScript
4,101
star
10

sw-toolbox

[Deprecated] A collection of service worker tools for offlining runtime requests
JavaScript
3,621
star
11

webpack-libs-optimizations

Using a library in your webpack project? Here’s how to optimize it
3,365
star
12

critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.
JavaScript
3,330
star
13

psi

PageSpeed Insights Reporting for Node
JavaScript
3,100
star
14

bubblewrap

Bubblewrap is a Command Line Interface (CLI) that helps developers to create a Project for an Android application that launches an existing Progressive Web App (PWAs) using a Trusted Web Activity.
TypeScript
2,375
star
15

lighthousebot

Run Lighthouse in CI, as a web service, using Docker. Pass/Fail GH pull requests.
JavaScript
2,235
star
16

preload-webpack-plugin

Please use https://github.com/vuejs/preload-webpack-plugin instead.
JavaScript
2,162
star
17

worker-plugin

👩‍🏭 Adds native Web Worker bundling support to Webpack.
JavaScript
1,914
star
18

prerender-loader

📰 Painless universal pre-rendering for Webpack.
JavaScript
1,912
star
19

simplehttp2server

A simple HTTP/2 server for development
Go
1,735
star
20

jsvu

JavaScript (engine) Version Updater
JavaScript
1,698
star
21

size-plugin

Track compressed Webpack asset sizes over time.
JavaScript
1,672
star
22

clooney

Clooney is an actor library for the web. Use workers without thinking about workers.
JavaScript
1,419
star
23

browser-fs-access

File System Access API with legacy fallback in the browser
JavaScript
1,383
star
24

proxx

A game of proximity
TypeScript
1,315
star
25

dark-mode-toggle

A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:
JavaScript
1,174
star
26

application-shell

Service Worker Application Shell Architecture
JavaScript
1,169
star
27

pwacompat

PWACompat to bring Web App Manifest to older browsers
JavaScript
1,130
star
28

container-query-polyfill

A polyfill for CSS Container Queries
TypeScript
1,127
star
29

idlize

Helper classes and methods for implementing the idle-until-urgent pattern
JavaScript
1,061
star
30

houdini-samples

Demos for different Houdini APIs
JavaScript
974
star
31

jsbi

JSBI is a pure-JavaScript implementation of the official ECMAScript BigInt proposal.
JavaScript
908
star
32

css-triggers

A reference for the render impact of mutating CSS properties.
JavaScript
893
star
33

howto-components

Literate code examples for common UI patterns.
JavaScript
851
star
34

tooling.report

tooling.report a quick way to determine the best build tool for your next web project, or if tooling migration is worth it, or how to adopt a tool's best practice into your existing configuration and code base.
JavaScript
848
star
35

page-lifecycle

PageLifecycle.js is a tiny JavaScript library that allows developers to easily observe Page Lifecycle API state changes cross browser
JavaScript
803
star
36

css-paint-polyfill

CSS Custom Paint / Paint Worklet polyfill with special browser optimizations.
JavaScript
709
star
37

web-audio-samples

Web Audio API samples by Chrome Web Audio Team
JavaScript
686
star
38

chrome-for-testing

JavaScript
667
star
39

picture-in-picture-chrome-extension

JavaScript
667
star
40

estimator.dev

🧮 Calculate the size and performance impact of switching to modern JavaScript syntax.
JavaScript
665
star
41

comlink-loader

Webpack loader to offload modules to Worker threads seamlessly using Comlink.
JavaScript
616
star
42

pwa-wp

WordPress feature plugin to bring Progressive Web Apps (PWA) to Core
PHP
615
star
43

ProgressiveWordPress

A Sample WordPress-based Progressive Web App
JavaScript
570
star
44

web-push-codelab

JavaScript
557
star
45

text-app

A text editor for ChromeOS and Chrome
JavaScript
552
star
46

gulliver

A PWA directory, focusing on collecting PWA best practices and examples.
JavaScript
549
star
47

wasm-feature-detect

A small library to detect which features of WebAssembly are supported.
JavaScript
546
star
48

progressive-tooling

A list of community-built, third-party tools that can be used to improve page performance
JavaScript
546
star
49

svgomg-twa

A sample that project Trusted Web Activities technology to wrap SVGOMG in an Android Application
Shell
519
star
50

text-editor

A text editor build on the Native File System APIs
JavaScript
501
star
51

pptraas.com

Puppeteer as a service
JavaScript
455
star
52

progressive-rendering-frameworks-samples

Samples and demos from the Progressive Rendering I/O talk
JavaScript
411
star
53

wasm-bindgen-rayon

An adapter for enabling Rayon-based concurrency on the Web with WebAssembly.
JavaScript
403
star
54

MiniMobileDeviceLab

A mini mobile web device lab
Objective-C
396
star
55

webm-wasm

webm-wasm lets you create webm videos in JavaScript via WebAssembly.
C++
394
star
56

link-to-text-fragment

Browser extension that allows for linking to arbitrary text fragments.
JavaScript
390
star
57

cronet-sample

A sample for the Cronet library
Java
390
star
58

buffer-backed-object

Buffer-backed objects in JavaScript.
JavaScript
372
star
59

pinch-zoom

TypeScript
370
star
60

webpack-training-project

A training project for learning Webpack optimizations
JavaScript
368
star
61

samesite-examples

Examples of using the SameSite cookie attribute in a variety of language, libraries, and frameworks.
HTML
366
star
62

airhorn

Air horn
JavaScript
361
star
63

AutoWebPerf

AutoWebPerf provides a flexible and scalable framework for running web performance audits with arbitrary audit tools including PageSpeedInsights, WebPageTest and more.
JavaScript
353
star
64

first-input-delay

A JavaScript library for measuring First Input Delay (FID) in the browser.
JavaScript
347
star
65

tti-polyfill

Time-to-interactive polyfill
JavaScript
333
star
66

react-shrine

"Shrine" Progressive Web App sample built with React
JavaScript
330
star
67

dynamic-import-polyfill

A fast, tiny polyfill for dynamic import() that works in all module-supporting browsers
JavaScript
320
star
68

wasi-fs-access

This is a demo shell powered by WebAssembly, WASI, Asyncify and File System Access API.
TypeScript
312
star
69

native-url

Node's url module implemented using the built-in URL API.
JavaScript
284
star
70

two-up

TypeScript
281
star
71

adaptive-loading

Demos for Adaptive Loading - differentially deliver fast, lighter experiences for users on slow networks & devices
JavaScript
264
star
72

so-pwa

A progressive web app to read Stack Overflow content.
JavaScript
255
star
73

import-from-worker

It’s like import(), but runs the module in a worker.
JavaScript
249
star
74

sample-pie-shop

Example e-commerce site to explore PWA (Progressive Web App) use cases.
JavaScript
237
star
75

file-drop

A simple file drag and drop custom-element
TypeScript
232
star
76

serial-terminal

Demo application for the Web Serial API.
TypeScript
226
star
77

form-troubleshooter

TypeScript
215
star
78

postcss-jit-props

A CSS custom property helper based on PostCSS. Supply a pool of variables and this plugin will add them to the stylesheet as they are used.
JavaScript
215
star
79

audioworklet-polyfill

🔊 Polyfill AudioWorklet using the legacy ScriptProcessor API.
JavaScript
190
star
80

http2-push-manifest

Generate a list of static resources for http2 push.
JavaScript
187
star
81

pointer-tracker

Track mouse/touch/pointer events for a given element.
TypeScript
184
star
82

pr-bot

🤖 Compare your base branch to a pull request and run plugins over it to view differences
JavaScript
179
star
83

discovery

Discoveries on Sustainable Loading research
177
star
84

imagecapture-polyfill

MediaStream ImageCapture polyfill. Take photos from the browser as easy as .takePhoto().then(processPhoto)
JavaScript
176
star
85

tasklets

JavaScript
176
star
86

telnet-client

TypeScript
166
star
87

extension-manifest-converter

Python
164
star
88

credential-management-sample

Credential Management Sample
HTML
157
star
89

wadb

A TypeScript implementation of the Android Debug Bridge(ADB) protocol over WebUSB
TypeScript
156
star
90

extension-update-testing-tool

Tool for testing the update flow for Chrome Extensions during development, including permission grants.
JavaScript
154
star
91

wasm-av1

Port of the AV1 Video codec to WebAssembly
C
154
star
92

houdini.how

A community-driven gathering place for CSS Houdini worklets and resources.
JavaScript
152
star
93

pwa-workshop-codelab

JavaScript
152
star
94

perf-track

Tracking framework performance and usage at scale
Svelte
150
star
95

kv-storage-polyfill

A polyfill for the kv-storage built-in module.
JavaScript
146
star
96

http2push-gae

Drop-in HTTP2 push on App Engine
HTML
140
star
97

chromeos_smart_card_connector

Smart Card Connector App for Chrome OS
C++
135
star
98

snapshot

TypeScript
133
star
99

devwebfeed

Firehose of team++ resources
JavaScript
130
star
100

sample-currency-converter

A sample currency conversion Progressive Web App
JavaScript
129
star