What replaced FID as a Core Web Vital?

INP (Interaction to Next Paint) replaced FID in March 2024. FID only measured the delay before the first event handler ran. INP captures responsiveness across all interactions — clicks, taps, and keyboard input — making it a more complete responsiveness metric.

What is the Critical Rendering Path (CRP)?

CRP is the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on screen. Optimizing CRP means minimizing render-blocking resources, inlining critical CSS, deferring non-critical JS, and preloading key assets — all of which improve LCP.

How do you fix a poor LCP score?

Identify the LCP element (usually a hero image or large text block), preload it, serve it from a CDN in AVIF/WebP, use SSR/SSG for faster HTML, inline critical CSS, defer non-critical JavaScript, and preconnect to required origins.

What is a performance budget?

A performance budget sets hard limits on metrics like total page weight, JS bundle size, image weight, LCP, and INP. Teams enforce budgets in CI with Lighthouse CI or custom scripts so regressions are caught before deploy.

Web Performance

LCP, INP, CLS — and every optimization technique SDE-2 interviews expect.

Module 3 · Web Performance

Core Web Vitals (LCP, INP, CLS), Critical Rendering Path optimization, image/JS/CSS/network tuning, and the tools SDE-2 frontend engineers use to measure and budget performance.

The three Core Web Vitals — LCP, INP, and CLS — plus Critical Rendering Path optimization, image/JS/CSS/network tuning, and performance measurement tools for production-grade frontend engineering.

About this module

Web performance is not one trick — it is a stack of measurable optimizations aligned to Core Web Vitals. LCP measures loading, INP measures responsiveness, and CLS measures visual stability.

This module covers the fix techniques, code patterns, and tooling interviewers expect at SDE-2 level: from preloading LCP images to breaking up long tasks, from Brotli compression to Lighthouse performance budgets.

You will learn how to read a Lighthouse report, set performance budgets, prioritize fixes by Web Vitals impact, and explain the difference between lab data and real-user monitoring in production.

Topics include image lazy-loading and responsive srcset, code splitting and tree shaking, font loading strategies, CDN caching, and breaking long tasks that hurt INP on low-end devices.

Why this matters

Google uses Core Web Vitals as ranking signals. Slow LCP loses users before they read content. High INP makes apps feel broken. Poor CLS erodes trust. SDE-2 engineers are expected to diagnose, fix, and prevent all three — and explain the difference between optimizing for lab scores vs real-user monitoring data.

Key topics covered

LCP Optimization
INP Optimization
CLS Optimization
Critical Rendering Path
Image Optimization
JavaScript Bundle Size
CSS Optimization
CDN and Caching
HTTP/2 and HTTP/3
Performance Tools
Performance Budgets

Where you'll use it

Hitting LCP < 2.5s on a marketing landing page
Fixing INP regressions after adding analytics scripts
Eliminating CLS from lazy-loaded images and web fonts
Setting performance budgets in CI with Lighthouse
Comparing lab Lighthouse scores vs real-user Core Web Vitals

Core Web Vitals

The 3 metrics Google uses to measure real-world user experience (SDE-2 must-know).

Core Web Vitals are field metrics that reflect how real users experience your site. They replaced vague “fast enough” goals with measurable thresholds you can optimize in code, infrastructure, and CI.

Interactive · Core Web Vitals simulator

Adjust inputs to see estimated LCP, INP, and CLS — not lab-accurate, but shows which levers matter most.

Hero image size400KBJS bundle size350KBThird-party scripts2Lazy-load below-fold imagesfont-display: swap + size-adjust

LCP

1780ms

good

INP

423ms

needs

CLS

0.23

needs

LCP

Largest Contentful Paint

Loading — when the biggest visible element appears

INP

Interaction to Next Paint

Responsiveness — delay after every click, tap, or key

CLS

Cumulative Layout Shift

Visual stability — unexpected layout movement

INP replaced FID (March 2024)

FID only measured the delay before the first interaction handler ran. INP captures responsiveness across all interactions — a much better signal for app-like experiences.

LCP — Largest Contentful Paint

Loading performance: time until the largest visible element is painted.

Good

< 2.5s

Needs improvement

2.5s – 4.0s

Poor

> 4.0s

What hurts LCP

✗Slow server response (high TTFB)
✗Render-blocking JavaScript and CSS
✗Slow resource load times (unoptimized hero image)
✗Client-side rendering without SSR/SSG

Fix techniques

✓Use a CDN (Cloudflare, AWS CloudFront)
✓Optimize images (AVIF/WebP, responsive srcset)
✓Server-side rendering or static generation
✓Preconnect to origins (<link rel="preconnect">)
✓Preload LCP image (<link rel="preload" as="image">)
✓Inline critical CSS in <head>
✓Defer non-critical JavaScript

