Skip to content

Instantly share code, notes, and snippets.

@rviscomi

rviscomi/CrashCourseInCrUX.md

Last active May 7, 2019 10:52
Show Gist options
  • Save rviscomi/250bee3c02d1bf9e6e1f528c8813c535 to your computer and use it in GitHub Desktop.
Save rviscomi/250bee3c02d1bf9e6e1f528c8813c535 to your computer and use it in GitHub Desktop.
Download ZIP
"Crash Course in CrUX" for the PerfMatters conference, April 2019
Raw
CrashCourseInCrUX.md

Crash Course in CrUX

CrUX is the Chrome UX Report from Google. This crash course will take you through everything you need to get the most out of the data.

1. Official Docs

https://developers.google.com/web/tools/chrome-user-experience-report/

2. Guides on web.dev

https://web.dev/fast/chrome-ux-report

  • walkthroughs of using CrUX tools

3. CrUX repo

https://github.com/GoogleChrome/CrUX

  • CrUX Cookbook
  • utils for analyzing CrUX data

4. PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.nytimes.com%2F2019%2F03%2F27%2Ftechnology%2Fturing-award-ai.html

  • page and origin-level CrUX data
  • daily aggregations

5. CrUX Dashboard

https://g.co/chromeuxdash

  • historical UX trends
  • customizable, shareable, and embeddable dashboard built on Data Studio

6. Test my Site

https://www.thinkwithgoogle.com/feature/testmysite

  • mobile domain FCP comparisons
  • speed/revenue calculator

7. PageSpeed Insights API

https://developers.google.com/speed/docs/insights/v5/get-started

  • runs Lighthouse on the given URL
  • returns page and origin-level CrUX data

https://developers.google.com/apis-explorer/#p/pagespeedonline/v5/pagespeedonline.pagespeedapi.runpagespeed

  • explore the API without writing code

https://dev.to/chromiumdev/a-step-by-step-guide-to-monitoring-the-competition-with-the-chrome-ux-report-4k1o

  • blog post with steps to create a daily monitoring dashboard in Sheets

https://github.com/GoogleChrome/CrUX/tree/master/gs

  • example script to monitor CrUX using the PSI API and log to Sheets

https://docs.google.com/spreadsheets/d/1VBHLI7v_07t8iDlagrYgiLaYrKGMTRJRwonZ5I4MPm8/edit?usp=sharing

  • demo of v4 API sheet

https://datastudio.google.com/open/1hHb7H3FMe0HanjgpBRh9Cbk1k4QmzUoW

  • connect Sheets to Data Studio for prettier data viz

https://docs.google.com/spreadsheets/d/1mFWe_KbO8_MevyzrDyULbB3SQqXiciKlzWJfmyUBneU/edit?usp=sharing

  • demo of v5 API sheet

8. BigQuery

https://bigquery.cloud.google.com/project/chrome-ux-report

https://github.com/GoogleChrome/CrUX/tree/master/sql

  • "CrUX Cookbook"
  • sample recipes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment