Retrieve performance metrics from public API

In our journey to go from blind to supervision on performance at ManoMano, we have among other things used the chrome user experience report more commonly called CrUX via a public and free API and Lighthouse via the Pagespeed API.

In this article we will help you to get started with them.

If you want to know what we did with this 2 APIs in our performance journey please follow this link. ManoMano web performance journey.

Using Chrome UX report API

This Bigquery-based API provides a summary of RUM (Real user monitoring) data. This data collected by the Chrome browser are real data concerning the core web vitals metrics of our website. They allow us to have real visibility of what is happening.

The Core web vitals are the percentile 75 of each metrics, and each one use a repartition/distribution.

Range for the distribution.

For each URL we monitor, we are able to retrieve the percentages of “good”, “to improve” and “poor”. Which allows us to have an additional level.

Example with ManoMano LCP (Largest contentful paint). It is 2438ms (today), so we have a good LCP because we are under the 2500ms.

Looking at the repartition/distribution on our product page, we can have a better view. In the following illustration we see that more or less 68% of our visitors are in this range, 20% in the “to improve“ and 11% in the poor.

Core web vitals distribution visualization

Using this API is an easy process.

• Go to your google cloud console
• Go to API and service menu

• Go to credentials (you can go directly to this submenu )

• Click on create credentials and select API key

The google console will create the key, you can use it right now to test. When the key is created, it is in unrestricted mode. Don’t forget to edit the possibilities later.

You can test the key and the url with curl

curl https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=API_KEY \ 
--header ‘Content-Type: application/json’ --data ‘{“origin”:”https://www.manomano.fr/"}'

Note the url_pattern to “origin”, this is for the core web vitals aggregated for the origin, to get them for one url you have to use “url”

curl https://chromeuxreport.googleapis.com/v1/records:queryRecord\?key\=API_KEY \
 --header ‘Content-Type: application/json’ --data ‘{“url”:”https://www.manomano.fr/p/coupe-boulon-200-knipex-31541611\?model_id\=19519066"}'

You will have the response as a json object for each metrics

“largest_contentful_paint”: {
  “histogram”: [
  {
     “start”: 0,
     “end”: 2500,
     “density”: 0.76662998899670121
   },
   {
     “start”: 2500,
     “end”: 4000,
     “density”: 0.1525457637291192
   },
   {
     “start”: 4000,
     “density”: 0.080824247274182845
   }
  ],
  “percentiles”: {
    “p75”: 2438
  }
}

Here the LCP with the distribution (i%) for each range

• 0 to 2500 ms : Good
• 2500 to 4000 ms: Need to improve
• More than 4000: Poor

And the percentiles 75 used as the Core web vital value for the origin or url.

Now you know how to request Core Web vitals for an url or origin with the Chrome Ux report API

You can go further with the official documentation

PageSpeed API

Getting Core web vitals metrics is a good thing but limited. In this step we will see 2 axes to have more detail.

The Chrome dev tools (https://developer.chrome.com/docs/devtools/) .
A powerful tool to scan a webpage for performance information.

As this tool is really useful the limit is to manipulate it locally by the developer.

The next useful tool here is Lighthouse.
Lighthouse gives a lot of information and can help to find the bottlenecks of a page.

It can be used in different ways.

• On a web page i.e: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.manomano.fr%2F

• In the chrome dev tools

• From the pagespeed api (online tool to test it)

Pagespeedapi: runpagespeed | PageSpeed Insights | Google Developers

From this call you get a full json report and pass it in a json beautifier to dig in

The lighthouse report with the specific PERFORMANCE category selected comes with 57 audits, not all useful but it’s a really good start to work.

Using this API in a script, we can get metrics and send it to a tool to create a dashboard and have more precise information about the tested webpages.

To try it in a terminal:

Like the Chrome Ux report API you need an API_KEY, the same could work, but for each project is better to create a specific api key.

curl https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.manomano.fr&key=yourAPIKey

Result:

We only show you a screenshot of a part because the real content is big.

Same as the Chrome Ux report API the official documentation is pretty clear. https://developers.google.com/speed/docs/insights/v5/get-started

I hope this was clear and helpful to you. this 2 API where a big start in the performance journey at Manomano

To read the article of the Road to web perf at ManoMano follow this link.

And don’t hesitate to clap.