Web performance flashcards

Make pages load fast and respond the moment you tap: Core Web Vitals, real-user data and the fixes that move them.

Beginner friendly, starts from zero

CardsCheatsheetTips and tricks

Web performanceStart from zero · 1 of 12

What is web performance, in one plain sentence?

Think of the answer, then tap

Web performance is how fast a web page shows up, how quickly it reacts when you tap, and how still it stays while it loads.

Fast to show, quick to react, steady to read.

Space turn over · K got it · J again · ← back

All topics

Web performance at a glance

Web performance is how fast a page shows up, how quickly it reacts and how still it stays while loading.

Like a good restaurant: food arrives fast, the waiter comes quickly when you wave, and the table does not wobble.

Words you will meet

LCP: How fast the main content of the page shows up
INP: How fast the page reacts after a tap, click or key press
CLS: How much things on the page jump around while it loads
Core Web Vitals: Google's three main speed scores: LCP, INP and CLS
Lighthouse: A speed test built into Chrome DevTools
Cache: A saved copy of a file so it is not downloaded again
CDN: Servers around the world that keep copies close to visitors

The steps

1. Start from zero (12 cards): What speed means on the web, why it matters, and the words and numbers the rest of the topic uses.
2. Core basics (16 cards): Why speed matters, how a page loads, Core Web Vitals and the first wins with images, scripts and caching.
3. Next steps (16 cards): Field data, percentiles, TTFB, priorities and hints, fonts, compression, caching and bundles.
4. Go deeper (17 cards): Debugging INP, yielding, workers, rendering costs, instant navigation, protocols, budgets and architecture.

All 12 cards in Start from zero

What is web performance, in one plain sentence?: Web performance is how fast a web page shows up, how quickly it reacts when you tap, and how still it stays while it loads.
What problem does it solve? What happens when a page is slow?: Slow pages make people give up: they stare at a white screen, tap a button that does nothing, and leave. Shops sell less, and search engines rank slow pages lower.
Where have you already felt web performance?: A shop page that jumps when an ad appears, a Buy button that freezes for a second, a news page stuck on white over weak mobile data. Each is a speed problem you can measure and fix.
What everyday thing is web performance like?: Like eating out. Loading is how fast the food arrives, responsiveness is how fast the waiter comes when you wave, and stability is a table that does not wobble while you eat.
What are a browser, a server and a request?: A browser, like Chrome, is the app that shows pages. A server is a far-away computer holding the site. The browser sends a request for each file and the server sends it back.
What files make a page, and what does each one do?: HTML is the page's content and structure, CSS sets the look, JavaScript makes it do things, and fonts and images are the letters and pictures. Big or many files mean a slower page.
What do KB, MB, round trip, DNS and TLS mean?: KB and MB measure file size: 1 MB is about 1,000 KB. A round trip is one message to the server and back. Before any file, the browser finds the server's address (DNS) and opens a secure line (TCP and TLS).
What are metrics and the Core Web Vitals?: A metric is a number that measures one thing. The Core Web Vitals are Google's three speed scores: LCP for how fast the main content shows, INP for how fast taps react, CLS for how much things jump.
What are DevTools, Lighthouse and real-user data?: DevTools is the browser's built-in inspector. Lighthouse is a speed test inside it that runs on one pretend device. Real-user data is speed measured on visitors' own phones and laptops.
What are a cache and a CDN?: A cache is a saved copy of a file, so the browser does not download it again next time. A CDN is a network of servers around the world that keeps copies close to each visitor.
What do you need, and what is your first tiny win?: Just Chrome on a computer, nothing to install. Right-click any page, choose Inspect to open DevTools, open the Lighthouse tab and click Analyze page load to get a speed score and a fix list.
What will you be able to do after this topic?: Measure a page the way Google and real users do, find what slows it down, shrink images and code, stop layout jumps, and keep the site fast as it grows.

Web performance cheatsheet

Core Web Vitals (p75)

LCP <= 2.5 s Main content shown
INP <= 200 ms Input to next paint
CLS <= 0.1 Unexpected layout movement
TTFB <= 0.8 s First byte, feeds LCP
Long task > 50 ms Blocks input
28 days, p75, per device How Google judges field data

Loading priority

<img fetchpriority="high"> Boost the LCP image
<img loading="lazy"> Below-the-fold only
<link rel="preconnect" href> Warm up another origin
<link rel="preload" as="font" crossorigin> Fetch a late-found file
<script defer> Non-blocking, in order
<script async> Independent third party
<script type="speculationrules"> Prefetch or prerender next pages

Caching and delivery

max-age=31536000, immutable Hashed assets
no-cache + ETag HTML, always revalidate
stale-while-revalidate=60 Serve old, refresh in background
Content-Encoding: br / zstd Text compression
103 Early Hints Preload while server renders
alt-svc: h3 Offer HTTP/3

Main-thread fixes

await scheduler.yield() Let input run between chunks
requestAnimationFrame(fn) Batch visual writes
new Worker(url, { type: "module" }) Heavy work off thread
import("./heavy.js") Load code on demand
{ passive: true } Scroll and touch listeners
content-visibility: auto Skip off-screen rendering

Measuring

npx lighthouse URL --preset=perf --view Lab audit
npm i web-vitals RUM: onLCP, onINP, onCLS
PerformanceObserver "long-animation-frame" Guilty scripts for INP
DevTools > Performance > Live metrics Local LCP, INP, CLS
DevTools > Coverage Unused CSS and JS
npx vite-bundle-visualizer What is in the bundle