18-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 18 tools in action with animated examples Fallback URL: https://ruslanlap.github.io/pagespeed-insights-mcp/demo.html
- β‘ Quick Start (Copy & Paste)
- π Documentation
- π Release Notes
- π― Why You Need This
- β¨ Features
- π Quick Installation
- π Getting Google API Key
- βοΈ Claude Desktop Configuration
- π» Usage
- π Full Page Analysis
- π± Mobile Device Analysis
- β‘ Quick Performance Overview
- π₯οΈ Desktop Analysis
- π Multi-Category Analysis
- π― Smart Performance Recommendations
- πΎ Cache Management
- πΈ Visual Analysis
- π― Element-Level Debugging
- π Network Waterfall Analysis
- β‘ JavaScript Performance
- πΌοΈ Image Optimization Opportunities
- π« Render-Blocking Resources
- π Third-Party Script Impact
- π Full Lighthouse Audit
- π οΈ Available Tools
- π Complete Ratings for example.com
- π» Development
- π§ Troubleshooting
- π Requirements
- π Security
- π Acknowledgments
- π License
- π¬ Support
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"
}
}
}
}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-prettypackage is required for proper log formatting. The above configurations ensure it is installed automatically vianpx.
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_dataetc. (namespaced)
We have comprehensive documentation available online.
π View Full Documentation Site
You can also view the raw markdown files in the
docs/directory or runmkdocs servelocally.
Current release: v1.5.1.
The badges at the top of this README update automatically on every release (npm version, GitHub package version, downloads). No manual edits needed.
For the complete release history, see CHANGELOG.md.
Pain point 1 β "My page is slow but I don't know why." You open PageSpeed Insights, get a wall of data, and still can't tell what to fix first. This MCP gives your AI assistant 18 specialized tools that cut through the noise: it identifies the exact render-blocking resources, the specific images wasting 2 MB, the third-party scripts eating 1.5 s of main-thread time β and ranks them by impact. Ask "why is my site slow?" and get a prioritized fix list, not a 40-metric dashboard.
Pain point 2 β "I ship performance regressions to production." Your team moves fast, deploys daily, and nobody runs a full Lighthouse audit before each merge. By the time someone notices the Core Web Vitals dropped, the regression is already live. This MCP lets any developer paste a URL into Claude/Cursor and get a complete audit β lab data, field data from real Chrome users (CrUX), element-level CLS/LCP debugging β in seconds. It's the difference between catching a regression at your desk and discovering it in a Slack message from the SEO team three days later.
- π 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
- πΈ 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
# Set environment variable
export GOOGLE_API_KEY=your-google-api-keycurl -sSL https://raw.githubusercontent.com/ruslanlap/pagespeed-insights-mcp/master/scripts/install.sh | bashThe 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# Global installation from npm
npm install -g pagespeed-insights-mcp
# Or use without installation
npx pagespeed-insights-mcp# First configure authentication (see GITHUB_PACKAGES.md for details)
# Then install globally
npm install -g @ruslanlap/pagespeed-insights-mcpNote: 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
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"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"
}
}[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-prettyfor better log formatting. For production use without pretty logs, see the Logging section below.
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"
}
}
}
}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.
docker build -t pagespeed-insights-mcp .
docker run -e GOOGLE_API_KEY=your-key pagespeed-insights-mcpTo 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.
- Go to the Google Cloud Console (or use the Quick Setup Link).
- Create a new project or select an existing one.
- Enable PageSpeed Insights API:
- Navigate to APIs & Services β Library.
- Search for "PageSpeed Insights API" and click Enable.
- Create an API key:
- Go to APIs & Services β Credentials.
- Click Create Credentials β API Key.
- Copy the generated key and set it as
GOOGLE_API_KEYin your configuration.
If you used the scripts/install.sh script, the configuration was created automatically.
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
{
"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"
}
}
}
}{
"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"
}
}
}
}{
"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!
After configuration, simply ask Claude any of these commands:
Analyze the performance of https://example.com
Analyze https://example.com for mobile devices with all categories
Get a quick performance report for https://example.com
Analyze https://example.com performance for desktop devices
Perform a full audit of https://example.com including SEO, accessibility, and best practices
Get smart recommendations for improving https://example.com performance
Clear the cache to get fresh data for all subsequent requests
Get visual analysis for https://example.com showing screenshots and loading timeline
Show me which specific elements are causing performance issues on https://example.com
Analyze the network requests and resource loading for https://example.com
Get JavaScript execution breakdown for https://example.com
Show me which images need optimization on https://example.com
Find render-blocking resources on https://example.com
Analyze third-party script impact on https://example.com performance
Run a full audit including accessibility, SEO, and best practices for https://example.com
18 tools across three categories:
| Tool | Description |
|---|---|
analyze_page_speed |
Full Lighthouse analysis β all metrics and audits |
get_performance_summary |
Simplified key-metrics report |
get_recommendations |
Prioritized recommendations with actionable fixes |
full_report |
Unified report combining Lighthouse lab data with CrUX field data |
batch_analyze |
Analyze up to 10 URLs in parallel with progress tracking |
clear_cache |
Clear internal cache to force fresh API requests |
| Tool | Description |
|---|---|
crux_summary |
Real-world Core Web Vitals from Chrome UX Report (field data) |
get_origin_crux |
Domain-level (origin) Chrome UX Report field data across all pages |
compare_pages |
Side-by-side performance comparison between two URLs |
| Tool | Description |
|---|---|
get_visual_analysis |
Screenshots, filmstrip, and full-page captures |
get_element_analysis |
LCP/CLS DOM elements causing performance issues |
get_network_analysis |
Network waterfall β all requests with timing and size |
get_javascript_analysis |
JS bootup time, main-thread work, unused & duplicated modules |
get_image_optimization_details |
Images needing optimization with exact savings |
get_render_blocking_details |
Render-blocking resources and critical request chains |
get_third_party_impact |
Third-party script impact grouped by provider |
get_full_audit |
Complete Lighthouse audit for all categories |
get_performance_map |
Mermaid flowchart visualizing performance score, Core Web Vitals status, and top opportunities |
Complete page analysis with all Lighthouse metrics.
Parameters:
url(required): URL of the page to analyzestrategy: "mobile" or "desktop" (default: "mobile")category: array of categories ["performance", "accessibility", "best-practices", "seo", "pwa"]locale: locale for results (default: "en")runs: 1β5 distinct analyses (default: 1). Withruns > 1the report shows the median with min-max spread for every score and metric, drops cached replays (identicalfetchTime), and says how many it dropped. A single Lighthouse run is noise β TBT routinely swings 3Γ on an unchanged page, so treat differences inside the spread as no change. Note: Google re-analyses a URL about once a minute, so each extra run waits ~65 s to be genuinely distinct.strategy: also accepts"both"β runs mobile then desktop in one call and reports both.
Simplified report with key performance metrics.
Generate smart performance recommendations with priority scoring and actionable fixes.
Parameters:
url(required): URL of the page to analyzestrategy: "mobile" or "desktop" (default: "mobile")category: array of categories to analyze (default: ["performance", "accessibility", "best-practices", "seo"])locale: locale for results (default: "en")
Answer "did that change actually help" β with statistical honesty.
- First call on a URL+strategy records the baseline (median + spread of
runsdistinct analyses, saved to~/.pagespeed-mcp/baselines.json) and compares nothing. - Make your change, call again: a verdict is only given where the two min-max ranges do not overlap. On an unchanged page the performance score has been measured running 27β37 β comparing medians alone reports improvements that are just the instrument moving.
- Reports both the median difference and the smaller guaranteed figure the disjoint ranges actually give you. Quote the guaranteed one.
- Flags a Lighthouse version change between baseline and now, which moves scores without the page moving.
Parameters:
url(required): URL to measurestrategy: "mobile" or "desktop" (default: "mobile") β part of the baseline identityruns: 2β5 distinct analyses per side (default: 3, ~2 min)save_baseline: replace the baseline with this measurement (move the starting point; default: false)
Clear the internal cache to force fresh API requests for all subsequent analyses.
Get screenshots and visual timeline showing how the page loads.
Parameters:
url(required): URL of the page to analyzestrategy: "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 specific DOM elements causing performance issues.
Parameters:
url(required): URL of the page to analyzestrategy: "mobile" or "desktop" (default: "mobile")
Returns:
- LCP (Largest Contentful Paint) element details
- CLS (Cumulative Layout Shift) causing elements
- Lazy-loaded LCP warnings
Get detailed network waterfall showing all requests with timing and size.
Parameters:
url(required): URL of the page to analyzestrategy: "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 execution breakdown showing performance impact.
Parameters:
url(required): URL of the page to analyzestrategy: "mobile" or "desktop" (default: "mobile")
Returns:
- JavaScript bootup time by script
- Main thread work breakdown
- Unused JavaScript analysis
- Duplicated JavaScript modules
Get specific images needing optimization with exact savings potential.
Parameters:
url(required): URL of the page to analyzestrategy: "mobile" or "desktop" (default: "mobile")
Returns:
- Improperly sized images
- Offscreen images (lazy-loading candidates)
- Unoptimized images
- Modern format recommendations (WebP/AVIF)
Get render-blocking resources and critical request chains.
Parameters:
url(required): URL of the page to analyzestrategy: "mobile" or "desktop" (default: "mobile")
Returns:
- Render-blocking CSS and JavaScript files
- Critical request chains showing dependencies
- Total blocking time
Get third-party script impact analysis grouped by entity.
Parameters:
url(required): URL of the page to analyzestrategy: "mobile" or "desktop" (default: "mobile")
Returns:
- Impact by provider (Google, Facebook, etc.)
- Transfer size and blocking time per provider
- Recommended facade replacements
Get comprehensive audit results for all Lighthouse categories.
Parameters:
url(required): URL of the page to analyzestrategy: "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)
Get real-world Core Web Vitals from the Chrome UX Report (field data from actual Chrome users).
Parameters:
url(required): URL to analyzeformFactor: "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 performance metrics between two URLs side-by-side.
Parameters:
urlA(required): First URL to compareurlB(required): Second URL to comparestrategy: "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
Unified report combining Lighthouse lab data with CrUX real-world field data.
Parameters:
url(required): URL to analyzestrategy: "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
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
answer example from Claude Desktop with pagespeed-insights-mcp π₯π₯π₯
Now I have the full analysis! Here are all the ratings:
| Category | Score | Status |
|---|---|---|
| Performance | 67/100 | π‘ Needs Improvement |
| Accessibility | 92/100 | π’ Good |
| Best Practices | 96/100 | π’ Excellent |
| SEO | 100/100 | π’ Perfect |
| Metric | Value | Score |
|---|---|---|
| First Contentful Paint | 1.2s | π’ Excellent (98/100) |
| Largest Contentful Paint | 2.4s | π‘ Needs Improvement (75/100) |
| Speed Index | 4.8s | π‘ Needs Improvement (67/100) |
| Total Blocking Time | 60ms | π’ Good (94/100) |
| Cumulative Layout Shift | 0 | π’ Perfect (100/100) |
| Audit | Score | Description |
|---|---|---|
| Label Content Name Mismatch | π΄ 0/1 | 2 errors with aria-label |
| Unsized Images | π‘ 0.5/1 | 1 image without dimensions |
| Color Contrast | π’ 1/1 | Sufficient contrast |
| Button Names | π’ 1/1 | Accessible button names |
| Link Names | π’ 1/1 | Accessible link names |
| ARIA Roles | π’ 1/1 | Correct ARIA roles |
| HTML Lang | π’ 1/1 | Valid lang attribute |
| Meta Viewport | π’ 1/1 | Proper viewport |
| Image Alt Text | π’ 1/1 | Correct alt attributes |
| List Items | π’ 1/1 | Proper list structure |
| Audit | Score | Status |
|---|---|---|
| Uses HTTPS | π’ β | HTTPS is used |
| HTTP Status Code | π’ 1/1 | Correct 200 status |
| No Console Errors | π’ 1/1 | No console errors |
| Valid Source Maps | π’ 1/1 | Valid source maps |
| No Notification Requests | π’ 1/1 | No notification requests |
| Charset Declaration | π’ 1/1 | Correct encoding |
| No Inspector Issues | π’ 1/1 | No DevTools issues |
| Audit | Score | Status |
|---|---|---|
| Meta Viewport | π’ 1/1 | Mobile optimized |
| Document Title | π’ 1/1 | Title present |
| Meta Description | π’ 1/1 | Description present |
| HTTP Status Code | π’ 1/1 | Successful status |
| Link Text | π’ 1/1 | Descriptive link texts |
| Crawlability | π’ 1/1 | Available for indexing |
| HTML Lang | π’ 1/1 | Valid document language |
| Hreflang | π’ 1/1 | Correct hreflang attributes |
| Issue | Affects | Potential Savings |
|---|---|---|
| Improperly sized images | LCP, FCP | 1,069 KB, 170ms |
| Inefficient caching | Overall speed | 1,445 KB |
| Forced Reflows | Smoothness | 46.8ms |
| JavaScript execution time | TBT | 338ms |
| Metric | Value |
|---|---|
| Server Response Time | 120ms (π’ Good) |
| Network RTT | Minimal |
| Main Thread Work | 0.9s |
| DOM Size | 453 elements (optimal) |
- π΄ High Priority:
- Optimize image sizes (save 1+ MB)
- Fix aria-label mismatches for accessibility
- π‘ Medium Priority:
- Improve caching policy (TTL >600s)
- Add width/height attributes for images
- π’ Low Priority:
- Optimize forced reflows in JavaScript
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 analyzestrategy: "mobile" or "desktop" (default: "mobile")
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 startThis 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-mcpor in your MCP config:
- If you want pretty logs in development via
npx, you can havenpxinstallpino-prettyalongside 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"
}
}Ensure the GOOGLE_API_KEY environment variable is set in your Claude Desktop configuration.
Check if PageSpeed Insights API is enabled in your Google Cloud project.
Ensure the URL includes the protocol β only http:// and https:// are accepted. Other schemes (file://, ftp://, javascript:, etc.) are rejected at the schema level.
- 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.
Please report security issues privately β do not open a public issue. See SECURITY.md for the disclosure policy and operator hardening notes.
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. π
MIT
For bug reports or feature requests, please create an issue in the repository.


