DataStudioとGASでWebPagetestの計測結果をグラフ化する | mediba Creator × Engineer Blog を読んで、実際に Google スプレッドシートで、WebPagetest で定点観測をするようにしました。
この調子で Page Speed Insights のスコアも取れるといい感じなのではと思いましたので、Google Apps Script で スコアを定期的に取得するスクリプトを書いて DataStudio で グラフ化してみました。結果を記載します。

最終的な出力結果

以下のようなグラフが出力されます。
グラフ

作成したもの

スプレッドシート

シート名 config で以下のレイアウトのスプレッドシートを作成します。
Key には、Page Speed Insights の API キー、
Urls には、チェック対象の URL、
SheetName には、チェック対象の URL の画面名を入力します。
スプレッドシート

スクリプト実行の事前準備

init.gs

config シートに入力後、以下スクリプトで初期化処理を実行します。config シートの内容を元に、画面ごとの記録シートを生成するスクリプトです。 

var Logger = BetterLog.useSpreadsheet("", "Logs");
Logger.setLevel("INFO");

function initialize() {
  // 測定sheet template を作成します。
  var sheet = getSheet("config");
  var sheetNames = getColumValues("config", "B", 3);
  for (var index = 0; index < sheetNames.length; index++) {
    var urlSheet = getSheet(sheetNames[index]);
    // sheetが存在しない場合、初期化して作成する
    if(urlSheet == null) {
       var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet();
       newSheet = activeSpreadsheet.insertSheet();
       newSheet.setName(sheetNames[index]);
       newSheet.clear();
       newSheet.getRange("A1").setValue("DATE");
       newSheet.getRange("A1").setBackground("lightsteelblue");
       newSheet.getRange("B1").setValue("MOBILE SPEED SCORE");
       newSheet.getRange("B1").setBackground("lightsteelblue");
       newSheet.getRange("C1").setValue("MOBILE USABILITY SCORE");
       newSheet.getRange("C1").setBackground("lightsteelblue");
       newSheet.getRange("D1").setValue("PC SPEED SCORE");
       newSheet.getRange("D1").setBackground("lightsteelblue");
    }
  }
  return;
}

pageSpeed.gs

以下、mobile 、 desktop それぞれでぺージスコアを記録するスクリプトになります。各画面ごとに、結果を記録します。
mobile は、USABILITY.score を持つため、USABILITY.score についても記録しています。
私はこのスクリプトを1時間おきに実行するようにスケジュール設定しました。
API_KEY には、referer を設定していて、コード上の your.domain.com には API_KEY の referer を記述します。 

var Logger = BetterLog.useSpreadsheet("", "Logs");
var API_KEY = getSheet("config").getRange("A2").getValue();
var PAGESPEED_URL = 'https://www.googleapis.com/pagespeedonline/v2/runPagespeed';
Logger.setLevel("INFO");

function executePageSpeed() {
    var urls = getColumValues("config", "A", 3);
    var sheetNames = getColumValues("config", "B", 3);
    for (var index = 0; index < sheetNames.length; index++) {
      var url = urls[index];
      var sheetName = sheetNames[index];
      var sheet = getSheet(sheetName);
      var targetRowIndex = sheet.getLastRow() + 1;
      // mobile のページスコアを取得
      result = pageSpeed_(url, "mobile","ja_JP");
      sheet.getRange(targetRowIndex, 1).setValue(new Date().toISOString());
      sheet.getRange(targetRowIndex, 2).setValue(result.ruleGroups.SPEED.score);
      sheet.getRange(targetRowIndex, 3).setValue(result.ruleGroups.USABILITY.score);
      // desktop のぺージスコアを取得   
      result = pageSpeed_(url, "desktop","ja_JP");
      sheet.getRange(targetRowIndex, 4).setValue(result.ruleGroups.SPEED.score);
    }
    return;   
}

function pageSpeed_(url, strategy, locale) {
    //URLを取得
    var url = encodeURI(url);
    locale = locale || 'ja_JP'; // default is 'en'
    strategy = strategy || 'desktop'; // 'desktop' or 'mobile'
    var fullUrl = PAGESPEED_URL + '?key=' + API_KEY + '&locale=' + locale + '&strategy=' + strategy + "&url=" + url + "&filter_third_party_resources=true";
    var headers = {
    'referer': "your.domain.com"
    };
    var options = {
     "method" : "get",
     "headers" : headers,
     "muteHttpExceptions": false
    };
    try {
      var response = UrlFetchApp.fetch(fullUrl, options);
    } catch (err) {
      throw err;
    }
    var parsedResult = JSON.parse(response.getContentText("UTF-8"));
    return parsedResult;
}

utils.gs

init.gs、pageSpeed.gs で使用している utility メソッドです。 

// 列の値を配列で取得する
function getColumValues(sheetName, columnName, startIndex) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var　sheet = ss.getSheetByName(sheetName);
  var values =　sheet.getRange(columnName + ":" + columnName).getValues();
  var result = new Array();
  for (var i = 0; i < values.length; i++) {
    if (i >= startIndex) { 
      if(values[i] != null && values[i] != "") {
        result.push(values[i]);
      }
    }
  }
  return result;
}

// シートオブジェクトを取得する
function getSheet(sheetName) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  return ss.getSheetByName(sheetName);
}

実行結果 とグラフ化

実行結果

pageSpeed.gs をスケジュール実行すると、以下のように画面ごとにスプレッドシートに記録されます。
実行結果

グラフ化

記録したスプレッドシートを DataStudio のデータソースとして設定してグラフ化します。
期間による指定をしたいため、日付の形式は 日付YYYYMMDD 形式 数値の集計方法は、平均値を設定しています。
この設定をして、グラフのスタイルを編集すれば、最終的な出力結果 のイメージのグラフが出力できます。
データソース

グラフの用途

個人的な用途としては、Blog のテンプレートを変更、 HTTP サーバの設定変更等の施策が Page Speed Insights のスコアにどの程度影響したかを Before、After で知る目的で使用する想定です。

会社等で使う場合も基本的には同様で、施策の Before、After でどの程度スコアに影響したかをするために使用するのかと思います。測り忘れ防止として、スケジュール実行しておけば安心かと。1
以上です。

  1. 仕事上だと、Page Speed Insights のスコアだけだと弱くて、売り上げ等お金に関わる指標との因果関係は別途算出する必要があるかと思います。 ↩

コメント

カテゴリー

最近の投稿