How To Use the PageSpeed Insights API to Monitor Page Performance - (r)

How to access the Lighthouse

Begin Lighthouse when you open the webpage you want to examine and pressing Ctrl/Cmd + Shift + Ior clicking the Developer Tool from Other tools in the menu. Change onto the Lighthousetab then click the Analyze page load button. Results are shown after a few seconds:

It is possible to drill down into the top-level percents for more information as well as hints to address the known problems. The tool is invaluable but there are some drawbacks

• You must manually start a run for every webpage you're testing.
• It's difficult to record how factors changed or degraded as time passes.
• Technical details are available to developers. This can be overwhelming for customers and supervisors who need a quick overview of developments.
• The lighthouse run can be affected by the local device or network speed, which can lead to misinterpretations.

The PageSpeed Insights API is the solution to the issues, allowing tests to be recorded and automated and then compared.

What is what is the PageSpeed Insights API?

The PageSpeed Insights API emulates how Google considers your site. It is possible to run a report each week or every time you make a performance upgrade.

PageSpeed Insights API Quickstart

The following URL should be copied to your web browser and edit the url for a performance evaluation of your web page.

  https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/  

Firefox is the best choice since it comes with a built-in JSON viewer, however Chrome also has extensions with similar functionality. The total Lighthouse Performance scores are shown below:

  url=https://mysite.com/page1  

A desktop test is run in default. However, you may expressly request it by:

  strategy=desktop  

Or switch to mobile:

  strategy=mobile  

Only tests for performance are performed unless you specify the following categories that you are interested in:

category=performance  
  category=accessibility  
  category=best-practices  
  category=seo  
  category=pwa

A language is identified by setting a location like French:

  locale=fr-FR  

and Google Analytics campaign details can be made available by setting:

utm_campaign=  
  utm_source=

It is available for free for occasional requests, however it is necessary to sign-up to obtain a Google API key if you plan to conduct multiple tests using that IP within the span of a brief time. Keys are added to the URL with:

  key=  

The URL can be constructed by constructing its query string by supplying your chosen parameters separated with ampersand (&) characters. The API URL below API URL checks the website located at https://mysite.com/ using a mobile device to assess performance and accessibility criteria:

  https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility  

You are able to design your own URLs using the Google PageSpeed API URL building tool for further assistance.

PageSpeed API JSON Results

Tests will typically return around 600 KB of JSON information, based on the selected categories, the amount of resources on the page as well as the size and complexity of screenshots (embedded in the base64 format).

The quantity of data can be overwhelming, and there's some duplication, and the results documentation is not always easy to understand. The JSON is broken down into four parts as explained below.

loadingExperience

These are the metrics used to determine the user's loading experience. It includes information such as the Core Web Vitals CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS, and FIRST_INPUT_DELAY_MS. More details, as well as an "category" value return either FAST, AVERAGE, or SLOW, or none in the event that no measurement was made. Example:

