Kanmi Levers Guard

Catch SEO & performance issues while you code.

A VSCode extension that provides instant, real-time feedback on SEO and performance best practices directly in your editor. No build step required, no configuration needed — just install and start coding better.

TL;DR

✅ Detect missing meta tags, bad scripts, and oversized images ⚡ Instantly see SEO & performance warnings in your editor 🧩 Works with HTML, React, Next.js, and TypeScript 📊 Based on Google's Web Rendering Service & Core Web Vitals

Features

SEO Checks ✅

• Meta tags: Missing/duplicate title, description, viewport, charset
• Open Graph tags: Validate social sharing metadata (og:title, og:description, og:image, og:url)
• Canonical URLs: Ensure proper canonical link declarations
• Structured data: JSON-LD hints for Product and Article pages
• Image accessibility: Missing alt attributes
• Head element ordering: Optimal placement of charset, title, and critical resources

Performance Checks ⚡

• Blocking resources: Scripts/styles without async/defer attributes
• Image optimization: Missing width/height (CLS prevention), lazy loading hints
• Next.js Image component: Validate sizes and priority attributes
• Font loading: font-display: swap recommendations, excessive preload warnings
• HTML size: Warnings for large files (>100KB) with Web Almanac benchmarking
• Resource hints: Suggest preconnect for external domains
• Third-party scripts: Budget enforcement (configurable limit)

Google WRS Optimization 🎯 (NEW in v0.2.0)

• DOM size monitoring: Warns at 800+ elements, errors at 1,500+ (Google WRS limits)
• DOM depth tracking: Detects excessive nesting >25 levels, errors at 32+ (WRS render limit)
• JavaScript bundle size estimation: Analyzes imports, warns about heavy dependencies
• Google's 15MB limit: Alerts at 10MB, critical warnings at 14MB
• Heavy dependency detection: Identifies moment, lodash, jquery, and 7 more with lighter alternatives

Developer Experience 🎯

• Real-time diagnostics: See issues as you type
• Contextual warnings: Severity levels (Error, Warning, Info)
• Actionable messages: Each diagnostic includes a fix suggestion
• Workspace scanning: Bulk analyze entire project with Kanmi: Scan Workspace command
• Custom policies: Override defaults with kanmi.policy.json

Installation

From VSCode Marketplace

1. Open VSCode
2. Press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux)
3. Search for "Kanmi Levers Guard"
4. Click Install

From Source

cd KanmiLabs/extensions/kanmi-levers-guard
npm install
npm run build
npx vsce package
code --install-extension kanmi-levers-guard-0.0.1.vsix

Usage

Automatic Scanning

The extension automatically scans supported files when you:

• Open a file (.html, .jsx, .tsx, .js, .ts)
• Save a file
• Edit a file (real-time feedback)

Manual Workspace Scan

Run the command palette (Cmd+Shift+P / Ctrl+Shift+P):

> Kanmi: Scan Workspace

This analyzes up to 5,000 files in your workspace.

Custom Policy File

Create kanmi.policy.json at your workspace root to customize thresholds:

{
  "seo": {
    "titleMin": 30,
    "titleMax": 60,
    "metaDescriptionMin": 50,
    "metaDescriptionMax": 160,
    "requireCanonical": true,
    "requireJsonLdFor": ["Product", "Article"]
  },
  "perf": {
    "maxThirdPartyScriptsPerPage": 6,
    "lcpImageKB": 350,
    "requireFontDisplaySwap": true
  }
}

Configuration

Available settings (Preferences → Settings → Kanmi Levers Guard):

Part of the KanmiLabs Ecosystem

Kanmi Levers Guard is the first line of defense in the KanmiLabs performance stack. It catches issues during development, but it's not a replacement for production monitoring or pre-deploy auditing.

Complete Coverage = 3 Tools

