Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

2023年11月28日

ウェブサイトの表示速度はサイトのパフォーマンスを評価する指標としてとても重要です。

みなさんもGoolgeが提供するPageSpeed Insightsを利用してウェブサイトのパフォーマンスを調査しているかと思います。

このPageSpeed Insightsはウェブサイトの表示速度だけではなく、SEOに適しているかなどを多角的に測定してくれるので、この測定結果を参考にしてサイトの改善に役立てることも多いです。

PageSpeed Insights
https://pagespeed.web.dev/

しかし、ご存知のように上記サイトにアクセスしてURLを入力して計測結果が表示されるのを待つ、というの毎回毎回繰り返すのはとても手間がかかるのと、複数ページをチェックするとなるとなおさらです。

そこで今回はいくつかのツールを組み合わせてこのPageSpeed Insightsの計測結果を取得し、Looker Studioで可視化したいと思います。

使用するツール

今回使用するツールは以下になります。

PageSpeed Insights API以外は、Googleのアカウントをお持ちでしたら無料で利用できます。

※PageSpeed Insights APIはGoogle Cloud Platform（GCP）のアカウントが必要になりますが、無料枠での利用が可能です。

PageSpeed Insights API
Google Apps Script（GAS）
Googleスプレッドシート
Looker Studio

手順

PageSpeed Insights APIを有効にする
Googleスプレッドシートを用意する
Google Apps Scriptを用意する
Looker Studioからスプレッドシートに接続する
Looker Studioで可視化する

それでは進めましょう。

１．PageSpeed Insights APIを有効にする

まず、このページにアクセスしてPageSpeed Insights APIを有効にしてAPIキーを取得します。

PageSpeed Insights API を使ってみる
https://developers.google.com/speed/docs/insights/v5/get-started

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

Google Cloud Platform（GCP）のプロジェクトを選択、または新規に作成して進みます。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

下のようにAPIの準備ができたらAPIキーを表示させます。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

ここで表示されるAPIキーは後ほど使用するので、コピーして保存しておきます。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

２．Googleスプレッドシートを用意する

取得したデータを書き込んでいくスプレッドシートを用意します。

のちほど、このスプレッドシートにLooker Studioを接続します。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

３．Google Apps Scriptを用意する

用意したスプレッドシートのメニュー、「拡張機能」から「Apps Script」を選択します。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

Apps Scriptのエディタが開くので、コードを入力します。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

【コード】

このコードを入力します。

※シート名とURL、APIキーの部分はご自身のものに差し替えてください。

function myFunction() {

const ss = SpreadsheetApp.getActiveSpreadsheet();

const sheet = ss.getSheetByName("シート名を入力する");

writeResult(sheet, getResult());

}

function getResult() {

const url = "ここにURLを入力する"

const result = UrlFetchApp.fetch(

'https://www.googleapis.com/pagespeedonline/v5/runPagespeed' +

`?url=${url}` +

"&locale=ja" +

"&strategy=desktop" +

`&key=ここにAPIキーを入力する`

);

return JSON.parse(result);

}

