google-apps-scriptslacklighthousepagespeed-insightsgoogle-pagespeed-insights-api

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


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


Solution

  • First and foremost, get...

    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.