┌─────────────────────────────────────────┐
│ 1. Kanmi Levers Guard (VSCode)          │ ← You are here
│    Static code analysis while coding    │
│    ✓ Free & open source                 │
│    ✓ No build step required             │
│    ✗ No real performance metrics        │
├─────────────────────────────────────────┤
│ 2. KanmiSEO Traffic Levers (CLI)        │
│    Deep crawl analysis before launch    │
│    ✓ TTFB measurement (actual timing)   │
│    ✓ Googlebot simulation               │
│    ✓ Multi-page pattern detection       │
│    → Run before deploying to production │
├─────────────────────────────────────────┤
│ 3. KanmiPerf Advanced (Browser)         │
│    Real-time Core Web Vitals tracking   │
│    ✓ LCP, CLS, INP, FCP monitoring      │
│    ✓ Performance scoring & trends       │
│    ✓ AI-powered recommendations         │
│    → Monitor production performance     │
└─────────────────────────────────────────┘

Get the full suite at kanmiobasa.com/labs

• KanmiSEO Traffic Levers — Pre-deploy crawl audits
• KanmiPerf Advanced — Production monitoring
• KanmiLabs Suite — Enterprise SaaS platform

Examples

Missing Meta Tags

<!DOCTYPE html>
<html>
<head>
  <!-- ❌ Warning: Missing <meta charset> -->
  <!-- ❌ Warning: Missing <title> -->
  <!-- ❌ Warning: Missing meta description -->
</head>

After fixing:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> <!-- ✅ First element -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Awesome Page</title> <!-- ✅ 30-60 chars -->
  <meta name="description" content="A compelling 50-160 character description for search engines.">
  <link rel="canonical" href="https://example.com/page">
</head>

Blocking Scripts

<head>
  <!-- ❌ Warning: Script without async/defer blocks rendering -->
  <script src="https://cdn.example.com/analytics.js"></script>
</head>

After fixing:

<head>
  <!-- ✅ Non-blocking script with preconnect -->
  <link rel="preconnect" href="https://cdn.example.com">
  <script src="https://cdn.example.com/analytics.js" defer></script>
</head>

Image Optimization

// ❌ Warning: Missing width/height causes CLS
<img src="https://github.com/konfirmed/kanmi-levers-guard/raw/HEAD/hero.jpg" alt="Hero image" />

// ✅ Fixed: Explicit dimensions prevent layout shift
<img
  src="/hero.jpg"
  alt="Hero image"
  width="1200"
  height="630"
  loading="lazy"
/>

// Next.js:
// ❌ Warning: Missing sizes attribute
<Image src="/hero.jpg" alt="Hero" width={1200} height={630} />

// ✅ Fixed: Proper Next.js Image usage
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={630}
  sizes="(max-width: 768px) 100vw, 1200px"
  priority // For LCP images
/>

Kanmi Levers Guard vs Lighthouse vs ESLint

Why Static Analysis Matters

Shift-left performance optimization means catching issues before they reach production:

Developer productivity gain: 5-10 minutes saved per file by catching issues early.

Limitations (By Design)

Kanmi Levers Guard is a static analyzer — it reads your code but doesn't run it. This means:

❌ No runtime metrics: Can't measure actual TTFB, LCP, CLS ❌ No network analysis: Can't detect slow APIs or CDN issues ❌ No JavaScript execution: Can't analyze dynamically rendered content ❌ No multi-page crawling: Analyzes files individually

For these capabilities, use:

• KanmiSEO Traffic Levers → Network timing, crawl budget analysis
• KanmiPerf Advanced → Real Core Web Vitals from actual users

Contributing

Found a bug or have a feature request? Open an issue on GitHub.

Research & Standards

This extension is built on industry research and official recommendations:

• Web Almanac 2024: HTML size benchmarks, Open Graph adoption stats
• Google Web Rendering Service (WRS): Head element ordering, crawl budget optimization
• Core Web Vitals: CLS prevention (image dimensions), LCP optimization (blocking resources)
• Web.dev Performance Guides: Async/defer patterns, resource hints, font optimization

Key sources:

• Google WRS Best Practices (Dec 2024)
• Web Almanac 2024 - Performance Chapter
• Core Web Vitals

License

MIT — Free for commercial and personal use.

About KanmiLabs

KanmiLabs builds performance tooling for developers who care about speed, SEO, and user experience. Our mission: Make every website faster.

Contact: i@kanmiobasa.com