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) {
//２次元配列として設定
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;
}