はじめに
CoreWebVitalsが重要視される昨今、担当サイトの全ページ1つずつ計測を行うのは面倒、、。
そんな思いからCWVを半自動で全ページ測定できるGASを作成してみました。
その方法について備忘録程度に記載します。
できるもの
用意するもの
- Google SpreadSheet（以下スプシ）
- 測定したいリンク
作成手順
1, スプシにリンク入力用のシートを作成
シートに計測対象を記入する表を作成します。
見出しはNo URL deviceの3項。
deviceには今後desktop、mobileのどちらかが入力されますのでプルダウンリストにしてます。
シート名を「計測対象」に変更します。
2, 計測結果を出力するテンプレートを作成
PSIスコアの計測結果を出力する表を作成します。
見出しは計測日時 + 各計測を行う項目 + URL + deviceとします。
シート名を「temp」に変更します。
3, GASにてPSIの計測処理を作成
PSIのAPI KEYを取得します。
下記にアクセスしてキーを取得をクリックし、必要に応じてプロジェクトを作成します。
https://developers.google.com/speed/docs/insights/v5/get-started?hl=ja
取得したAPI_KEYはGASで使用しますのでどこかに保存しておいてください。
スプシの拡張機能からAppScriptを選択し、GASの編集画面へと遷移します。
画面が開いたらデフォルトで記載されている内容は削除して下記のコードを張り付けます。
1行目のAPI_KEYは取得したものに変更してください。
// 取得したAPIキーを設定
const API_KEY = '■■■■■';
const SS = SpreadsheetApp.getActiveSpreadsheet();
const COPY_SHEET = SS.getSheetByName('temp');
function onOpen(){
let ui = SpreadsheetApp.getUi();
let menu = ui.createMenu('GAS');
menu.addItem('自動計測','startTimeSpan');
menu.addToUi();
}
function startTimeSpan() {
let date = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy/MM/dd');
let tmpSheet = null;
if(SS.getSheetByName(date)){
tmpSheet = SS.getSheetByName(date);
}else{
tmpSheet = COPY_SHEET.copyTo(SS);
tmpSheet.setName(date);
}
exec(tmpSheet);
}
function exec(sheet) {
let array = getURL();
let count = array.length;
for(let i = 0; i < count; i++){
let request = setQuery(array[i]);
let response = [
UrlFetchApp.fetch(request, {
muteHttpExceptions: true
})
];
let row = sheet.getLastRow();
sheet.insertRowAfter(row);
let date = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'HH:mm');
sheet.getRange(row+1, 1).setValue(date);
let result = JSON.parse(response[0].getContentText());
let convertedResult = convertToResult(result,array[i]);
sheet.getRange(row+1, 2, 1, convertedResult[0].length).setValues(convertedResult);
}
}
// 取得データの変換
function convertToResult(content,url) {
let result_array = [[]];
// ラボデータ
let labo_data = content.lighthouseResult.audits;
result_array[0].push(labo_data['first-contentful-paint'].displayValue);
result_array[0].push(labo_data['interactive'].displayValue);
result_array[0].push(labo_data['speed-index'].displayValue);
result_array[0].push(labo_data['total-blocking-time'].displayValue);
result_array[0].push(labo_data['largest-contentful-paint'].displayValue);
result_array[0].push(labo_data['cumulative-layout-shift'].displayValue);
// フィールドデータ
let field_data = content.loadingExperience.metrics;
result_array[0].push(field_data.FIRST_CONTENTFUL_PAINT_MS.percentile / 1000);
result_array[0].push(field_data.FIRST_INPUT_DELAY_MS.percentile);
result_array[0].push(field_data.LARGEST_CONTENTFUL_PAINT_MS.percentile / 1000);
result_array[0].push(field_data.CUMULATIVE_LAYOUT_SHIFT_SCORE.percentile / 100);
result_array[0].push(url[0]);
result_array[0].push(url[1]);
return result_array;
}
function setQuery(url) {
const API_URL = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
let parameters = {
url: encodeURIComponent(url[0]),
key: API_KEY,
strategy: url[1]
};
let query = API_URL + '?';
for (key in parameters) {
query += '&' + key + '=' + parameters[key];
}
return query;
}
function getURL(){
let urlSheet = SS.getSheetByName('計測対象');
let returnArray = [];
let row = urlSheet.getLastRow() -1;
for(let i = 0; i < row; i++){
if(urlSheet.getRange(i + 2, 2).getValue() != ""){
let tmp = [urlSheet.getRange(i + 2, 2).getValue(),urlSheet.getRange(i + 2, 3).getValue()];
returnArray.push(tmp);
}
}
return returnArray;
}
4, GASの実行をする
スプシに戻り、ページリロードをするとタブにGASが表示されます。
計測対象シートに計測したいページのURLをURLに、deviceにはdesktopまたはmobileを入力してください。
上記が完了したらGAS>自動計測を選択しGASを実行します。
※初回実行時はアカウントの許可が表示されますが全て許可して下さい。
実行日付のシートが作成され、各スコアが書き込まれたら完了になります。
おわりに
やはり手間が減るというのは魅力的ですね。
ただ使ってみた問題として、GASでは1回でのスクリプトの最大実行時間が決められている為、一度に大量の画面の測定を行おうと思うとスクリプトが停止してしまいます。キャッシュとかを使うことで実行行数の記憶、2回目実行時に続きの行から実行させるとかで回避できる気がするので、今後時間があればアップデートしてみようかと思います。