Core Web Vitals
Show where Core Web Vitals affected a real decision in the project. Include the implementation, constraint, test or measurement that makes the skill verifiable.
CAREER PROJECT · Intermediate · 1 weekend
Web Performance Optimization Lab
Take a deliberately slow interface and document measurable improvements to loading and interaction.
Core Web VitalsProfilingCode splittingImagesCaching
WHAT THIS PROJECT PROVES
Make the engineering visible.
This brief is designed as portfolio evidence for a Frontend Developer path. The goal is not to claim a hiring outcome; it is to make your implementation, judgment and tradeoffs easier to inspect.
Profiling
Show where Profiling affected a real decision in the project. Include the implementation, constraint, test or measurement that makes the skill verifiable.
Code splitting
Show where Code splitting affected a real decision in the project. Include the implementation, constraint, test or measurement that makes the skill verifiable.
Images
Show where Images affected a real decision in the project. Include the implementation, constraint, test or measurement that makes the skill verifiable.
Caching
Show where Caching affected a real decision in the project. Include the implementation, constraint, test or measurement that makes the skill verifiable.
BUILD PLAN
Finish the core before expanding the scope.
Use this as a project sequence, not a rigid tutorial. Your stack can change; the evidence should still show what you built, why you built it that way and how you know it works.
Define the scope and success criteria
Turn the brief into a small finishable system. Decide what the core Web Performance Optimization Lab must do, what you will deliberately leave out, and how you will show that it works.
Build the core workflow
Take a deliberately slow interface and document measurable improvements to loading and interaction. Keep the first pass focused on the main user or system flow before adding stretch features.
Add engineering proof
Create before/after metrics and profiler captures. Document the decisions, failure states, tests, performance, security or operational tradeoffs that matter for this project.
Ship and package the evidence
Publish the strongest artifacts, including live optimized app, optimization log, budget config. Make it easy for a reviewer to understand the problem, architecture, tradeoffs and what you personally implemented.
PORTFOLIO PROOF CHECKLIST
Leave artifacts a reviewer can inspect.
A strong project page should make it possible to understand the system without guessing what you personally built.
01
Before/after metrics
02
Profiler captures
03
Live optimized app
04
Optimization log
05
Budget config
06
A concise README explaining the problem, architecture and tradeoffs
07
A working demo, API example or reproducible run path
08
Evidence of testing, monitoring, performance, accessibility or reliability where relevant
RESUME / PORTFOLIO FRAMING
Describe what you actually did.
Improved frontend loading and interaction performance using profiling, code splitting and measurable performance budgets.
Use this as a starting structure, then replace it with your real implementation details, metrics and constraints. Do not claim outcomes you did not measure.
INTERVIEW TALKING POINTS
Be ready to defend the decisions.
These prompts turn the project from a repository link into a technical conversation about judgment, tradeoffs and evidence.
Why did you choose your approach to Core Web Vitals, and what alternative did you reject?
Answer with details from your implementation. Prefer concrete constraints, measurements and alternatives over generic best practices.
Where could Web Performance Optimization Lab fail under real usage, and how would you detect or recover from that failure?
Answer with details from your implementation. Prefer concrete constraints, measurements and alternatives over generic best practices.
How did Profiling affect the rest of the design?
Answer with details from your implementation. Prefer concrete constraints, measurements and alternatives over generic best practices.
What did you measure or test to prove Caching instead of only claiming it?
Answer with details from your implementation. Prefer concrete constraints, measurements and alternatives over generic best practices.
If you had one more week, what would you improve first and why?
Answer with details from your implementation. Prefer concrete constraints, measurements and alternatives over generic best practices.
STRETCH GOALS
Go deeper only after the core is solid.
RUM telemetry
Add it only if it strengthens the engineering story instead of delaying a finished, deployable core.
Edge caching
Add it only if it strengthens the engineering story instead of delaying a finished, deployable core.
Bundle CI gate
Add it only if it strengthens the engineering story instead of delaying a finished, deployable core.
RELATED PORTFOLIO PROJECTS
Build another signal in the same path.
Choose another project only when it proves a different part of the role instead of repeating the same evidence.
Intermediate1 weekend
Accessible Product Dashboard
Build a responsive data dashboard with optimistic UI, keyboard navigation, performance budgets and accessible states.
ReactTypeScriptAccessibilityPerformanceTesting
Open project brief →Advanced2 weekends
Realtime Collaboration Board
Create a multiplayer board with presence, optimistic updates, conflict handling and reconnect states.
ReactWebSocketsState managementRealtime UXTesting
Open project brief →Intermediate1–2 weekends
Production Checkout Experience
Build a checkout flow with validation, loading/error states, saved carts and accessibility.
FormsTypeScriptAccessibilityState machinesTesting
Open project brief →