What is the best way to use PagesSpeed Insights API to monitor the performance of your website - (r)

How do I access the Lighthouse

Get started with Lighthouse when you open the page you wish to view and then press Ctrl/Cmd/Shift, and Shift andor press to open the Developer tool in the menu that is available alongside other tools in the menu. Switch to Lighthouse and click the Lighthousetab then hit the Analyze load of the page button. The results are displayed after a few minutes

This tool lets you go down to the highest-level percentages to get more details along with suggestions on how to address the known issues. This tool is extremely useful, however there are some limitations

• You must manually start each run on every page you're trying to test.
• It's hard to pinpoint which factors have altered or diminished over time.
• The technical details are accessible to developers. It could cause confusion for supervisors and customers who need a quick review of the latest changes.
• The lighthouse's run is dependent on the speeds of the local device , or the network. This could cause confusion.

PageSpeed Insights API PageSpeed Insights API offers the answer that allows for tests to be documented , automated before being evaluated.

What is the purpose of this API? What is the PageSpeed Insights API?

The PageSpeed Insights API emulates how Google thinks about your site. It is possible to create a report every week or each time you perform enhancements to your performance.

PageSpeed Insights API Quickstart

This URL should be added to your web browser. You can edit the url to get a performance assessment of your website.

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

Firefox is the most suitable option as it has an integrated JSON viewer. However, Chrome also has extensions with the exact functionality. The entire Lighthouse Performance score can be seen below:

url=https://mysite.com/page1

A desktop test is run in default. You can however, specifically request it via:

strategy=desktop

Alternately, change to mobile

strategy=mobile

The only tests conducted are tests for efficiency. performed unless you specify what category you're interested in:

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

It is possible to identify the language using a similar setting to French:

locale=fr-FR

and Google Analytics campaign details can be available through changing the setting:

utm_campaign=    
     utm_source=

The API is no cost for requests that are not frequently used, but it is required to register to get the Google API key if you plan to conduct a lot of tests on the IP within the course of a single hour. Keys can be included in the URL using:

key=

The URL is constructed through the process of constructing the query string, entering your desired parameters separated by ampersand (and) characters. The API URL in the below API URL examines the web page accessible http://mysite.com/ https://mysite.com/ using devices on mobiles to determine the access and performance criteria.

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

It is possible to create your own URLs using the Google PageSpeed API. Google PageSpeed API URL Creator tool for further assistance.

PageSpeed API JSON Results

Tests will typically return around 600 KB of JSON information. This is based on the chosen categoriesand the number of data that are displayed in terms of complexity and the dimensions of the images (embedded in the format of base64).

The quantity of data can seem insurmountable. Additionally, there is an occasional duplication. The documentation of the findings isn't always easy to understand. The JSON is split into four components as detailed below.

Experience loading with loadExperience

They are the metrics that are that are used to evaluate the experience of loading. It includes information such as the Core Web Vitals CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS, and FIRST_INPUT_DELAY_MS. Further details are provided, as well as the "category" value that returns fast, average, or SLOW and also none for the case where there's any measurement. 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

These are the metrics which have been calculated for each user's load experience. They are the same as loadingExperience. Sites with fewer visitors will not show any other numbers.

Lighthouses as a Result

This is the biggest section and contains the entirety of the Lighthouse measurements. The section includes information about the tests:

• FinalUrl is the page which visitors visited following redirections were made.
• lighthouseVersion is the lighthouseVersion version of software
• fetchTime is the moment the test was conducted
• UserAgent - The User Agent string for the web browser utilized for the testing
• 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" along with the thumbnail "screenshot" sections contain embedded images in the format of base64.

"Metrics" section of the "metrics" section offers an overview of all the measurements that are included in the "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" area is followed by "categories. "audits" section will be followed by "categories" which provides an overall Lighthouse scores within the selected categories passed on the API URL:

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

"Score "score" scores are identified as a number in the range of 1 to zero that typically appears as a percentage on Lighthouse reports. The general rule is that a score comprises:

