Adding a CrUX Vis shortcut to Chrome's address bar

CrUX Vis is a (experimental¹) tool that allows you to visualize and analyze the Chrome User Experience Report (CrUX) data. The CrUX dataset provides insights from real users, including loading performance, responsiveness, and visual stability.

The preceding image is taken from CrUX Vis and shows the Core Web Vitals of https://web.dev.

Accessing the CrUX Vis report is straightforward as you are only required to input the URL (origin or page). However, if you are as lazy as me you can speed this up slightly by adding a Chrome search shortcut. This was my preferred method for accessing the CrUX Dashboard and I wanted to replicate this behavior for CrUX Vis.²

To create a custom Search Engine in Chrome, you need to navigate to chrome://settings/search and select Manage search engines and site search.

Find the section titled Site Search and click on the Add button. In the dialog, insert the following details:

• Search engine: CrUX Vis
• Shortcut: cruxvis (or any other unique keyword)
• URL with %s in place of query: https://cruxvis.withgoogle.com/#/?view=cwvsummary&url=https%3A%2F%2F%s&identifier=origin&device=ALL&periodStart=0&periodEnd=-1&display=p75s

You can now navigate to a CrUX Vis report directly from Chrome’s address bar. Typing cruxvis and pressing tab in the address bar will allow you to input the URL of the origin or page you want to query and Chrome will navigate to the CrUX Vis report for that URL.

Note that the URL should not include the protocol as https is inferred through the URL we used when creating the custom search.

Thank you for reading and I hope you’ll find this useful.

¹ CrUX Vis is expected to replace the CrUX Dashboard in the coming months. If you have any feedback on CrUX Vis, let the CrUX team know using the CrUX Vis survey or the CrUX discussion group.

² This post is heavily inspired by Rick Viscomi’s CrUX Dash shortcut. ❤️