function writeResult(sheet, arr) {

const date = new Date();

const ExecDate = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();

const performance = arr["lighthouseResult"]["categories"]["performance"];

const fcp = arr["lighthouseResult"]["audits"]["first-contentful-paint"];

const tti = arr["lighthouseResult"]["audits"]["interactive"];

const si = arr["lighthouseResult"]["audits"]["speed-index"];

const tbt = arr["lighthouseResult"]["audits"]["total-blocking-time"];

const lcp = arr["lighthouseResult"]["audits"]["largest-contentful-paint"];

const cls = arr["lighthouseResult"]["audits"]["cumulative-layout-shift"];

sheet.appendRow([

ExecDate,

performance["score"] * 100 + "%",

parseFloat(fcp["displayValue"]),

parseFloat(tti["displayValue"]),

parseFloat(si["displayValue"]),

parseFloat(tbt["displayValue"]),

parseFloat(lcp["displayValue"]),

cls["displayValue"]

]);

入力できたら保存して実行します。

初回のみ承認を求められるので、権限を確認して進めます。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

実行ログにエラーなく「実行完了」と表示されればOKです。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

スプレッドシートを見ると、このようにデータが取得できているはずです。

※下のスプレッドシートは複数回、実行した結果なので複数行のデータがありますが、初めて実行する場合はデータは１行だけです。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

これでデータの準備ができましたので、Looker Studioで見やすく加工していきます。

４．Looker Studioからスプレッドシートに接続する

Looker Studioで新しいレポートを作成し、該当のスプレッドシートに接続します。

５．Looker Studioで可視化する

このように日ごとの各数値の推移が視覚的に把握しやすくなりました。

PageSpeed Insightsは日々変化しているため定期的にチェックして、もし表示速度に影響を及ぼしている要素を発見したら、できるだけ早く対応できるよう、数値の取得を自動化しておくのは有効です。

このレポートをメールで送信するように設定しておけば、毎日のチェックも簡単です。

自動データを取得するためにトリガーを設定する

最後にすべての設定が問題なく稼働しているか確認できたら、自動でGoogle Apps Scriptがデータを取得するようにトリガーを設定します。

データを取得する間隔は任意で調整してください。

これで常に最新のデータが反映されます。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

以上、Looker Studioでサイト表示速度（SiteSpeedInsights）を見える化する方法の解説でした。

ブログに戻る

Looker Studioで特定ページだけキャンバスサイズを変更する方法

2024年6月9日
Looker Studioでレポートを作成する際、データの量によってはデフォルトで設定しているページ内に収まりきらないことあります。例えば下のようにページの天地サイズ内に「１カ月ぶんの日付が表示できない」ようなケースです（文字を小さくすれば収まらないこともありませんが、あまり文字を小さくすると読めなくなってしまうので、それも回避したい）。こういったケースで「特定のページだけページのサイズ（キャンバスサイズ）を変更する」方法を解説します。下のようにページごとに異なるキャンバスサイズにします。設定方法まず、サイズを変更したいページを開き、メニューから「現在のページの設定」を選択します。右側のメニューから「スタイル」を選択。任意にサイズを変更しますた。下のように天地（高さ）のサイズが拡張できました。もとのサイズに比べてページ下部が拡張されています。比較するとこんな感じです。以上、Looker Studioでレポートの一部のページだけページのキャンパ部サイズを変更する方法の解説でした。

Looker Studioで特定ページだけキャンバスサイズを変更する方法

2024年6月9日
Looker Studioでレポートを作成する際、データの量によってはデフォルトで設定しているページ内に収まりきらないことあります。例えば下のようにページの天地サイズ内に「１カ月ぶんの日付が表示できない」ようなケースです（文字を小さくすれば収まらないこともありませんが、あまり文字を小さくすると読めなくなってしまうので、それも回避したい）。こういったケースで「特定のページだけページのサイズ（キャンバスサイズ）を変更する」方法を解説します。下のようにページごとに異なるキャンバスサイズにします。設定方法まず、サイズを変更したいページを開き、メニューから「現在のページの設定」を選択します。右側のメニューから「スタイル」を選択。任意にサイズを変更しますた。下のように天地（高さ）のサイズが拡張できました。もとのサイズに比べてページ下部が拡張されています。比較するとこんな感じです。以上、Looker Studioでレポートの一部のページだけページのキャンパ部サイズを変更する方法の解説でした。
Looker Studioの計算フィールドでGA4の指標の「キーイベント」が使用できない際の対処方法

2024年6月1日
「キーイベント」に関して、GA4をLooker Studioに接続して分析する際に重大な不具合があります。

Looker Studioの計算フィールドでGA4の指標の「キーイベント」が使用できない際の対処方法

2024年6月1日
「キーイベント」に関して、GA4をLooker Studioに接続して分析する際に重大な不具合があります。
Looker Studio連携したGA4を再接続した際の「コンバージョン」「キーイベント」の変...

2024年5月31日
Looker Studio連携したGA4を再接続した際の「キーイベント」の変更についての解説です。

Looker Studio連携したGA4を再接続した際の「コンバージョン」「キーイベント」の変...

2024年5月31日
Looker Studio連携したGA4を再接続した際の「キーイベント」の変更についての解説です。