Code Monkey home page Code Monkey logo

crux-history's Introduction

CrUX Historical Data 🚧

The CrUX historical data dashboard is intended to surface trends in core web vitals over time.

What is this?

This project is a small collection of charts that shows CrUX (Chrome User Experience Report) historical data. The API provides a number of metrics, all of which are displayed in the dashboard:

  • CLS (Cumulative layout shift)
  • TTFB (Time to first byte)
  • FCP (First contentful paint)
  • LCP (Largest contentful paint)
  • FID (First input delay)
  • INP (Interaction to next paint)

For more info on what CrUX data entails and how it's gathered, see: https://developer.chrome.com/docs/crux.

How to interpret the charts

Each chart is a histogram spanning the past 25 weeks. Each "week" on the chart is actually the last date of a 28-day rolling window. The bins into which the histogram is divided (red = bad, yellow = okay, green = good) are defined by Google and hard coded in their API response.

The unit of measurement for all charts is milliseconds, except for CLS, which uses a scoring system.

As of March 28 2024, the TTFB metric is still considered experimental.

❗IMPORTANT❗ - Note that the Y-axis on the graph is logarithmically scaled. This ensures that changes in "bad" and "okay" user groups are amplified. Since these charts are meant to show change over time rather than raw magnitudes, do not assume that a big red bar necessarily means a high percentage of users with a bad experience.

Rate limits

The CrUX history API has a rate limit of 150 requests/minute. This should be sufficient, but if you find yourself getting limited, feel free to deploy your own:

Deploy with Vercel

See this page for instructions on creating an API key. The API is provided at no cost, but the key is required. Once you have it, set the GOOGLE_API_KEY environment variable for your project.

crux-history's People

Contributors

pbzona avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.