Page Speed Grader
Grade your website's Core Web Vitals — LCP, CLS, FCP, TTFB, and more — for both mobile and desktop. Powered by Google PageSpeed Insights. Enter any URL and get results in seconds.
What Are Core Web Vitals?
Core Web Vitals are a set of metrics defined by Google that measure real-world user experience: how fast a page loads, how stable the layout is during loading, and how quickly the page responds to user input. Google has used CWV as a ranking signal since 2021. They are measured from real Chrome user data (field data) as well as simulated lab tests (which this tool uses via PageSpeed Insights API).
For indie makers, CWV scores matter most in competitive niches where your content quality is comparable to established players. A score above 90 on mobile puts you in the "Good" range and ensures page speed is not actively costing you ranking positions. Anything below 50 is likely hurting your conversions before it hurts your rankings.
Core Web Vitals Explained
LCP — Largest Contentful Paint
How fast the largest visible element on the page loads — typically a hero image, product screenshot, or main heading. Slow LCP is the most common reason for poor performance scores on indie landing pages with large above-the-fold images.
CLS — Cumulative Layout Shift
How much page elements shift after initial rendering. Caused by images without dimensions, late-loading ads, or injected banners. A high CLS score means users click the wrong thing because the page moved under their cursor.
FCP — First Contentful Paint
How long until the browser renders the first text or image. Affected by server response time and render-blocking scripts in the HTML head.
TTFB — Time to First Byte
How long the server takes to respond. On Vercel, cold-start serverless functions can spike TTFB. ISR (Incremental Static Regeneration) and edge caching bring this down to under 100ms for cached routes.
TBT — Total Blocking Time
Total time the main thread is blocked by JavaScript, preventing user interaction. Heavy client-side React bundles, unoptimized third-party scripts, and large analytics payloads are common causes.
Quick Wins for Next.js Apps on Vercel
// 1. Always use next/image for automatic WebP, lazy loading, and CLS prevention
import Image from 'next/image'
<Image src="/hero.png" width={1200} height={630} alt="Hero" priority />
// 2. Use next/font to eliminate font swap (fixes CLS and FCP)
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
// 3. Use ISR for data-heavy pages to avoid cold start TTFB spikes
export const revalidate = 3600 // cache for 1 hour, regenerate in background
// 4. Dynamic import heavy components to reduce initial JS bundle (fixes TBT)
import dynamic from 'next/dynamic'
const HeavyChart = dynamic(() => import('./HeavyChart'), { ssr: false })Frequently Asked Questions
Do Core Web Vitals directly affect Google search rankings?
Yes, but as a tiebreaker rather than a primary signal. Google introduced Core Web Vitals as a ranking factor in 2021 as part of the Page Experience update. Google has clarified that page experience signals (including CWV) are used to break ties between pages of similar content quality. A page that scores poorly on CWV is unlikely to outrank a page with significantly better content, but between two equally strong pages, the faster one will rank higher. For indie makers competing with established sites, a strong CWV score can provide a meaningful edge.
Why is my mobile score so much lower than desktop?
Google PageSpeed Insights tests mobile performance by simulating a mid-tier Android device on a slow 4G connection — not a high-end smartphone. Desktop tests simulate a fast broadband connection. The mobile simulation is intentionally harsh because most real-world users in emerging markets and on the go experience significantly slower connections. Your actual mobile users on newer phones may experience much better performance than the simulated test shows. Focus on mobile fixes first since they often improve desktop scores too.
What causes high Cumulative Layout Shift (CLS) on Next.js sites?
The most common causes of high CLS in Next.js apps are: images without explicit width and height attributes that cause the page to reflow when they load; custom fonts that cause text to re-render when they swap in; and dynamic content like ads or cookie banners that push page content down on load. The fix for images is to always use the next/image component or always specify width and height on img tags. For fonts, use next/font to prevent font swap entirely by loading fonts at build time.
What is a good TTFB score on Vercel?
TTFB (Time to First Byte) under 200ms is excellent on Vercel. For serverless functions (Next.js API routes and Server Components on cold start), expect 200-800ms depending on region. For pages served from Vercel's edge cache (pre-rendered static pages or ISR cache hits), TTFB is often under 50ms. To improve TTFB: use Incremental Static Regeneration (revalidate) for data-heavy pages instead of fully dynamic rendering, add cache-control headers to API routes that don't change frequently, and consider edge runtime for geographically distributed users.
Does page speed affect AI crawler behavior?
Indirectly, yes. AI crawlers that index the web for real-time retrieval (Perplexity's crawler, Google's Vertex AI retrieval) operate with crawl budgets and timeouts similar to Googlebot. A page that takes more than 10 seconds to respond may time out entirely, preventing the crawler from reading any content. Very slow pages are less frequently recrawled, which means content updates take longer to appear in AI-generated answers. Keeping TTFB under 800ms ensures pages are reliably crawled by both search engines and AI retrieval systems.
Related tools