PageSpeed Insights MCP Server

June 7, 2026 ยท View on GitHub

PageSpeed MCP chat demo PageSpeed MCP terminal demo

npm version npm downloads GitHub Package Version CI Documentation Live Demo License: MIT Agent Tool Intel: Grade A

16-tool MCP server for Google PageSpeed Insights & Chrome UX Report APIs. Analyze, compare, and optimize web performance directly through Claude, Cursor, or any MCP-compatible AI client.

๐ŸŽฌ View Interactive Demo โ†’ โ€” See all 16 tools in action with animated examples Fallback URL: https://ruslanlap.github.io/pagespeed-insights-mcp/demo.html

๐Ÿ“– Table of Contents


โšก Quick Start (Copy & Paste)

Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "pagespeed-insights": {
      "command": "npx",
      "args": ["-y", "-p", "pino-pretty", "-p", "pagespeed-insights-mcp", "pagespeed-insights-mcp"],
      "env": {
        "GOOGLE_API_KEY": "your-google-api-key-here"
      }
    }
  }
}

Codex / OpenAI

Add to your configuration (TOML):

[mcp_servers.pagespeed-insights]
command = "npx"
args = [
  "-y",
  "-p",
  "pino-pretty",
  "-p",
  "pagespeed-insights-mcp",
  "pagespeed-insights-mcp"
]
env = { GOOGLE_API_KEY = "your-google-api-key-here" }

Note: The pino-pretty package is required for proper log formatting. The above configurations ensure it is installed automatically via npx.

For Grok Build (config.toml)

Add to ~/.grok/config.toml (global) or <repo>/.grok/config.toml (project-scoped, higher priority):

[mcp_servers.pagespeed-insights]
command = "npx"
args = ["-y", "-p", "pino-pretty", "-p", "pagespeed-insights-mcp", "pagespeed-insights-mcp"]
env = { GOOGLE_API_KEY = "${GOOGLE_API_KEY}" }
enabled = true

# Recommended companion professional MCPs (add once):
# [mcp_servers.github]      โ€” PRs, issues, code search
# [mcp_servers.context7]    โ€” fresh library docs (Upstash)
# [mcp_servers.serena]      โ€” semantic code intelligence (uses your .serena/ if present)

