The only VS Code extension that brings Lighthouse-style SEO & Core Web Vitals analysis directly into your editor. Catch slow pages, bloated bundles, and broken redirects before they reach production.
⚡ Why VitalLens?
Most developers only check SEO and page performance after deployment — using Lighthouse, PageSpeed Insights, or Google Search Console. By then, fixing the issues is costly and disruptive.
VitalLens moves that audit into your code editor. Every time you type or save, it silently scans your Next.js project for the same issues Lighthouse would flag — and shows them inline, like a compiler error.
"See your performance score before your users do."
📸 Screenshots
The VitalLens Activity Bar gives you an instant 0–100 performance score, broken down into four categories: Images, Bundle Weight, Redirects, and SEO. It updates automatically every time you save a file — no manual runs needed.
📦 Bundle Weight CodeLens — Inline in package.json
See the exact bundle cost and TTI (Time to Interactive) impact of every dependency, right above the line in package.json. No more guessing. One click to swap to a lighter alternative.
🔄 Redirect Loop Detector
VitalLens parses your entire next.config.js redirect configuration and draws a red error line the moment a circular loop is detected — before it silently tanks your SEO rankings.
✨ Features
⚡ Real-Time Bundle Weight Sensor
- Automatically scans
package.json for 30+ known performance-heavy npm packages
- Displays bundle size (KB) and TTI penalty (ms) as CodeLens annotations above each dependency line
- Covers:
moment, lodash, antd, @mui/material, framer-motion, chart.js, three, highlight.js, draft-js, and many more
- One-click Quick Fix to swap to a lighter alternative (e.g.,
moment → dayjs, lodash → radash)
🖼️ Image Optimization Linter
- Flags raw
<img> tags in .tsx / .jsx / .html files — these bypass Next.js automatic optimization
- Warns when images in your
public/ folder exceed the configurable size threshold (default: 200KB)
- Quick Fix: Automatically adds
import Image from 'next/image' and replaces the tag
- Catches LCP (Largest Contentful Paint) killers before they ship
🔄 Redirect Loop Detector
- Parses your
next.config.js redirects array without executing any code
- Uses graph cycle detection to find:
- 🔴 Circular redirects — A → B → C → A (infinite loop, breaks your site and SEO)
- 🔴 Self-redirects — A → A (instant browser error)
- 🟡 Chained redirects — A → B, B → C (extra HTTP round-trip, slows TTI)
- Shows the full redirect chain in the hover tooltip
- Animated circular gauge with smooth CSS transitions (0–100 score)
- Per-category breakdowns with color-coded progress bars
- Issue list grouped by category — click any item to jump to the exact line
- Auto-refreshes on every file save
- Adapts to your VS Code theme (Dark, Light, High Contrast)
🚀 Getting Started
Step 1 — Install from the VS Code Marketplace
Step 2 — Open any Next.js project (VitalLens auto-detects next.config.js)
Step 3 — Click the ⚡ VitalLens icon in the Activity Bar
Step 4 — Click Analyze or just save any file — results appear instantly
That's it. No configuration needed to get started.
⚙️ Configuration
Access settings via File → Preferences → Settings → Extensions → VitalLens.
| Setting |
Default |
Description |
vitallens.enabled |
true |
Master on/off switch for all analysis |
vitallens.imageSizeWarningKB |
200 |
Image size threshold (KB) for LCP warnings |
vitallens.showCodeLens |
true |
Toggle inline bundle weight CodeLens |
vitallens.analyzeOnSave |
true |
Auto-analyze when you save a file |
📋 All Detection Rules
📦 Bundle Rules — Supported Packages
| Package |
Bundle Size |
TTI Impact |
Best Alternative |
moment |
~232 KB |
+180 ms |
dayjs (2 KB) |
lodash |
~71 KB |
+55 ms |
lodash-es / radash |
@mui/material |
~331 KB |
+260 ms |
@radix-ui/react-* |
antd |
~450 KB |
+350 ms |
shadcn-ui |
highlight.js |
~900 KB |
+700 ms |
prismjs / shiki |
three |
~582 KB |
+450 ms |
Dynamic import |
framer-motion |
~104 KB |
+80 ms |
auto-animate |
chart.js |
~160 KB |
+125 ms |
recharts |
bootstrap |
~152 KB |
+120 ms |
CSS Modules |
draft-js |
~90 KB |
+70 ms |
tiptap |
jquery |
~87 KB |
+68 ms |
Native DOM API |
styled-components |
~35 KB |
+27 ms |
CSS Modules |
rxjs |
~45 KB |
+35 ms |
Native async/await |
| + 17 more |
— |
— |
— |
🖼️ Image Rules
| Rule ID |
What It Catches |
Severity |
NX-IMG-001 |
Raw <img> tag — bypasses Next.js image optimization (LCP risk) |
⚠️ Warning |
NX-IMG-002 |
Image file over size threshold — hurts LCP score |
🔴 Error |
🔄 Redirect Rules
| Rule ID |
What It Catches |
Severity |
NX-REDIRECT-CYCLE |
A→B→C→A circular chain — infinite loop, SEO penalty |
🔴 Error |
NX-REDIRECT-SELF |
Page redirects to itself — instant browser error |
🔴 Error |
NX-REDIRECT-CHAIN |
A→B then B→C — extra HTTP hop, slows TTFB |
⚠️ Warning |
🆚 How VitalLens Compares
|
VitalLens |
ESLint next/core-web-vitals |
Lighthouse |
| Works inside VS Code |
✅ |
✅ |
❌ |
| Bundle weight analysis |
✅ |
❌ |
❌ |
| Inline TTI impact data |
✅ |
❌ |
❌ |
| Quick Fix with alternatives |
✅ |
❌ |
❌ |
| Redirect loop detection |
✅ |
❌ |
⚠️ |
| Live score panel |
✅ |
❌ |
❌ |
| Zero configuration |
✅ |
❌ |
✅ |
| Next.js specific |
✅ |
✅ |
❌ |
❓ Frequently Asked Questions
Q: Does VitalLens execute my code or make network requests?
A: No. VitalLens only performs static analysis (text/regex parsing). It never executes your code, never makes network requests, and never sends your code anywhere.
Q: Will it slow down VS Code?
A: No. Analysis is debounced (runs 400ms after you stop typing) and uses VS Code's native Diagnostics API — the same system used by TypeScript and ESLint. The performance overhead is negligible.
Q: Does it only work with Next.js?
A: Currently yes — v1.0 is optimized for Next.js. Support for .NET Core, Vue/Nuxt, and SvelteKit is on the roadmap.
Q: How does the bundle size data stay accurate?
A: Package sizes are sourced from bundlephobia.com data, baked into the extension as a curated rules database. The database is updated with each release.
Q: Can I configure the image size threshold?
A: Yes — set vitallens.imageSizeWarningKB to any value (default: 200KB).
🗺️ Roadmap
| Version |
Feature |
| v1.1 |
WebP auto-conversion — one-click image optimization from within the editor |
| v1.2 |
.NET Core & Blazor support |
| v1.3 |
HTML <head> SEO analyzer — missing og:image, canonical, meta description |
| v1.4 |
GitHub Actions integration — SEO gate in your CI/CD pipeline |
| v2.0 |
Vue / Nuxt / SvelteKit support |
🐛 Issues & Feedback
Found a bug or have a feature request?
→ Open an issue or star the project on GitHub
Your feedback directly shapes the roadmap. If you find VitalLens useful, please leave a rating — it helps other developers find the extension! ⭐
🛠️ Tech Stack
Built with TypeScript and the VS Code Extension API:
- Diagnostics API — inline squiggly underlines (same system as TypeScript errors)
- CodeLens API — above-line bundle weight annotations
- Code Actions API — Quick Fix lightbulb suggestions
- WebviewView API — sidebar score panel
📄 License
MIT © Irontore — Free to use, forever.