<link rel="preconnect" href="https://cdn.example.com">
<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">

INP — Interaction to Next Paint

Responsiveness: how quickly the page reacts to user input.

Good

< 200ms

Needs improvement

200ms – 500ms

Poor

> 500ms

What hurts INP

✗Long main-thread tasks (> 50ms)
✗Heavy JavaScript execution on interaction
✗Synchronous third-party scripts (analytics, ads)

Fix techniques

✓Reduce JS on main thread (Web Workers, code splitting)
✓Defer non-critical hydration (React.lazy, islands architecture)
✓Move hashing/parsing to Web Workers
✓Break up long tasks (< 50ms each)
✓Avoid synchronous third-party scripts
✓Set JS bundle performance budgets
✓Use requestIdleCallback for non-critical work

CLS — Cumulative Layout Shift

Visual stability: how much content jumps around unexpectedly.

Good

< 0.1

Needs improvement

0.1 – 0.25

Poor

> 0.25

What hurts CLS

✗Images or ads without reserved space
✗Dynamic content inserted above existing content
✗Web fonts causing FOUT (Flash of Unstyled Text)

Fix techniques

✓Reserve space: width/height attributes or aspect-ratio CSS
✓Reserve space for ads and embeds
✓Never insert banners above existing viewport content
✓Animate with transform, not top/left
✓Use font-display: swap and preload critical fonts

<img src="photo.jpg" width="800" height="600" alt="...">
/* or */
.hero { aspect-ratio: 16 / 9; }

Critical Rendering Path (CRP) Optimization

Minimize the steps from HTML/CSS/JS to first paint.

CRP is the sequence the browser follows to render the first frame. Optimizing CRP directly improves LCP and first paint — every render-blocking resource adds delay.

Strategy	How	Impact
Inline critical CSS	Above-fold styles in <style> in <head>	Reduces blocking
Defer non-critical JS	defer or async attribute	Prevents parse blocking
Preload critical assets	<link rel="preload">	Faster discovery
Preconnect to origins	<link rel="preconnect">	Early DNS/TLS
Prefetch future resources	<link rel="prefetch">	Speeds next navigation
Minimize payload size	Minify + Brotli/GZIP	Faster download

Image Optimization

Images are often the LCP element — optimize them first.

Technique	Example	Benefit
Modern formats	<img src="image.avif">	50–70% smaller than JPEG
Responsive images	srcset + sizes attributes	Loads appropriate size
Lazy loading	loading="lazy"	Skips off-screen images
Explicit dimensions	width="800" height="600"	Prevents CLS
CSS aspect-ratio	aspect-ratio: 800/600	CLS without attributes
Image CDN	Cloudinary, Imgix	Auto-format on request

Avoid animated GIFs

Use muted autoplay video instead — typically 5–10× smaller for the same visual effect. Do not lazy-load the LCP image.

JavaScript Optimization

Bundle size, code splitting, and React render optimization.

// ❌ BAD: entire library
import { everything } from 'big-library';

// ✅ GOOD: specific import
import { specificFunc } from 'big-library/specific';

// ✅ BETTER: dynamic import
const mod = await import('big-library/specific');

Technique	Description	When
Code splitting	Split bundle into chunks	Large apps, routes
Lazy loading	React.lazy(), dynamic import()	Non-critical UI
Tree shaking	Remove unused exports	All bundler projects
Minification	Terser, esbuild	All production builds
Compression	Brotli (preferred), GZIP	All network payloads
Web Workers	Offload heavy compute	Parsing, hashing, data

React performance

// ❌ Re-renders every parent update
const Child = ({ value }) => <div>{value}</div>;

// ✅ Memoize stable children
const Child = memo(({ value }) => <div>{value}</div>);

// ✅ Memoize expensive derived data
const filtered = useMemo(() => data.filter(fn), [data]);

CSS Optimization

Smaller stylesheets, faster style computation, skip off-screen work.

Technique	Example	Benefit
Remove unused CSS	PurgeCSS	Smaller bundle
Minify CSS	CSSNano	Smaller file
Inline critical CSS	<style> in <head>	Faster first paint
Simple selectors	.card-title vs .a .b .c span	Faster style calc
content-visibility	content-visibility: auto	Skip off-screen layout
contain	contain: layout style paint	Isolate reflow scope

✗Deep selector chains (> 3 levels)
✗Universal * selector in hot paths
✗nth-child in large repeated lists

Network Optimization

HTTP/2, CDN strategy, and cache headers.

✓HTTP/2 — multiplexing: many requests over one connection
✓HTTP/2 — header compression: smaller payloads
✓HTTP/3 (QUIC) — faster connection setup, better loss recovery

// ❌ Single origin
<img src="https://origin.com/image.jpg">

