VitalScan — Core Web Vitals Analyzer
AI-powered web performance analyzer that scans any URL for Core Web Vitals and provides actionable recommendations using Claude.
Features
- Full CWV Audit — Scans LCP, INP, CLS, FCP, TBT, Speed Index, and TTFB
- Mobile + Desktop — Side-by-side analysis for both strategies
- AI Recommendations — Claude analyzes results and gives prioritized, actionable fixes
- Visual Dashboard — Color-coded score gauges, metric cards, and opportunity list
- One-click Deploy — Ready for Vercel
Quick Start
1. Clone & Install
git clone https://github.com/YOUR_USERNAME/web-vitals-analyzer.git
cd web-vitals-analyzer
npm install
2. Set Environment Variables
cp .env.example .env
Edit .env with your API keys:
GOOGLE_PSI_API_KEY=your_key_here
ANTHROPIC_API_KEY=your_key_here
Getting your API keys:
3. Run Locally
npm run dev
Open http://localhost:3000.
4. Deploy to Vercel
npx vercel
Or connect your GitHub repo in the Vercel Dashboard. Set the two environment variables in your Vercel project settings.
Architecture
src/
├── app/
│ ├── page.tsx # Main page with URL input
│ ├── layout.tsx # Root layout
│ ├── globals.css # Global styles + Tailwind
│ └── api/
│ ├── analyze/ # POST: Fetches PSI data (mobile + desktop)
│ └── recommend/ # POST: Sends results to Claude for analysis
├── components/
│ ├── Dashboard.tsx # Main results dashboard with tabs
│ ├── ScoreGauge.tsx # Circular SVG score indicator
│ ├── MetricCard.tsx # Individual metric display card
│ └── AnalysisReport.tsx # Renders Claude's markdown analysis
└── lib/
├── psi.ts # Google PageSpeed Insights API client
└── claude.ts # Claude analysis prompt & client
Flow
User enters URL
→ POST /api/analyze
→ Calls PSI API (mobile + desktop in parallel)
→ Returns structured metric data
→ POST /api/recommend
→ Formats PSI data into prompt
→ Sends to Claude for expert analysis
→ Returns markdown recommendations
→ Dashboard renders scores, metrics, opportunities, and AI analysis
Roadmap
License
MIT
