Page Speed Checker using Google PageSpeed API

Today we create a custom website page speed checker using Google PageSpeed API.

On this process, two steps to creating page speed checker,

Creating an HTML text box with a button.
Creating an onClick function on the above mentioned button.
Creating a PageSpeed function that takes the URL from the text box.

Creating an HTML Text box with a Button

We create an HTML form with a text box and a button for getting particular website speed data.

<style type="text/css">
          .isItLoaded{display: none;}
        .isItShow{display: block !mportant;}
</style>

  <input type="text" name="" id="user_url">
  <button type="button" onclick="run();">Click here to test</button>
  <div id="content" class="">
  <div id="loading"></div>
    <div class="isItLoaded">Loading...</div>
  </div>

.isItLoaded{display: none;}

.isItShow{display: block !mportant;}

</style>

<button type="button" onclick="run();">Click here to test</button>

<div class="isItLoaded">Loading...</div>

</div>

Page Speed Checker using Google PageSpeed API.

Creating a JavaScript Function

Here is the complete source code of JavaScript onClick function.

<a href="https://code.jquery.com/jquery-3.4.1.min.js">https://code.jquery.com/jquery-3.4.1.min.js</a>
<script>
    function run() {
      
      $('.isItLoaded').removeClass('isItLoaded');
      $('.isItLoaded').addClass('isItShow');

      const url = setUpQuery();
      fetch(url)
        .then(response => response.json())
        .then(json => {
          // See https://developers.google.com/speed/docs/insights/v5/reference/pagespeedapi/runpagespeed#response
          // to learn more about each of the properties in the response object.
          showInitialContent(json.id);
          const cruxMetrics = {
            "First Contentful Paint": json.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.category,
            "First Input Delay": json.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.category
          };
          showCruxContent(cruxMetrics);
          const lighthouse = json.lighthouseResult;
          const lighthouseMetrics = {
            'First Contentful Paint': lighthouse.audits['first-contentful-paint'].displayValue,
            'Speed Index': lighthouse.audits['speed-index'].displayValue,
            'Time To Interactive': lighthouse.audits['interactive'].displayValue,
            'First Meaningful Paint': lighthouse.audits['first-meaningful-paint'].displayValue,
            'First CPU Idle': lighthouse.audits['first-cpu-idle'].displayValue,
            'Estimated Input Latency': lighthouse.audits['estimated-input-latency'].displayValue
          };
          $('.isItLoaded').removeClass('isItShow');
          showLighthouseContent(lighthouseMetrics);
        });
    }

    function setUpQuery() {
      var user_url = document.getElementById('user_url').value;
      const api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
      const parameters = {
        url: encodeURIComponent(user_url)
      };
      let query = `${api}?`;
      for (key in parameters) {
        query += `${key}=${parameters[key]}`;
      }
      return query;
    }

    function showInitialContent(id) {
      document.body.innerHTML = '';
      const title = document.createElement('h1');
      title.textContent = 'PageSpeed Insights API Demo';
      document.body.appendChild(title);
      const page = document.createElement('h3');
      page.textContent = `Page tested: ${id}`;
      document.body.appendChild(page);
    }

    function showCruxContent(cruxMetrics) {
      const cruxHeader = document.createElement('h2');
      cruxHeader.textContent = "Chrome User Experience Report Results";
      document.body.appendChild(cruxHeader);
      for (key in cruxMetrics) {
        const p = document.createElement('p');
        p.textContent = `${key}: ${cruxMetrics[key]}`;
        document.body.appendChild(p);
      }
    }

    function showLighthouseContent(lighthouseMetrics) {
      const lighthouseHeader = document.createElement('h2');
      lighthouseHeader.textContent = "Lighthouse Results";
      document.body.appendChild(lighthouseHeader);
      for (key in lighthouseMetrics) {
        const p = document.createElement('p');
        p.textContent = `${key}: ${lighthouseMetrics[key]}`;
        document.body.appendChild(p);
      }
    }
  </script>

