Web Performance & CDN Delivery
Why a page feels slow, and which layer to fix. Learn Core Web Vitals and the thresholds Google actually measures, LCP broken into the four parts that tell you what to change, Cache-Control and revalidation, CDN cache keys and TTLs, content negotiation and compression, and how to tell a lab number from a real one — remembered with spaced repetition.
- flashcards
- 130
- flashcards
- per day
- ~10 min
- per day
- level
- Intermediate
- level
- modules
- 8
- modules
What is web performance, in practice?
Most performance advice starts with the page and works inward — minify this, defer that. This track works the other way round, because the biggest wins usually sit in the layers a page never sees: how the response is cached, whether it is compressed, and how many round trips it took to arrive. A page can be perfectly written and still be slow because a cache policy was misconfigured three layers away.
The measurement side is treated as a first-class skill rather than a footnote. Core Web Vitals — LCP, INP and CLS — have precise definitions that decide what counts: a new element appearing is not a layout shift, scrolling is not an interaction, and CLS reports the worst burst rather than a running total. Knowing those edges is the difference between chasing a number and fixing a problem.
The track covers Core Web Vitals and their thresholds, LCP split into its four sub-parts, HTTP caching directives and validators, CDN cache keys and TTL settings, content negotiation and compression, responsive images, font loading, and how lab data differs from field data. It leans on the primary sources — web.dev, MDN and vendor documentation — and every card links to the page it came from.
8 modules, seed to bloom
Each module is a set of flashcards — 130 in total. Answer, review, and watch your knowledge grow from seed to full bloom.
Core Web Vitals
The three metrics Google measures, their thresholds and how each is defined
18 cardsLCP & Loading Performance
Breaking LCP into its four sub-parts and finding which one is actually slow
15 cardsHTTP Caching
Cache-Control directives, validators and revalidation as the delivery layer uses them
18 cardsCDN & Cache Keys
How an edge cache decides what is a hit, and how TTL settings meet origin headers
16 cardsCompression & Content Negotiation
How clients and servers agree on an encoding, and why a CDN sometimes never compresses
18 cardsImages & Responsive Delivery
srcset, sizes and picture, and the attributes that stop images shifting the layout
15 cardsFonts & Rendering
Font loading periods, script blocking behaviour and what makes the main thread busy
15 cardsMeasuring & Diagnosing
Lab against field data, what CrUX will and will not report, and how to verify a fix
15 cardsSample questions
A taste of the real flashcards. Pick an answer, then reveal the explanation.
Which three metrics make up the Core Web Vitals?
- ALCP, INP and CLS — loading, interactivity and visual stability
- BFCP, TBT and CLS — first paint, blocking time and visual stability
- CTTFB, LCP and FID — server response, loading and input delay
- DLCP, TBT and INP — loading, blocking time and interactivity
Which four sub-parts does LCP break down into?
- ATTFB, resource load delay, resource load duration and element render delay
- BDNS lookup, connection setup, request time and response download time
- CRedirect time, DNS resolution, TLS negotiation and server think time
- DParse time, style calculation, layout time and compositing time
What does Cache-Control: no-cache actually require of a cache?
- AStore the response, but revalidate with the origin before every reuse
- BNever store the response in any cache, private or shared
- CStore the response but serve it only while the origin is unreachable
- DStore the response and reuse it freely until it is explicitly purged
Why must a server that compresses conditionally send Vary: Accept-Encoding?
- ASo shared caches keep the compressed and uncompressed variants apart
- BSo clients know they may request a different encoding next time
- CSo intermediaries are prevented from recompressing the response
- DSo the browser knows to decompress before parsing the body
Learn it once, keep it for good
Answer a question
Each card is one practical concept with multiple options. Pick what you think is right.
Get the full answer
See the correct option plus a clear explanation, and a link to deeper docs when one is available.
Review at the right time
A spaced-repetition engine (SM-2 or FSRS) resurfaces each card just before you would forget it.
Why this is worth your time
Know which layer to fix
LCP splits into four sub-parts, and each points at a different owner — the server, the markup, the network or the renderer. Guessing is what wastes the afternoon.
Read a response like a diagnosis
A missing Content-Encoding, an Age header, a cache miss — the headers already tell you what went wrong, once you can read them.
Stop trusting the lab score
A green Lighthouse run and failing field data are entirely compatible. Understanding why is what stops you optimising the wrong thing.
Caching without the folklore
no-cache does not mean "do not cache". Half of caching trouble comes from directives that mean something other than they appear to.
Common questions
Do I need to be a frontend developer? +
No. Roughly half the track is delivery infrastructure — caching, CDN behaviour and compression — which is platform and backend territory. The frontend material covers images, fonts and script loading, and it is explained from first principles rather than assuming a framework.
Does this overlap with the HTTP deck? +
Deliberately, in places. The HTTP track teaches headers as protocol; this one teaches the same headers as operational decisions — what a CDN does with them, and what breaks when they are wrong. Seeing a directive twice from two angles is how it sticks.
Is the CDN material tied to one vendor? +
Concepts such as cache keys and hit ratios are vendor-neutral. Where a detail genuinely differs between providers — TTL precedence, compression conditions — the card names CloudFront explicitly rather than pretending every CDN behaves the same way.
How current are the metric thresholds? +
They come from web.dev, where Google publishes the definitions, and reflect INP having replaced FID as a Core Web Vital. Thresholds do change, so confirm against the source before you build a target around one.
Is it free? +
Yes, completely free. No registration or credit card is required, and all your progress is stored locally in your browser.
Ready to find out why it is slow?
Plant your first seed today. Ten minutes a day is all it takes to read a response and know which layer to blame.