How to send Google Lighthouse reports to Slack using PageSpeedInsights API and Google Apps Script

Question

I want to get regular updates on my website's speed through Slack. How to achieve this using Google Apps Script?

Answer 1

First and foremost, get...

• Your PageSpeedInsights API key, (here is how)
• A Slack webhook url, (here is how)

Once you have these, go to https://script.google.com/home and create a new script.
The following code should do the trick:

var mobileData = fetchDataFromPSI('mobile');
var desktopData = fetchDataFromPSI('desktop');

function pageSpeedApiEndpointUrl(strategy) {
  const apiBaseUrl = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
  const websiteHomepageUrl = ''; // Your website
  const apikey = ''; // Your API key
  
  const apiEndpointUrl = apiBaseUrl + '?url=' + websiteHomepageUrl + '&key=' + apikey + '&strategy=' + strategy;
  return apiEndpointUrl;
}
function fetchDataFromPSI(strategy) {
  const pageSpeedEndpointUrl = pageSpeedApiEndpointUrl(strategy);
  const response = UrlFetchApp.fetch(pageSpeedEndpointUrl);
  const json = response.getContentText();
  const parsedJson = JSON.parse(json);
  
  const lighthouse = parsedJson['lighthouseResult']
  const originLoadingExperience = parsedJson['originLoadingExperience']

  const result = {
    'overall_performance': originLoadingExperience['overall_category'],
    'score': lighthouse['categories']['performance']['score']*100,
    'firstContentfulPaint': lighthouse['audits']['first-contentful-paint']['displayValue'],
    'speedIndex': lighthouse['audits']['speed-index']['displayValue'],
    'timeToInteractive': lighthouse['audits']['interactive']['displayValue'],
    'firstMeaningfulPaint': lighthouse['audits']['first-meaningful-paint']['displayValue'],
  }
  return result; 
}
function composeMessageForSlack() {
  const message = {
    'blocks': [
     {
      'type': 'section',
      'text': {
        'type': 'mrkdwn',
        'text': '*Website performance on Prod:*'
       }
     }
    ],
     'attachments': [
      {
        'blocks': [
          {
            'type': 'section',
            'text': {
              'type': 'mrkdwn',
              'text': 'Performance on Mobile :point_down:'
             }
          },
          {
          'type': 'section',
          'text': {
              'type': 'mrkdwn',
              'text': 'Score = ' + mobileData['score'] + 
                      '\n\nFirst Contentful Paint = ' + mobileData['firstContentfulPaint'] + 
                      '\n\nSpeed Index = ' + mobileData['speedIndex'] + 
                      '\n\nTime To Interactive = ' + mobileData['timeToInteractive'] +
                      '\n\nFirst Meaningful Paint = ' + mobileData['firstMeaningfulPaint'] + 
                      '\n\nOverall Performance is = ' + mobileData['overall_performance'] + '\n\n'
          }
        },
        {
          'type': 'divider'
        },
        {
          'type': 'section',
          'text': {
            'type': 'mrkdwn',
            'text': 'Performance on Desktop :point_down:'
           }
         },
         {
          'type': 'section',
          'text': {
              'type': 'mrkdwn',
              'text': 'Score = ' + desktopData['score'] + 
                      '\n\nFirst Contentful Paint = ' + desktopData['firstContentfulPaint'] + 
                      '\n\nSpeed Index = ' + desktopData['speedIndex'] + 
                      '\n\nTime To Interactive = ' + desktopData['timeToInteractive'] +
                      '\n\nFirst Meaningful Paint = ' + desktopData['firstMeaningfulPaint'] +
                      '\n\nOverall Performance is = ' + desktopData['overall_performance'] + '\n\n'
          }
         }
       ]
      }
     ]
  };
  
  return message;
}
function postDataToSlack() {
  const slackWebhookUrl = ''; //Your Slack webhook url

  const payload = composeMessageForSlack();
  
  const options = {
    'method' : 'post',
    'contentType' : 'application/json',
    'payload' : JSON.stringify(payload)
  };
  
  return UrlFetchApp.fetch(slackWebhookUrl, options);
}
function doGet() {
  postDataToSlack()
  return ContentService.createTextOutput('Website Performance retrieval successfull!');
}

Once you test the code and make sure it works, determine the frequency of your report using triggers.