Help us understand the problem. What is going on with this article?

GAS で PageSpeedInsights API を使って Lighthouse のスコアも取得する

More than 1 year has passed since last update.

PageSpeedInsights がアップデートされ、Lighthouse のスコアも取得できるようになりました。
API も v5 になり以前とは変わりました。
新しい API を使って、Google Apps Script でスコアを取得するツールを作成しました。

新しい API(v5)を簡単に実行するには

API Explorer
があるので、ここでお試しできます。

Pagespeedapi: runpagespeed
ここに、レスポンスの詳細やパラメータの詳細が載っています。

実装メモ

APIkey の取得

このページからCredentials page. APIkey を取得して準備しておく

取得しているスコア

今回取得しているスコアは以下のものを取得しています。

  • lighthouse score
    • accessibility
    • best-practices
    • performance
    • pwa
    • seo
  • cruxMetrics
    • コンテンツの初回ペイント(First Contentful Paint)
    • 初回入力遅延(First Input Delay)
  • lighthouseMetrics
    • コンテンツの初回ペイント (First Contentful Paint)
    • 速度インデックス (Speed Index)
    • インタラクティブになるまでの時間 (Time to Interactive)
    • 意味のあるコンテンツの初回ペイント (First Meaningful Paint)
    • CPU の初回アイドル (First CPU Idle)
    • 入力の推定待ち時間 (Estimated Input Latency)

コード

コードの初回実行時は許可が必要になるので注意
このコードでは、シート名がシートのスプレッドシートに desktop と moblie の結果を両方出力しています。

function myFunction() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getSheetByName('シート');
  if (!sheet) return;

  //入力列の設定(行を挿入して設定)
  sheet.insertRowBefore(4);
  var dateCell = sheet.getRange(4, 1);
  dateCell.setValue(
    Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy/MM/dd HH:mm')
  );

  //デスクトップとモバイルの両方を計測
  var request = [setUpQuery(true), setUpQuery(false)];

  try {
    var response = [
      UrlFetchApp.fetch(request[0], { muteHttpExceptions: true }),
      UrlFetchApp.fetch(request[1], { muteHttpExceptions: true })
    ];
  } catch (err) {
    Logger.log(err);
    return err;
  }

  // jsonをパースする
  var parsedResult = [
    JSON.parse(response[0].getContentText()),
    JSON.parse(response[1].getContentText())
  ];

  var desktopResult = convertResult(parsedResult[0]);
  var mobileResult = convertResult(parsedResult[1]);

  //結果の貼り付け
  sheet
    .getRange(4, 2, desktopResult.length, desktopResult[0].length)
    .setValues(desktopResult);
  sheet
    .getRange(4, 15, mobileResult.length, mobileResult[0].length)
    .setValues(mobileResult);
}

//取得データの変換
function convertResult(content) {
  //2次元配列として設定
  var arr = [[]];
  //lighthouseScore
  arr[0].push(content.lighthouseResult.categories.accessibility.score);
  arr[0].push(content.lighthouseResult.categories['best-practices'].score);
  arr[0].push(content.lighthouseResult.categories.performance.score);
  arr[0].push(content.lighthouseResult.categories.pwa.score);
  arr[0].push(content.lighthouseResult.categories.seo.score);
  //cruxMetrics
  arr[0].push(
    content.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.category
  );
  arr[0].push(content.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.category);
  //lighthouseMetrics
  arr[0].push(
    content.lighthouseResult.audits['first-contentful-paint'].displayValue
  );
  arr[0].push(content.lighthouseResult.audits['speed-index'].displayValue);
  arr[0].push(content.lighthouseResult.audits['interactive'].displayValue);
  arr[0].push(
    content.lighthouseResult.audits['first-meaningful-paint'].displayValue
  );
  arr[0].push(content.lighthouseResult.audits['first-cpu-idle'].displayValue);
  arr[0].push(
    content.lighthouseResult.audits['estimated-input-latency'].displayValue
  );

  return arr;
}

//APIクエリーの作成
function setUpQuery(desktopFlg) {
  var api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
  var parameters = {
    url: encodeURIComponent('計測したいURL'),
    key: '取得したAPIkey'
  };
  var category = [
    'accessibility',
    'best-practices',
    'performance',
    'pwa',
    'seo'
  ];

  var query = api + '?';
  for (key in parameters) {
    query += '&' + key + '=' + parameters[key];
  }

  category.forEach(function(tmp) {
    query += '&category=' + tmp;
  });

  if (desktopFlg) {
    query += '&strategy=desktop';
  } else {
    query += '&strategy=mobile';
  }

  return query;
}

参考リンク

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした