This topic is a video lesson inside the Production & Capstone module. The goal is not to memorize the title: reconstruct the problem it solves, the mechanism that makes it work, and the signal that tells you when to use it.
Remember the shape, not the sentence
“Production = cache strategy + failure strategy + knowing what your users actually experienced.”
What problem does this solve?
Start from the engineering problem rather than the definition. Performance: bundle diet, fonts, images, core web vitals exists because a system needs a reliable way to handle a recurring constraint inside Production & Capstone. Ask what would become slow, ambiguous, unsafe, or impossible without it.
How the mechanism works
Break the idea into observable steps. The useful mental model is: input → transformation → decision or state change → output. Keep each step small enough that you can redraw it from memory. The surrounding module is the context: Production = cache strategy + failure strategy + knowing what your users actually experienced.
When to reach for it
Use nearby concepts as contrasts. In this module, compare Performance: bundle diet, fonts, images, core web vitals with Deployment targets: Node, serverless, edge — trade-offs, Observability: logs, traces, RUM, error tracking, Security checklist: headers, CSRF, rate limits, secrets. The distinction matters because good engineering choices depend on the constraints, not on memorizing isolated definitions.
See the mechanism before you memorize it
One diagram, one causal story, one reconstruction task.
Performance: bundle diet, fonts, images, core web vitals — causal map
Frame
State the problem and the constraints before naming the technique.
Transform
Apply the core mechanism of Performance: bundle diet, fonts, images, core web vitals and track what state changes.
Observe
Inspect the artifact, output, invariant, or behavior produced by the mechanism.
Transfer
Explain where the same idea appears elsewhere in Next.js Full Stack.
Draw the idea yourself
Rebuild the core flow on a real canvas before moving to the worked walkthrough.
Walk the system
Frame
State the problem and the constraints before naming the technique.
Transform
Apply the core mechanism of Performance: bundle diet, fonts, images, core web vitals and track what state changes.
Observe
Inspect the artifact, output, invariant, or behavior produced by the mechanism.
Transfer
Explain where the same idea appears elsewhere in Next.js Full Stack.
Reconstruction card
Use the card as a generative note, not a summary to copy. Fill it from memory after the explanation.
TOPIC: Performance: bundle diet, fonts, images, core web vitals
MODULE: Production & Capstone
TYPE: video lesson
PROMPT
What problem does it solve?
What changes step by step?
What evidence proves it worked?
When would you choose something else?What usually goes wrong
Close the tab. Rebuild it from memory.
Read the question, answer aloud, then reveal.
What problem is Performance: bundle diet, fonts, images, core web vitals designed to solve?Reveal answer
It addresses a recurring constraint inside Production & Capstone. A strong answer names the input, the core mechanism, and the result rather than repeating the title.
What are the four stages of the mental model?Reveal answer
Frame the problem → transform the input/state → observe the evidence → transfer the idea to a new scenario.
First three things you check when a prod page is slow?Reveal answer
1) Is it hitting the cache or re-rendering per request? 2) Is there a fetch waterfall (serialize → parallel/stream)? 3) Is the client bundle bloated (RSC-ify static parts)?
Make this idea travel.
Connect it next to: React mental models: UI = f(state), hooks rules • Server vs Client Components — the real boundary • Interactive: classify 10 components as server or client • Composition patterns: passing server into client.