Googleが提供するWebパフォーマンス計測ツールとしてわりとポピュラーな「PageSpeed Insights」。
ブラウザ版ではURLを打ち込むだけでそのページが最適化されているか、最適化されていなければどうすればいいかを提案してくれるので非常にありがたい。
問題点
もちろんブラウザ版でも十分使いやすいとは思うのだが、個人的には以下の２点が物足りないかなと感じている。
- 複数URLを解析したい場合、何回もURLを打ち込まなければいけない
- 以下のように、最適化についての提案をいくつかしてくれるもののどれが優先度の高い提案なのかがわからない
そこで今回は、PHPとPageSpeed InsightsのAPIを組み合わせることでこれらを解消していきたいと思う。
事前準備
Google Cloud Platformから今回の実装で使用するためのAPIキーを取得しておくこと。詳しくはこちらを参照。
実装方法
以下のURLにGETパラメータを付けてアクセスすれば、JSON形式で結果が出力される。
https://www.googleapis.com/pagespeedonline/v1/runPagespeed
使用する主なパラメータは以下の通り。
| パラメータ | 必須 | 説明 |
|---|---|---|
| key | ◯ | GCPから取得したAPIキー |
| strategy | ◯ | desktop（PC）またはmobile（SP） |
| url | ◯ | 計測対象URL |
| locale | 言語（今回はja_JPを使用） |
実装例
<?php
$psi = 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed';
// 対象URLリスト
$urls = array(
array(
'url' => 'https://sample.com', // 対象URL
'strategy' => 'mobile' // mobile or desktop
),
array(
'url' => 'https://sample.com',
'strategy' => 'desktop'
)
);
$params = array(
'key' => 'APIキー',
'locale' => 'ja_JP'
);
$columns = array();
// 1行目
$columns[] = array('URL', 'デバイス', '得点', '問題点');
foreach ($urls as $url) {
$query = array_merge($params, $url);
// GETパラメータ付URL
$api_url = $psi . '?' . http_build_query($query);
// 結果取得
$result = array($url['url'], $url['strategy']);
$json = @file_get_contents($api_url);
if($json){
$data = json_decode($json);
if($data && $data->responseCode == 200){
// 得点
$result[] = $data->score;
// 内訳
$problem = '';
$detail = $data->formattedResults;
if ($detail && $detail->ruleResults) {
foreach ($detail->ruleResults as $topic => $desc) {
// 最適化しなければいけない場合のみ
if ($desc->ruleImpact > 0){
$problem .= "・{$topic}（{$desc->localizedRuleName}）：{$desc->ruleImpact}\n";
}
}
}
$result[] = $problem;
}
}
// 計測エラー
if(count($result) < 3) $result = array_merge($result, array(0, '計測エラー'));
// 行追加
$columns[] = $result;
}
// CSV出力
$file = fopen('psi_results.csv', 'w');
// excelでの文字化け防止
stream_filter_prepend($file, 'convert.iconv.utf-8/cp932');
if ($file) {
foreach ($columns as $column) {
fputcsv($file, $column);
}
}
fclose($file);
?>
出力内容
上記を実行すると1行ごとに以下の内容がCSV形式で出力される。
| 項目 | 説明 |
|---|---|
| URL | 対象URL |
| デバイス | デバイス種別（desktopまたはmobile） |
| 得点 | 最適化の得点 |
| 問題点 | 最適化の提案とそのインパクト |
具体的に問題点については以下のような形で出力される。
項目ごとに右に記載されている点数が大きいほどインパクトの大きい施策になっている。
・LeverageBrowserCaching（ブラウザのキャッシュを活用する）：2.09375
・MainResourceServerResponseTime（サーバーの応答時間を短縮する）：1.62
・OptimizeImages（画像を最適化する）：4.6913
・SizeTapTargetsAppropriately（タップ ターゲットのサイズを適切に調整する）：0.17570803831737
他にもAPIからは詳細な内容（圧縮されていない画像のリストなど）が取得できたりもするので、ぜひとも活用していきたい。