"loadingExperience": {
 "metrics": {
 "CUMULATIVE_LAYOUT_SHIFT_SCORE": 
 "percentile": 0,
 "distributions": [
 
 "min": 0,
 "max": 10,
 "proportion": 0.970
 ,
 
 "min": 10,
 "max": 25,
 "proportion": 0.017
 ,
 
 "min": 25,
 "proportion": 0.012
 
 ],
 "category": "FAST"
 ,

originLoadingExperience

They are aggregated metrics that have been determined for all users' page loading experiences. The pages are the same as loadingExperience above and sites with lesser traffic will not display any different figures.

lighthouse Result

This is the most extensive section that contains the entirety of Lighthouse metrics. It provides information about the tests:

• FinalUrl is the page that was checked after all redirects have been completed
• lighthouseVersion is the version of software
• fetchTime is the moment the test was conducted
• userAgent - the user agent string for the web browser that is used to conduct the test
• environment-wide user agent information
• ConfigurationSettings is the setting that's passed to the API. API

This is followed by an "audits" section with many sections including unused-javascript, unused-css-rules, total-byte-weight, redirects, dom-size, largest-contentful-paint-element, server-response-time, network-requests, cumulative-layout-shift, first-meaningful-paint, screenshot-thumbnails, and full-page-screenshot.

Most audit metrics provide a "details" section which contains factors such as "overallSavingsBytes" and "overallSavingsMs" which estimates the benefits of implementing a performance improvement.

The complete page and the"screenshot" and thumbnail "screenshot" sections include embedded images in base64 format.

A "metrics" section gives an overview of the measurements that are included in and around an "items" array, e.g.

"metrics": "metrics""id": "metrics""title": "Metrics","title": "Metrics","description": "Collects all metrics that are available. ",
 "score": null,
 "scoreDisplayMode": "informative",
 "details": 
 "type": "debugdata",
 "items": [
 "observedFirstVisualChange": 234,
 "observedFirstContentfulPaint": 284,
 "interactive": 278,
 "observedFirstPaintTs": 1579728174422,
 "observedDomContentLoaded": 314,
 // ... etc ...
 ]
 ,
 "numericValue": 278,
 "numericUnit": "millisecond"
 ,

"Audits" section is followed by "categories. "audits" section is then followed by "categories" which provides overall Lighthouse scores in the selected categories passed on the API URL:

"categories": {
 "performance": {
 "id": "performance",
 "title": "Performance",
 "score": 0.97,
 "auditRefs": [
 //...

"Score "score" can be defined as a value in the range of 0 to 1 that typically appears as a percentage on Lighthouse reports. In general, a score of:

• 0.9 up to 1.0 is good
• 0.5 to 0.9 suggests that improvement is needed
• below 0.5 is not good enough and demands more urgent care

The "auditRefs" section provides a list of all metrics and the weightings used to calculate each score.

analysisUTCTimestamp

In the end, the duration of the analysis is also reported. This should be identical to the time shown in lighthouseResult.fetchTime.

Very useful JSON Measures of Results

I suggest you save and look over the JSON output with an editor for text. Some include JSON formatters that are built-in or accessible in plugins. Alternately, you could utilize free online tools, for example:

•    JSON Formatter & Validator
•    JSON Formatter
•    jsonformatter.io

The following metrics are likely to be helpful. Be sure to add category options on the URL as necessary.

Summary Metrics

All scores from 0 up to 1:

Performance Metrics

Other useful performance scores include:

It is common to obtain real data and figures, such as:

• lighthouseResult.audits.total-byte-weight.numericValue -
    The total size of the page, e.g. 450123
• lighthouseResult.audits.total-byte-weight.numericUnit -
    the units used for the total page size, e.g. "byte"

Or, "displayValue" usually contains a readable message with both the figure and unit:

• lighthouseResult.audits.server-response-time.displayValue -
    a message regarding the time to respond, e.g. "Root document loaded 170 milliseconds"
• lighthouseResult.audits.dom-size.displayValue -
    A description of the an element's number in an informational message about the number of elements in DOM, e.g. "543 elements"

Design a Performance Dashboard that is no-code

Live API feeds are able to be processed and read by several systems like Microsoft Excel. (Somewhat oddly, Google Sheets does not allow JSON feeds without further plugins or macro code. It does provide support for XML.)

To transfer the live global performance score to Excel to import it into Excel, open a new spreadsheet, switch to the tab for data tab, and click From Web. You must enter your PageSpeed Insights API's URL and then click OK.

Select Connectin in the next window and then keep setting the default (Anonymous) settings. It will then take you to the query settings tool:

Select Record to the right on the lighthouse outcome Metric. After that, click on the categories as well as performances to explore to the JSON object hierarchy:

Select the In Table icon in the upper right from the right-click menu options.

After that, you can click on the filter arrow on the heading of the table in order to delete everything except your score before clicking "OK.":

Finally, finally, click to close and load to show the live performance score in the spreadsheet you have created:

It is possible to follow the same process for other metrics relevant to you.

Design a Web Performance Dashboard

This Demo of Codepen offers an online form that allows you to fill in a URL and select either mobile or desktop analysis to get results.

The code makes an URL for PageSpeed Insights, calls the API and renders the results in a summaries table, which is easier to look at than a conventional Lighthouse report.

The Asynchronous beginningCheck() function is executed when the form has been filled out. It cancels the submit event and hides previous results:

// use API request
async function startCheck(e) fields.disabled = false;

Other Development Options

The example code above fetches a result from the PageSpeed Insights API when you make a request. This report can be more customized as compared to Lighthouse but execution remains a manual process.

If you want to create complex reports with significant quantities of data, it's better to pre-calculate the figures every day , at the time that when new data on PageSpeed is released. You don't wish to display how the performance is improving in a report that is time-consuming to produce!

Summary

The Chrome Lighthouse tool is fabulous but it's difficult to analyze a large number of websites. PageSpeed Insights API PageSpeed Insights API lets users to analyze the effectiveness of a website by using programming techniques. The benefits:

• Easy setup and management in My dashboard. My dashboard
• 24 hour expert assistance
• The most efficient Google Cloud Platform hardware and network, driven by Kubernetes to ensure maximum capacity
• Enterprise-level Cloudflare integration that improves speed and security
• Global audience reach with more than 35 data centers as well as 275 PoPs worldwide