PageSpeed Insight API を使ってサイトのPerformanceを取得する。
やりたいこと(やりたかったこと)
PageSpeed Insight APIを使ってPerformanceを取得してリリースごとに劣化していないか確認したかった。
実際にAPIを叩いてみる。
curlのサンプルがあるのですぐに叩ける。1秒間に複数回のリクエストをする場合は API Key が必要になるけど、基本的にいらないと思う。
curl https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mutaonet.hatenablog.com/
レスポンスの量が凄まじいので省略。
レスポンスの詳細は下記。curlを使わなくても簡単にリクエストできる。
Performanceの結果は response → lighthouseResult → audits の中にある。
auditの中身は以下。大量にある。
resource-summary
no-document-write
screenshot-thumbnails
uses-optimized-images
first-meaningful-paint
render-blocking-resources
server-response-time
diagnostics
uses-long-cache-ttl
font-display
largest-contentful-paint-element
network-requests
estimated-input-latency
legacy-javascript
speed-index
unused-javascript
timing-budget
user-timings
unminified-javascript
first-cpu-idle
network-server-latency
first-contentful-paint-3g
unused-css-rules
performance-budget
critical-request-chains
long-tasks
interactive
max-potential-fid
dom-size
uses-rel-preconnect
uses-responsive-images
uses-passive-event-listeners
uses-text-compression
network-rtt
total-blocking-time
first-contentful-paint
redirects
cumulative-layout-shift
uses-webp-images
largest-contentful-paint
main-thread-tasks
large-javascript-libraries
offscreen-images
efficient-animated-content
non-composited-animations
unminified-css
layout-shift-elements
mainthread-work-breakdown
bootup-time
final-screenshot
total-byte-weight
third-party-summary
duplicated-javascript
uses-rel-preload
metrics
この key の中にまた階層構造があり、一体何を見ればよくわからない。
ここまでやったところで疲れて頓挫してしまった。
あとAPI の responce time も長いので debug にも根気がいる。
少しずつ進めていきたい。