Project-scoped example (put in this repo's .grok/config.toml for local dist/index.js + tighter Serena):

[mcp_servers.pagespeed-insights]
command = "node"
args = ["/home/ubuntuvm/Projects/pagespeed-insights-mcp/dist/index.js"]
env = { GOOGLE_API_KEY = "${GOOGLE_API_KEY}", NODE_ENV = "development" }

Verification inside Grok session:

  • /mcps (or Ctrl+L โ†’ MCP tab) โ†’ ensure pagespeed-insights shows "running"
  • Use tools: pagespeed-insights__analyze_page, pagespeed-insights__get_crux_data etc. (namespaced)

๐Ÿ“š Documentation

We have comprehensive documentation available online.

๐Ÿ‘‰ View Full Documentation Site

You can also view the raw markdown files in the docs/ directory or run mkdocs serve locally.

๐Ÿ“ Release Notes

Current release: v1.2.3.

v1.2.3 โ€” Google Antigravity support

  • Added a Google Antigravity MCP configuration guide for ~/.gemini/config/mcp_config.json.
  • Added an Antigravity-ready example configuration in examples/antigravity-config.json.
  • Tightened release automation so important MCP client integration documentation can trigger a patch release when commits use scoped conventional commit messages such as docs(antigravity): ..., docs(integration): ..., or docs(config): ....

For the complete release history, see CHANGELOG.md.

โœจ Features

Core Features

  • ๐Ÿš€ Performance Analysis of web pages using Google PageSpeed Insights
  • ๐Ÿ“ฑ Multi-platform Support: mobile and desktop devices
  • ๐Ÿ” Detailed Lighthouse Reports with comprehensive metrics
  • ๐Ÿ“Š Simplified Reports with key performance indicators
  • ๐ŸŽฏ Smart Recommendations with priority scoring and actionable fixes
  • ๐Ÿ’พ Intelligent Caching to reduce API calls and improve performance
  • ๐ŸŒ Localization - support for multiple languages
  • โšก Quick Installation - one command setup
  • ๐Ÿณ Docker Support for containerized deployment

Advanced Analysis Tools (New!)

  • ๐Ÿ“ธ Visual Analysis - Screenshots, filmstrip, and full-page captures
  • ๐ŸŽฏ Element-Level Debugging - Find specific DOM elements causing issues
  • ๐ŸŒ Network Waterfall - Detailed request timing and resource loading
  • โšก JavaScript Profiling - Execution breakdown and unused code detection
  • ๐Ÿ–ผ๏ธ Image Optimization - Specific image issues with exact savings
  • ๐Ÿšซ Render-Blocking Analysis - Critical request chains and dependencies
  • ๐Ÿ”Œ Third-Party Impact - Script impact grouped by provider
  • ๐Ÿ“Š Full Audits - Complete Lighthouse audits for all categories

๐Ÿš€ Quick Installation

# Set environment variable
export GOOGLE_API_KEY=your-google-api-key
curl -sSL https://raw.githubusercontent.com/ruslanlap/pagespeed-insights-mcp/master/scripts/install.sh | bash

The installer uses the public npm package (pagespeed-insights-mcp) by default. To install the scoped GitHub Packages build instead, configure GitHub Packages authentication first and run:

curl -sSL https://raw.githubusercontent.com/ruslanlap/pagespeed-insights-mcp/master/scripts/install.sh | \
  PAGESPEED_INSIGHTS_MCP_PACKAGE=@ruslanlap/pagespeed-insights-mcp bash

Option 2: Via npm or GitHub Packages

From npm (Public Registry)

# Global installation from npm
npm install -g pagespeed-insights-mcp

# Or use without installation
npx pagespeed-insights-mcp

From GitHub Packages

# First configure authentication (see GITHUB_PACKAGES.md for details)
# Then install globally
npm install -g @ruslanlap/pagespeed-insights-mcp

Note: This package is available on both npm and GitHub Packages.

  • For npm: Use npm install pagespeed-insights-mcp
  • For GitHub Packages: Use npm install @ruslanlap/pagespeed-insights-mcp (requires GitHub authentication)

For detailed instructions on installing from GitHub Packages, see GITHUB_PACKAGES.md or visit the GitHub Packages page

๐Ÿ”ง Configuration

The MCP server requires a Google API key to access the PageSpeed Insights API.

# Set environment variable
export GOOGLE_API_KEY=your-google-api-key

# Windows
$env:GOOGLE_API_KEY="your-google-api-key"

# Or pass directly when running
GOOGLE_API_KEY=your-google-api-key npx pagespeed-insights-mcp

๐Ÿ“ MCP Configuration Examples

For Claude Desktop (with pino-pretty logging):

"pagespeed-insights": {
  "command": "npx",
  "args": [
    "-y",
    "-p",
    "pino-pretty",
    "-p",
    "pagespeed-insights-mcp",
    "pagespeed-insights-mcp"
  ],
  "env": {
    "GOOGLE_API_KEY": "your-google-api-key-here"
  }
}

For Codex (with pino-pretty logging):

[mcp_servers.pagespeed-insights]
command = "npx"
args = [
  "-y",
  "-p",
  "pino-pretty",
  "-p",
  "pagespeed-insights-mcp",
  "pagespeed-insights-mcp"
]
env = { GOOGLE_API_KEY = "your-google-api-key-here" }

Note: These examples include pino-pretty for better log formatting. For production use without pretty logs, see the Logging section below.

Claude Desktop Configuration

To use this MCP server with Claude Desktop, add the following to your Claude Desktop configuration file:

{
  "mcpServers": {
    "pagespeed-insights": {
      "command": "npx",
      "args": ["-y", "-p", "pino-pretty", "-p", "pagespeed-insights-mcp", "pagespeed-insights-mcp"],
      "env": {
        "GOOGLE_API_KEY": "your-google-api-key-here"
      }
    }
  }
}

Google Antigravity

To use this MCP server with Google Antigravity, add the following configuration to your global settings file (~/.gemini/config/mcp_config.json):

{
  "mcpServers": {
    "pagespeed-insights": {
      "command": "npx",
      "args": ["-y", "-p", "pino-pretty", "-p", "pagespeed-insights-mcp", "pagespeed-insights-mcp"],
      "env": {
        "GOOGLE_API_KEY": "YOUR_GOOGLE_API_KEY"
      }
    }
  }
}

Example configuration files are available in the examples directory.

Option 3: Docker

docker build -t pagespeed-insights-mcp .
docker run -e GOOGLE_API_KEY=your-key pagespeed-insights-mcp

๐Ÿ”‘ Getting Google API Key

To use this MCP server, you need a Google API key with the PageSpeed Insights API enabled.

Tip

โšก Quick Setup Link: You can go directly to the Google Cloud Credentials Setup Page to quickly create a key in your project.

Step-by-Step Guide

  1. Go to the Google Cloud Console (or use the Quick Setup Link).
  2. Create a new project or select an existing one.
  3. Enable PageSpeed Insights API:
    • Navigate to APIs & Services โ†’ Library.
    • Search for "PageSpeed Insights API" and click Enable.
  4. Create an API key:
    • Go to APIs & Services โ†’ Credentials.
    • Click Create Credentials โ†’ API Key.
    • Copy the generated key and set it as GOOGLE_API_KEY in your configuration.

Google Cloud Console API Key Setup

โš™๏ธ Claude Desktop Configuration

Automatic Configuration

If you used the scripts/install.sh script, the configuration was created automatically.

Manual Configuration

Add the configuration to your Claude Desktop file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Linux: ~/.config/claude/claude_desktop_config.json

For npm installation and global installation

{
  "mcpServers": {
    "pagespeed-insights": {
      "command": "npx",
      "args": ["-y", "-p", "pino-pretty", "-p", "pagespeed-insights-mcp", "pagespeed-insights-mcp"],
      "env": {
        "GOOGLE_API_KEY": "your-google-api-key-here"
      }
    }
  }
}

For GitHub Packages installation

{
  "mcpServers": {
    "pagespeed-insights": {
      "command": "npx",
      "args": [
        "-y",
        "-p",
        "pino-pretty",
        "-p",
        "@ruslanlap/pagespeed-insights-mcp",
        "pagespeed-insights-mcp"
      ],
      "env": {
        "GOOGLE_API_KEY": "your-google-api-key-here"
      }
    }
  }
}

For Docker:

{
  "mcpServers": {
    "pagespeed-insights": {
      "command": "docker",
      "args": [
        "run",
        "--rm",
        "-i",
        "--env",
        "GOOGLE_API_KEY=your-google-api-key-here",
        "pagespeed-insights-mcp"
      ]
    }
  }
}

Restart Claude Desktop after configuration!

๐Ÿ’ป Usage

After configuration, simply ask Claude any of these commands:

๐Ÿ” Full page analysis

Analyze the performance of https://example.com

๐Ÿ“ฑ Mobile device analysis

Analyze https://example.com for mobile devices with all categories

โšก Quick performance overview

Get a quick performance report for https://example.com

๐Ÿ–ฅ๏ธ Desktop analysis

Analyze https://example.com performance for desktop devices

๐ŸŒ Multi-category analysis

Perform a full audit of https://example.com including SEO, accessibility, and best practices

๐ŸŽฏ Smart performance recommendations

Get smart recommendations for improving https://example.com performance

๐Ÿ’พ Cache management

Clear the cache to get fresh data for all subsequent requests

๐Ÿ“ธ Visual analysis

Get visual analysis for https://example.com showing screenshots and loading timeline

๐ŸŽฏ Element-level debugging

Show me which specific elements are causing performance issues on https://example.com

๐ŸŒ Network waterfall analysis

Analyze the network requests and resource loading for https://example.com

โšก JavaScript performance

Get JavaScript execution breakdown for https://example.com

๐Ÿ–ผ๏ธ Image optimization opportunities

Show me which images need optimization on https://example.com

๐Ÿšซ Render-blocking resources

Find render-blocking resources on https://example.com

๐Ÿ”Œ Third-party script impact

Analyze third-party script impact on https://example.com performance

๐Ÿ“Š Full Lighthouse audit

Run a full audit including accessibility, SEO, and best practices for https://example.com

Available Tools

16 tools across three categories:

Core Analysis

ToolDescription
analyze_page_speedFull Lighthouse analysis โ€” all metrics and audits
get_performance_summarySimplified key-metrics report
get_recommendationsPrioritized recommendations with actionable fixes
full_reportUnified report combining Lighthouse lab data with CrUX field data
batch_analyzeAnalyze up to 10 URLs in parallel with progress tracking
clear_cacheClear internal cache to force fresh API requests

CrUX & Comparison

ToolDescription
crux_summaryReal-world Core Web Vitals from Chrome UX Report (field data)
compare_pagesSide-by-side performance comparison between two URLs

Advanced Diagnostics

ToolDescription
get_visual_analysisScreenshots, filmstrip, and full-page captures
get_element_analysisLCP/CLS DOM elements causing performance issues
get_network_analysisNetwork waterfall โ€” all requests with timing and size
get_javascript_analysisJS bootup time, main-thread work, unused & duplicated modules
get_image_optimization_detailsImages needing optimization with exact savings
get_render_blocking_detailsRender-blocking resources and critical request chains
get_third_party_impactThird-party script impact grouped by provider
get_full_auditComplete Lighthouse audit for all categories

analyze_page_speed

Complete page analysis with all Lighthouse metrics.

Parameters:

  • url (required): URL of the page to analyze
  • strategy: "mobile" or "desktop" (default: "mobile")
  • category: array of categories ["performance", "accessibility", "best-practices", "seo", "pwa"]
  • locale: locale for results (default: "en")

get_performance_summary

Simplified report with key performance metrics.

get_recommendations

Generate smart performance recommendations with priority scoring and actionable fixes.

Parameters:

  • url (required): URL of the page to analyze
  • strategy: "mobile" or "desktop" (default: "mobile")
  • category: array of categories to analyze (default: ["performance", "accessibility", "best-practices", "seo"])
  • locale: locale for results (default: "en")

clear_cache

Clear the internal cache to force fresh API requests for all subsequent analyses.

get_visual_analysis

Get screenshots and visual timeline showing how the page loads.

Parameters:

  • url (required): URL of the page to analyze
  • strategy: "mobile" or "desktop" (default: "mobile")

Returns:

  • Final screenshot of the loaded page
  • Filmstrip showing page load progression
  • Full-page screenshot with DOM node mapping

get_element_analysis

Get specific DOM elements causing performance issues.

Parameters:

  • url (required): URL of the page to analyze
  • strategy: "mobile" or "desktop" (default: "mobile")

Returns:

  • LCP (Largest Contentful Paint) element details
  • CLS (Cumulative Layout Shift) causing elements
  • Lazy-loaded LCP warnings

get_network_analysis

Get detailed network waterfall showing all requests with timing and size.

Parameters:

  • url (required): URL of the page to analyze
  • strategy: "mobile" or "desktop" (default: "mobile")

Returns:

  • All network requests with timing data
  • Resource breakdown by type
  • Total transfer size and request count
  • Network RTT and server latency

get_javascript_analysis

Get JavaScript execution breakdown showing performance impact.

Parameters:

  • url (required): URL of the page to analyze
  • strategy: "mobile" or "desktop" (default: "mobile")

Returns:

  • JavaScript bootup time by script
  • Main thread work breakdown
  • Unused JavaScript analysis
  • Duplicated JavaScript modules

get_image_optimization_details

Get specific images needing optimization with exact savings potential.

Parameters:

  • url (required): URL of the page to analyze
  • strategy: "mobile" or "desktop" (default: "mobile")

Returns:

  • Improperly sized images
  • Offscreen images (lazy-loading candidates)
  • Unoptimized images
  • Modern format recommendations (WebP/AVIF)

get_render_blocking_details

Get render-blocking resources and critical request chains.

Parameters:

  • url (required): URL of the page to analyze
  • strategy: "mobile" or "desktop" (default: "mobile")

Returns:

  • Render-blocking CSS and JavaScript files
  • Critical request chains showing dependencies
  • Total blocking time

get_third_party_impact

Get third-party script impact analysis grouped by entity.

Parameters:

  • url (required): URL of the page to analyze
  • strategy: "mobile" or "desktop" (default: "mobile")

Returns:

  • Impact by provider (Google, Facebook, etc.)
  • Transfer size and blocking time per provider
  • Recommended facade replacements

get_full_audit

Get comprehensive audit results for all Lighthouse categories.

Parameters:

  • url (required): URL of the page to analyze
  • strategy: "mobile" or "desktop" (default: "mobile")
  • categories: array of categories to audit (default: ["performance", "accessibility", "best-practices", "seo"])

Returns:

  • Scores for all categories
  • Detailed Core Web Vitals and metrics
  • Key failing audits for each category
  • Framework-specific advice (if applicable)

crux_summary

Get real-world Core Web Vitals from the Chrome UX Report (field data from actual Chrome users).

Parameters:

  • url (required): URL to analyze
  • formFactor: "PHONE", "DESKTOP", or "TABLET" (default: "PHONE")

Returns:

  • Real-world LCP, CLS, FID, INP, TTFB distributions
  • Pass/fail thresholds per Core Web Vital
  • Percentile breakdowns (p75)

compare_pages

Compare performance metrics between two URLs side-by-side.

Parameters:

  • urlA (required): First URL to compare
  • urlB (required): Second URL to compare
  • strategy: "mobile" or "desktop" (default: "mobile")

Returns:

  • Side-by-side Lighthouse score comparison
  • Metric-level diff for LCP, CLS, FCP, TBT, SI
  • Winner/loser indication per metric

full_report

Unified report combining Lighthouse lab data with CrUX real-world field data.

Parameters:

  • url (required): URL to analyze
  • strategy: "mobile" or "desktop" (default: "mobile")

Returns:

  • Lighthouse lab scores + CrUX field data in one response
  • Lab vs. field comparison for Core Web Vitals
  • Actionable recommendations

batch_analyze

Analyze performance for multiple URLs with progress tracking.

Parameters:

  • urls (required): Array of URLs to analyze (max 10)
  • strategy: "mobile" or "desktop" (default: "mobile")

Returns:

  • Performance scores for all URLs
  • Sorted ranking by score
  • Per-URL metric breakdown

Example

answer example from Claude Desktop with pagespeed-insights-mcp ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

Complete Ratings for example.com

Now I have the full analysis! Here are all the ratings:

๐Ÿ“Š Main Lighthouse Scores

CategoryScoreStatus
Performance67/100๐ŸŸก Needs Improvement
Accessibility92/100๐ŸŸข Good
Best Practices96/100๐ŸŸข Excellent
SEO100/100๐ŸŸข Perfect

โšก Detailed Performance Metrics

MetricValueScore
First Contentful Paint1.2s๐ŸŸข Excellent (98/100)
Largest Contentful Paint2.4s๐ŸŸก Needs Improvement (75/100)
Speed Index4.8s๐ŸŸก Needs Improvement (67/100)
Total Blocking Time60ms๐ŸŸข Good (94/100)
Cumulative Layout Shift0๐ŸŸข Perfect (100/100)

โ™ฟ Detailed Accessibility Scores (92/100)

AuditScoreDescription
Label Content Name Mismatch๐Ÿ”ด 0/12 errors with aria-label
Unsized Images๐ŸŸก 0.5/11 image without dimensions
Color Contrast๐ŸŸข 1/1Sufficient contrast
Button Names๐ŸŸข 1/1Accessible button names
Link Names๐ŸŸข 1/1Accessible link names
ARIA Roles๐ŸŸข 1/1Correct ARIA roles
HTML Lang๐ŸŸข 1/1Valid lang attribute
Meta Viewport๐ŸŸข 1/1Proper viewport
Image Alt Text๐ŸŸข 1/1Correct alt attributes
List Items๐ŸŸข 1/1Proper list structure

๐Ÿ† Detailed Best Practices Scores (96/100)

AuditScoreStatus
Uses HTTPS๐ŸŸข โœ“HTTPS is used
HTTP Status Code๐ŸŸข 1/1Correct 200 status
No Console Errors๐ŸŸข 1/1No console errors
Valid Source Maps๐ŸŸข 1/1Valid source maps
No Notification Requests๐ŸŸข 1/1No notification requests
Charset Declaration๐ŸŸข 1/1Correct encoding
No Inspector Issues๐ŸŸข 1/1No DevTools issues

๐Ÿ” Detailed SEO Scores (100/100)

AuditScoreStatus
Meta Viewport๐ŸŸข 1/1Mobile optimized
Document Title๐ŸŸข 1/1Title present
Meta Description๐ŸŸข 1/1Description present
HTTP Status Code๐ŸŸข 1/1Successful status
Link Text๐ŸŸข 1/1Descriptive link texts
Crawlability๐ŸŸข 1/1Available for indexing
HTML Lang๐ŸŸข 1/1Valid document language
Hreflang๐ŸŸข 1/1Correct hreflang attributes

๐Ÿ”ง Main Performance Issues

IssueAffectsPotential Savings
Improperly sized imagesLCP, FCP1,069 KB, 170ms
Inefficient cachingOverall speed1,445 KB
Forced ReflowsSmoothness46.8ms
JavaScript execution timeTBT338ms

๐Ÿ“ˆ Network Metrics

MetricValue
Server Response Time120ms (๐ŸŸข Good)
Network RTTMinimal
Main Thread Work0.9s
DOM Size453 elements (optimal)

๐Ÿ’ก Priority Recommendations

  1. ๐Ÿ”ด High Priority:
    • Optimize image sizes (save 1+ MB)
    • Fix aria-label mismatches for accessibility
  2. ๐ŸŸก Medium Priority:
    • Improve caching policy (TTL >600s)
    • Add width/height attributes for images
  3. ๐ŸŸข Low Priority:
    • Optimize forced reflows in JavaScript

๐ŸŽฏ Summary

Overall Rating: Good with potential for improvement

  • SEO: Perfect (100/100) ๐Ÿ†
  • Best Practices: Excellent (96/100) ๐Ÿ†
  • Accessibility: Good (92/100) โœ…
  • Performance: Needs attention (67/100) โš ๏ธ

The site has excellent SEO optimization and follows best practices, but needs image optimization to improve performance.

Parameters:

  • url (required): URL of the page to analyze
  • strategy: "mobile" or "desktop" (default: "mobile")

Development

For better log formatting during development, it is recommended to install pino-pretty globally:

npm install -g pino-pretty
# Development mode
npm run dev

# Build project
npm run build

# Run built server
npm start

Logging / pino-pretty in MCP environments

This MCP server uses pino for logging and enables the pino-pretty transport when NODE_ENV=development.

  • If you just want it to work with minimal setup (Claude, Codex, etc.), set:
NODE_ENV=production GOOGLE_API_KEY=your-google-api-key npx pagespeed-insights-mcp

or in your MCP config:

"pagespeed-insights": {
  "command": "npx",
  "args": ["pagespeed-insights-mcp"],
  "env": {
    "GOOGLE_API_KEY": "your-google-api-key-here",
    "NODE_ENV": "production"
  }
}
  • If you want pretty logs in development via npx, you can have npx install pino-pretty alongside the server:
"pagespeed-insights": {
  "command": "npx",
  "args": [
    "-y",
    "-p",
    "pino-pretty",
    "-p",
    "pagespeed-insights-mcp",
    "pagespeed-insights-mcp"
  ],
  "env": {
    "GOOGLE_API_KEY": "your-google-api-key-here"
  }
}

Troubleshooting

"Google API key not provided"

Ensure the GOOGLE_API_KEY environment variable is set in your Claude Desktop configuration.

"PageSpeed Insights API error: 403"

Check if PageSpeed Insights API is enabled in your Google Cloud project.

"Invalid URL"

Ensure the URL includes the protocol โ€” only http:// and https:// are accepted. Other schemes (file://, ftp://, javascript:, etc.) are rejected at the schema level.

Requirements

  • Node.js 20 or later (Node 18 is EOL since April 2025 and is no longer supported).
  • A Google API key with PageSpeed Insights and (optionally) Chrome UX Report APIs enabled.

Security

Please report security issues privately โ€” do not open a public issue. See SECURITY.md for the disclosure policy and operator hardening notes.

Acknowledgments

Special thanks to @engmsaleh (Mohamed Saleh Zaied) for his significant contribution to the development of this project.

A very special thank you to @system-conf for their outstanding and invaluable contribution to the growth and development of this project. Your dedication, expertise, and continuous support have made a tremendous impact โ€” this project wouldn't be where it is today without you. ๐Ÿ™

License

MIT

Support

For bug reports or feature requests, please create an issue in the repository.