// ✅ CDN + long cache
<img src="https://cdn.example.com/image.jpg">
// Cache-Control: public, max-age=31536000

Header	Value	Use case
Cache-Control	public, max-age=31536000	Static assets (JS, CSS, images)
Cache-Control	no-cache	HTML pages (revalidate each visit)
Cache-Control	private, max-age=0	Authenticated content
ETag	Auto-generated	Version-based conditional cache

Performance Tools & Budgets

Measure in lab and field; enforce limits in CI.

Tool	Type	Measures
Lighthouse	Lab	CWV scores, best practices
PageSpeed Insights	Lab + Field	Real-user CWV data
Chrome DevTools	Lab	Timeline, network, memory
web-vitals (npm)	Field	Programmatic CWV reporting
RUM (Sentry, DataDog, GA4)	Field	Production user metrics
WebPageTest	Lab	Deep waterfall analysis

Performance budget example

// Lighthouse CI or custom script
{
  "maxTotalSize": "1MB",
  "maxJSBundle": "200KB",
  "maxImages": "500KB",
  "maxLCP": "2.5s",
  "maxINP": "200ms"
}

Lab vs field

Lab tools (Lighthouse) give reproducible scores. Field data (CrUX, RUM) reflects real devices and networks. Optimize for field metrics — that is what Google ranks on.

Frequently Asked Questions

Core Web Vitals and performance optimization.

Strategy

How

Impact

Inline critical CSS

Above-fold styles in <style> in <head>

Reduces blocking

Defer non-critical JS

defer or async attribute

Prevents parse blocking

Preload critical assets

Faster discovery

Preconnect to origins

Early DNS/TLS

Prefetch future resources

Speeds next navigation

Minimize payload size

Minify + Brotli/GZIP

Faster download

Technique

Example

Benefit

Modern formats

50–70% smaller than JPEG

Responsive images

srcset + sizes attributes

Loads appropriate size

Lazy loading

loading="lazy"

Skips off-screen images

Explicit dimensions

width="800" height="600"

Prevents CLS

CSS aspect-ratio

aspect-ratio: 800/600

CLS without attributes

Image CDN

Cloudinary, Imgix

Auto-format on request

// ❌ BAD: entire library import { everything } from 'big-library'; // ✅ GOOD: specific import import { specificFunc } from 'big-library/specific'; // ✅ BETTER: dynamic import const mod = await import('big-library/specific');

Technique

Description

When

Code splitting

Split bundle into chunks

Large apps, routes

Lazy loading

React.lazy(), dynamic import()

Non-critical UI

Tree shaking

Remove unused exports

All bundler projects

Minification

Terser, esbuild

All production builds

Compression

Brotli (preferred), GZIP

All network payloads

Web Workers

Offload heavy compute

Parsing, hashing, data

// ❌ Re-renders every parent update const Child = ({ value }) => <div>{value}</div>; // ✅ Memoize stable children const Child = memo(({ value }) => <div>{value}</div>); // ✅ Memoize expensive derived data const filtered = useMemo(() => data.filter(fn), [data]);

Technique

Example

Benefit

Remove unused CSS

PurgeCSS

Smaller bundle

Minify CSS

CSSNano

Smaller file

Inline critical CSS

Faster first paint

Simple selectors

.card-title vs .a .b .c span

Faster style calc

content-visibility

content-visibility: auto

Skip off-screen layout

contain

contain: layout style paint

Isolate reflow scope

Header

Value

Use case

Cache-Control

public, max-age=31536000

Static assets (JS, CSS, images)

Cache-Control

no-cache

HTML pages (revalidate each visit)

Cache-Control

private, max-age=0

Authenticated content

ETag

Auto-generated

Version-based conditional cache

Tool

Type

Measures

Lighthouse

Lab

CWV scores, best practices

PageSpeed Insights

Lab + Field

Real-user CWV data

Chrome DevTools

Lab

Timeline, network, memory

web-vitals (npm)

Field

Programmatic CWV reporting

RUM (Sentry, DataDog, GA4)

Field

Production user metrics

WebPageTest

Lab

Deep waterfall analysis

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

Core Web Vitals

LCP — Largest Contentful Paint

INP — Interaction to Next Paint

CLS — Cumulative Layout Shift

Critical Rendering Path (CRP) Optimization

Image Optimization

JavaScript Optimization

CSS Optimization

Network Optimization

Performance Tools & Budgets

Frequently Asked Questions

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

Core Web Vitals

LCP — Largest Contentful Paint

INP — Interaction to Next Paint

CLS — Cumulative Layout Shift

Critical Rendering Path (CRP) Optimization

Image Optimization

JavaScript Optimization

CSS Optimization

Network Optimization

Performance Tools & Budgets

Frequently Asked Questions