<a href="https://code.jquery.com/jquery-3.4.1.min.js">https://code.jquery.com/jquery-3.4.1.min.js</a>

function run() {

$('.isItLoaded').removeClass('isItLoaded');

$('.isItLoaded').addClass('isItShow');

const url = setUpQuery();

fetch(url)

.then(response => response.json())

.then(json => {

// See https://developers.google.com/speed/docs/insights/v5/reference/pagespeedapi/runpagespeed#response

// to learn more about each of the properties in the response object.

showInitialContent(json.id);

const cruxMetrics = {

"First Contentful Paint": json.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.category,

"First Input Delay": json.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.category

};

showCruxContent(cruxMetrics);

const lighthouse = json.lighthouseResult;

const lighthouseMetrics = {

'First Contentful Paint': lighthouse.audits['first-contentful-paint'].displayValue,

'Speed Index': lighthouse.audits['speed-index'].displayValue,

'Time To Interactive': lighthouse.audits['interactive'].displayValue,

'First Meaningful Paint': lighthouse.audits['first-meaningful-paint'].displayValue,

'First CPU Idle': lighthouse.audits['first-cpu-idle'].displayValue,

'Estimated Input Latency': lighthouse.audits['estimated-input-latency'].displayValue

};

$('.isItLoaded').removeClass('isItShow');

showLighthouseContent(lighthouseMetrics);

});

}

function setUpQuery() {

var user_url = document.getElementById('user_url').value;

const api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';

const parameters = {

url: encodeURIComponent(user_url)

};

let query = `${api}?`;

for (key in parameters) {

query += `${key}=${parameters[key]}`;

}

return query;

}

function showInitialContent(id) {

document.body.innerHTML = '';

const title = document.createElement('h1');

title.textContent = 'PageSpeed Insights API Demo';

document.body.appendChild(title);

const page = document.createElement('h3');

page.textContent = `Page tested: ${id}`;

document.body.appendChild(page);

}

function showCruxContent(cruxMetrics) {

const cruxHeader = document.createElement('h2');

cruxHeader.textContent = "Chrome User Experience Report Results";

document.body.appendChild(cruxHeader);

for (key in cruxMetrics) {

const p = document.createElement('p');

p.textContent = `${key}: ${cruxMetrics[key]}`;

document.body.appendChild(p);

}

function showLighthouseContent(lighthouseMetrics) {

const lighthouseHeader = document.createElement('h2');

lighthouseHeader.textContent = "Lighthouse Results";

document.body.appendChild(lighthouseHeader);

for (key in lighthouseMetrics) {

const p = document.createElement('p');

p.textContent = `${key}: ${lighthouseMetrics[key]}`;

document.body.appendChild(p);

}

</script>

Here we use Google page speed API.

Live Demo of PageSpeed Checker

See the Pen Page Speed Checker using Google PageSpeed API by Bikash Panda (@phpcodertech) on CodePen.

Also Check:

Happy Coding..!

Was this article helpful?

YesNo

2 thoughts on “Page Speed Checker using Google PageSpeed API”

Create Date Picker using Materialize Framework - PHPCODER.TECH says:

May 14, 2020 at 9:42 pm

[…] Page Speed Checker using Google PageSpeed API […]

PHP Venmo Integration with Braintree - PHPCODER.TECH says:

May 28, 2020 at 9:06 pm

[…] Page Speed Checker using Google PageSpeed API […]

Page Speed Checker using Google PageSpeed API

Creating an HTML Text box with a Button

Creating a JavaScript Function

Live Demo of PageSpeed Checker

By Bikash

Related Post

2 thoughts on “Page Speed Checker using Google PageSpeed API”

Leave a Reply Cancel reply

You Missed

5 Most Effective Ways To Optimize PHP Code

Debugging in PHP: A Comprehensive Guide with Examples

3 popular ways to make HTTP requests in JavaScript

PHP: Logout From All Devices on Password Change