Core Web Vitals: LCP, INP and CLS

Paste into any coding agent: Claude Code, Cursor, Codex, Copilot, Windsurf or Cline.

# Core Web Vitals: LCP, INP and CLS

Core Web Vitals measure how fast the production site shows its main content (LCP, good under 2.5 seconds), how quickly it responds to clicks and typing (INP, good under 200 milliseconds) and how stable it is while loading (CLS, good under 0.1). They affect search ranking and every launch visitor's first impression. Find the causes on the main pages and fix them in the code.

Site: not given. Find the production URL in the project config, or ask me.

## Ground rules

1. Read before you write. Explore the parts of the codebase this job touches and tell me what is already in place.
2. Plan, then stop. Give me a numbered plan: what you will change, in which files, and why. Wait for my approval before editing anything.
3. Fix things at their source (the shared layout, the config, the generator), not with one-off patches page by page.
4. Keep the project's conventions: its framework APIs, file layout, naming and code style. Add no new dependency without asking.
5. Where something is already done well, say so and leave it alone.

## You will not

- Edit `.env` files, secrets or API keys, or print their values.
- Deploy, push, merge or publish anything.
- Delete data, or run migrations or scripts against a production database.
- Add tracking, third-party scripts or links to any site I did not ask for.
- Change copy, design or behaviour that this job does not need.
- Remove features or third-party tools without asking.
- Change the visual design.

## Your stack

- Framework: Work out the framework, router and build output from the project files (package.json, lockfiles, framework config) before planning, and say which you found.
- Host: Work out where the site is hosted from the config files (vercel.json, netlify.toml, wrangler config, Dockerfile, fly.toml) and say which you found.

## Steps

### 1. Measure first

For the homepage, pricing and one main product page, work out the LCP element, what blocks it, the heaviest scripts, and what shifts during load, from the code and a local production build (the framework's build output, Lighthouse if available). Ask me for field data from Search Console or analytics if I have it.

### 2. LCP

Make the LCP element load first: server-render it, preload its image or font, give the image `fetchpriority="high"` and the right size, cut render-blocking CSS and scripts in the head, and reduce server response time with caching.

### 3. INP

Find long tasks on interaction: heavy event handlers, large client bundles hydrating at once, third-party scripts. Split code, defer non-critical scripts, move heavy work off the main thread or to the server, and give instant visual feedback on clicks.

### 4. CLS

Reserve space for images, videos, embeds, ads and banners (width and height or aspect-ratio), load web fonts with `font-display: swap` and size-matched fallbacks, and never insert content above what the user is reading.

## Done means

- [ ] The LCP element, slow scripts and layout shifts of the main pages are identified.
- [ ] The LCP element is server-rendered, prioritised and sized.
- [ ] Long interaction tasks are split or deferred, and third-party scripts do not block.
- [ ] Images, embeds and fonts no longer shift the layout.

## Report back

When you finish, give me:

- what you changed, file by file;
- anything you skipped, and why;
- anything I must do by hand (DNS records, dashboards, accounts, deploys);
- how to check each change on the live site.