Know the speed of your pages and make them better! Powered by the Chrome User Experience Report, CrUX Explorer provides you with data from real Chrome users all around the world to know how a page or a site is performing in terms of:
- Loading, thanks to the LCP metric
- Interactivity, with FID data
- Visual Stability, owing to CLS values
CWV are part of Google's Page Experience ranking signals, so improving them you are working on inproving your SEO results.
Check how your page is performing in CWV and compare your results to your main competitors. You can also save your CWV results and check them whenever you need them in the History section. Check how your metrics evolve over time!
This project stores secret data (database configuration and API keys) in the React App. I know it's a terrible idea and it will be visible through developer tools. This data should be stored in backend.
https://crux-explorer.netlify.app
If you want to create your own CrUX Explore, follow these instructions.
- Clone the repository and install dependencies:
$ git clone [email protected]:guaca/crux-explorer.git
$ cd crux-explorer
$ npm install
-
Create a Firebase Project and set your credentials in firebaseConfig.js file (documentation)
-
Get your own Crome User Experience Report APIkey and set it in NewCheck.jsx file (documentation)
Now you can run one of the available scripts
Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
- React and React Hooks for building the entire UI and handle the app state.
- React Router, to handle URLs.
- Firebase Authentication, to allow users to sign in and use the tool.
- Axios, to fetch data from de Chrome User Experience API.
- Recharts, for data visualization.
- React Helmet, to handle SEO tags.
- Create an input component to ask users for their own CrUX APIkey and store it in localStorage.
- Store saved tests into Firebase Realtime Database instead of localStorage.
- Add Jest unit testing.