Core Web Vitals measure loading (LCP, good under 2.5 s), responsiveness (INP, under 200 ms) and visual stability (CLS, under 0.1). Most bad scores trace back to a few code decisions: an unoptimised hero image, fonts and scripts that block rendering, a large client bundle, unsized media and slow data fetching on the server.
Last reviewed by the Forge team
Each one: why it hurts, and how to spot it in your own project.
The largest image above the fold is usually what LCP measures. A 3 MB PNG, or one the browser finds late, delays it.
How to spot it: Check the hero image's size and format, and that it's preloaded or marked as priority.
<img src="/hero.png" /> <!-- 2,400 px wide, 3.1 MB --><Image src={hero} alt="…" priority sizes="(max-width: 768px) 100vw, 50vw" />loading="lazy" on the hero image tells the browser to wait, which is exactly wrong for the LCP element.
How to spot it: Search for loading="lazy" on images in hero sections and page headers.
Analytics, chat widgets and tag managers in <head>, and fonts loaded without font-display, hold the first paint back.
How to spot it: Look at your layout's <head>: third-party scripts should load after the page (async, defer or the framework's lazy strategy), and fonts should be self-hosted with font-display: swap.
Marking whole pages as client components, or importing heavy libraries for one function, ships JavaScript every visitor must download and run.
How to spot it: Run your bundler's analyser. Look for 'use client' at the top of pages and layouts, and for large libraries used once.
"use client"; // the whole page, for one dropdown
import moment from "moment";// the page renders on the server; only the dropdown is a client component
import { Dropdown } from "./Dropdown";Images, video and embeds without width and height push content down as they load. That's what CLS measures.
How to spot it: Look for <img>, <video> and <iframe> tags without width and height, or without a fixed aspect ratio.
Heavy work on click or input (filtering big lists, re-rendering everything) blocks the main thread, which INP measures.
How to spot it: Profile a slow interaction in the browser's Performance panel, then find the handler that runs during it.
Fetching related rows one by one (the N+1 problem) turns one page load into hundreds of database round trips.
How to spot it: Look for awaits inside loops over query results, and for list endpoints without pagination.
for (const order of orders) {
order.customer = await db.customer.find(order.customerId);
}const orders = await db.order.findMany({ include: { customer: true }, take: 50 });Pages that could be static are rebuilt on every request, so every visitor waits for the server.
How to spot it: Check your framework's build output for which routes are static and which are rendered per request, and why.
<img src="/hero.png" loading="lazy" />the largest element above the fold waits for lazy loading and shifts the layout