Core Web Vitals Checker
Analyze your Core Web Vitals directly in your AI coding assistant. Test LCP (Largest Contentful Paint, target < 2.5s), INP (Interaction to Next Paint, target < 200ms), and CLS (Cumulative Layout Shift, target < 0.1). Get specific fix recommendations for each metric including lazy loading, image optimization, font loading, and layout shift prevention.
Install and use:
curl -fsSL https://suparank.io/install | bash /suparank-cwv What It Checks
LCP Analysis
Identify render-blocking resources, large images, and slow server response
INP Detection
Find long tasks, heavy JavaScript, and slow event handlers
CLS Prevention
Detect missing dimensions, dynamic content, and layout shifts
2025 Thresholds
Uses the latest Google thresholds: LCP < 2.5s, INP < 200ms, CLS < 0.1
Code-Level Fixes
Get specific fixes with line numbers and code examples
Resource Analysis
Identify large assets, unoptimized images, and blocking scripts
Framework Detection
Tailored recommendations for React, Next.js, Astro, Vue, etc.
Priority Scoring
Issues ranked by impact on real user experience
Example Output
═══════════════════════════════════════════════════════════════════
SUPARANK CORE WEB VITALS CHECK
═══════════════════════════════════════════════════════════════════
File: src/pages/index.astro
Date: 2026-01-16
Framework: Astro
───────────────────────────────────────────────────────────────────
LCP (Largest Contentful Paint)
Target: < 2.5s | Risk: MEDIUM
───────────────────────────────────────────────────────────────────
[WARNING] Hero image not preloaded
Location: Line 45 - <img src="/hero.jpg" ...>
Impact: LCP delayed by ~500ms as image discovered late
Fix: Add <link rel="preload" as="image" href="/hero.jpg"> to <head>
[WARNING] Render-blocking CSS
Location: Line 12 - <link href="/fonts.css">
Impact: Delays first paint until CSS loads
Fix: Inline critical CSS or use font-display: swap
───────────────────────────────────────────────────────────────────
INP (Interaction to Next Paint)
Target: < 200ms | Risk: LOW
───────────────────────────────────────────────────────────────────
✓ No long tasks detected in static analysis
✓ Event handlers appear lightweight
⚠ Consider: React hydration may add interactivity delay
───────────────────────────────────────────────────────────────────
CLS (Cumulative Layout Shift)
Target: < 0.1 | Risk: HIGH
───────────────────────────────────────────────────────────────────
[CRITICAL] Image missing dimensions
Location: Line 45 - <img src="/hero.jpg" alt="...">
Impact: CLS ~0.15 when image loads and pushes content
Fix: Add width="1200" height="630" or use aspect-ratio CSS
[WARNING] Dynamic content injection
Location: Line 78 - {posts.map(...)}
Impact: Content may shift if loaded asynchronously
Fix: Reserve space with min-height or skeleton loaders
───────────────────────────────────────────────────────────────────
SUMMARY
───────────────────────────────────────────────────────────────────
LCP: 2 issues (1 warning, 1 optimization)
INP: 0 issues (✓ passes analysis)
CLS: 2 issues (1 critical, 1 warning)
Priority fixes:
1. Add dimensions to hero image (CLS critical)
2. Preload hero image (LCP medium)
3. Inline critical CSS (LCP low)
═══════════════════════════════════════════════════════════════════ Frequently Asked Questions
What are Core Web Vitals?
Core Web Vitals are Google's official performance metrics that measure user experience: LCP (Largest Contentful Paint) measures loading speed, INP (Interaction to Next Paint) measures interactivity, and CLS (Cumulative Layout Shift) measures visual stability. Good scores are LCP < 2.5s, INP < 200ms, and CLS < 0.1.
How do I improve LCP (Largest Contentful Paint)?
Improve LCP by: 1) Preloading hero images with <link rel="preload">, 2) Optimizing images with WebP/AVIF formats and responsive sizes, 3) Reducing server response time (TTFB), 4) Eliminating render-blocking resources, 5) Using a CDN for faster asset delivery, and 6) Implementing lazy loading for below-the-fold content.
What is INP and why did it replace FID?
INP (Interaction to Next Paint) replaced FID in March 2024 because it measures responsiveness throughout the entire page lifecycle, not just the first interaction. INP tracks all user interactions (clicks, taps, keyboard inputs) and reports the longest delay. Target < 200ms by reducing JavaScript execution time, breaking up long tasks, and optimizing event handlers.
How do I fix CLS (Cumulative Layout Shift)?
Fix CLS by: 1) Always set width and height attributes on images and videos, 2) Reserve space for ads and embeds with min-height, 3) Use font-display: optional to prevent font-loading shifts, 4) Avoid inserting content above existing content (unless in response to user interaction), and 5) Use CSS aspect-ratio for dynamic content. Each layout shift is scored by impact area × distance moved.
Check Your Core Web Vitals
Install Suparank tools and analyze LCP, INP, and CLS in seconds.
curl -fsSL https://suparank.io/install | bash
Then type /suparank-cwv in your AI assistant