GuideIntermediate
Fullstack Performance And Deployment
Learn to make a frontend app fast and ship it to production: what "fast" means in measurable terms through the Core Web Vitals (LCP, INP, CLS), rendering strategies (CSR, SSR, SSG, ISR) and where each piece of code runs, the critical rendering path and what blocks the first paint, the real cost of JavaScript (bundle size, code-splitting, lazy loading, re-renders), images and assets with modern formats and HTTP caching, how to measure and profile with Lighthouse and the Performance panel, and deployment itself: production builds, hosting, environment variables, CDN/edge, CI/CD, and rollbacks. The core idea is measure before you optimize: performance isn't magic or micro-tricks, it's a budget you measure, diagnose, and defend. Each module runs a model of the metric or mechanism in play in Node.js — Web Vitals scoring, bundle size with code-splitting, time to first render, HTTP caching decisions, image byte savings, a performance budget — to verify the reasoning with numbers, not intuition. The throughline is Mercado's storefront: its baseline gets measured, it gets optimized (code-splitting the cart, AVIF images with `srcset`, asset caching, critical path), it meets a budget, and it gets deployed. It closes out NIEVA's Fullstack ecosystem, building on the UI Systems and Design Implementation Guide.
- 64
- lessons
- 8
- modules
- English · Spanish
- available in
- Yes
- certificate
- Free
- access
Outcomes
What you'll be able to do
- Measure how fast an app is with the Core Web Vitals (LCP, INP, CLS) and their official thresholds, before optimizing anything
- Choose a rendering strategy per route (CSR, SSR, SSG, ISR) based on its impact on LCP and INP
- Understand the browser's critical rendering path and use resource hints (`preload`, `preconnect`, `prefetch`) and font loading with judgment
- Cut JavaScript cost with code-splitting, lazy loading, tree-shaking, and React memoization where it's warranted
- Optimize images and assets with modern formats (AVIF/WebP), `srcset`, and HTTP caching (`Cache-Control`, `ETag`)
- Profile with Lighthouse and the DevTools Performance panel, and measure Web Vitals in the field (RUM)
- Define a performance budget and enforce it in CI before it breaks the build
- Deploy an app to production: build, static or server hosting, environment variables, CDN/edge, CI/CD, and rollbacks
- Measure, optimize, and deploy Mercado's full storefront while meeting a real performance budget
Before you start
What you need to bring
It's for you if...
- Frontend developers who built a working app and need to make it fast with data, not intuition
- Devs already using React, Next.js, or a design system who want to close the loop with performance and deployment
- Those who need to defend performance decisions with metrics (Core Web Vitals) in front of a team or a client
- Teams about to deploy their first app to production who need the judgment for CI/CD, environment variables, and rollbacks
Requirements and materials
- A working React or Next.js app to optimize, or having completed the Next.js App Router Guide and the UI Systems Guide
- JavaScript ES6+ and basic HTTP concepts
- Node.js installed to run each module's models
- Familiarity with the terminal, npm, and basic version control with git
Content
The syllabus, module by module
Open any of them to see its lessons.
- Guide overview: what "fast" means and how it's measured
- Why performance matters (and why you don't guess)
- LCP: loading (Largest Contentful Paint)
- INP: interactivity (Interaction to Next Paint)
- CLS: visual stability (Cumulative Layout Shift)
- Lab vs. field: two ways to measure the same metric
- The performance budget: a contract with numbers
- Project: measure Mercado's baseline and set its budget
- Module overview: where and when your page renders
- CSR: rendering on the client
- SSR: rendering on the server per request
- SSG: generating the HTML at build time
- ISR: regenerating the static content every so often
- Hydration and the cost of JavaScript
- Choosing a strategy per route
- Project: Mercado storefront's rendering strategy per route
- Module overview: what blocks the first paint
- How the browser loads a page
- CSS that blocks the render, and critical CSS
- Synchronous JavaScript that stalls the parser
- `async`, `defer`, and the ways to load a script
- Resource hints: `preload`, `preconnect`, and friends
- Loading fonts without the text disappearing
- Project: unblocking Mercado storefront's critical path
- Module overview: how heavy the JavaScript is
- The cost of JavaScript: why it weighs double
- Code-splitting and lazy loading: splitting the bundle
- Tree-shaking: throwing away code nobody uses
- The cost of dependencies: measuring before installing
- React's re-render from the performance angle
- Virtualizing long lists: rendering only what's visible
- Project: slimming down Mercado storefront's JavaScript
- Module overview: images, assets, and caching
- Modern image formats: the same pixels, fewer bytes
- Responsive images in bytes: serving the right resolution
- Lazy loading images: not loading what isn't visible yet
- HTTP caching: the browser's pantry
- ETags and revalidation: "did anything change?" → "no, use what you have"
- Fingerprinting and the CDN: caching "forever" and still updating
- Project: optimizing Mercado storefront's assets
- Module overview: measuring, diagnosing, and defending the budget
- Lighthouse: the lab checkup, and how to read it
- The Performance panel: the main thread's X-ray
- Finding the bottleneck: from measurement to treatment
- Field data: the web-vitals lib, CrUX, and the p75
- Lab vs. field in practice: when green and red disagree
- The CI budget: the alarm that breaks the build
- Project: measuring, diagnosing, and shielding Mercado storefront
- Module overview: from "measured and optimized" to "shipped to production"
- The production build: from readable code to code ready to serve
- Static vs. server hosting: where the build lives
- Environment variables and secrets: the public, the private, and where it gets decided
- CDN and edge: bringing the build closer to every user
- CI/CD pipelines: from a commit to production, hands-free
- Rollbacks and atomic deploys: either you open with everything ready, or you don't open
- Project: Mercado storefront's deploy pipeline
Common questions
What people usually ask
No limit. It's a free guide: come in whenever you like, as often as you like.
No. Modules run from easier to harder, but you can jump to the one you need. Progress is saved per lesson.
Whatever is needed is listed under “What you need to bring”, above. If nothing is listed there, you can start from zero.
In the Club's WhatsApp group, and every two weeks there's a live with an instructor where questions get worked through.
Yes. It's issued automatically once you finish every lesson, with a verifiable code you can share on LinkedIn.
Start whenever you like
What students say
These reviews are from enrolled students who completed at least 50% of the course. We moderate reviews only on content grounds (spam, offensive language, personal data), never for being critical or negative.
No approved reviews yet.
Be the first to share your experience!