• 0.9 and up 1.0 is considered good
• 0.5 to 0.9 suggests that improvements are necessary
• below 0.5 is not enough and requires urgent medical attention.

"auditRefs" section contains a list of all metrics "auditRefs" section provides the measurements listed and weightings in determining each score.

analysisUTCTimestamp

The end-of-the-day time of the study is also included. This should be identical to the time shown in lighthouseResult.fetchTime.

Highly beneficial JSON measures of results

I recommend saving and read through the JSON output using an editor capable of handling text. There are some editors that include JSON formatters that are integrated or can be downloaded in plugins. Alternately, you could use the free tools available on the internet, such as:

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

The following indicators are likely to help. It is important to include categories on your URL if needed.

Summary Metrics

Scores range from 0-1:

Performance Metrics

The other performance score that is useful are:

It's normal to gather accurate data and figures like:

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

or "displayValue" usually contains or "displayValue" usually contains a clear message that is readable with the figure and unit:

• lighthouseResult.audits.server-response-time.displayValue -
       A message indicating the duration to reply, e.g. "Root document loaded within 170 milliseconds"
• lighthouseResult.audits.dom-size.displayValue -
       A short description of the element's number  with an informational message regarding the number of elements within DOM, e.g. "543 elements"

Create a Performance Dashboard that is no-code

Live API feeds can be able to be read and processed in a variety of systems, including Microsoft Excel. (Somewhat bizarrely, Google Sheets does not allow JSON feeds without any additional macros or plugins. However, the application can support XML.)

In order to transfer the live global performance score to Excel in order to import it into Excel to be imported into Excel to be imported into Excel, create a new spreadsheet, switch into the tab that is on Data tab and then select from the web. It is necessary to enter the PageSpeed Insights API's URL , after which hit"OK.

Choose Connectin within the following window after which you can set it to the standard (Anonymous) settings. It will take users to the query settings tool:

Choose Record on the right side on the lighthouse result Metric. Then, select the option and performance for a deeper dive into the JSON objects hierarchy.

Select the Table icon on the upper-right corner of the right-click menu choices.

Once you have that done, make use of the filter option on the heading of the table to delete all other data except that score prior to pressing "OK.":

Then, hit for the button to quit. Then, load for the live performance score on the spreadsheet you made:

It is possible to follow the exact same procedure for any other parameters that you are interested in.

Create an Web Performance Dashboard

The Demo can be found in Codepen and includes an online application that permits you to input the URL of your choice and then choose the mobile or desktop option to see the result.

The code creates the HTTP URL for PageSpeed Insights. The program then utilizes the API and presents the results as a table with summary information, which is more readable rather than the typical Lighthouse report.

The Asynchronous beginningCheck() function is run when the form is filled out. The submit event is cancelled and conceals the previous results

// use the API request async feature startCheck(e) fields.disabled is false

Other Development Strategies that can be used in addition to the above

The example code will get an answer to PageSpeed Insights API when you make an request. This report can further be customized and compared to Lighthouse but the process remains an manual procedure.

If you're planning to create complex reports that need large volumes of data, it's best to calculate the numbers each day during the day to determine the date when the latest information is made available to PageSpeed releases. You don't wish to display the performance increase in a report that's long to compose!

Summary

It's great to use Chrome Lighthouse. Chrome Lighthouse tool is fantastic but it's not easy to study a huge number of sites. PageSpeed Insights API PageSpeed Insights API lets users examine the speed of websites by using programming techniques. The advantages:

• It's easy to set up and manage My dashboard. My dashboard
• 24/7 expert support
• The most efficient Google Cloud Platform hardware and network are powered by Kubernetes to ensure maximal capacity
• Enterprise-level Cloudflare integration, which enhances the performance and security
• Connect to the world's audience by utilizing over 35 data centers, as well more than 275 POPs in all over the world.

This article was originally posted here

Article was posted on here