Capstone: Performance-Critical Lead Funnel
Product scenario
Design a high-traffic lead funnel used by paid acquisition campaigns. The page has marketing content, qualification form, personalization, analytics, experimentation, trust content, and conversion tracking. The business wants rapid testing, but performance regressions directly affect acquisition cost.
Functional requirements
- Campaign and variant-aware landing pages.
- Multi-step lead form with validation and preserved user intent.
- Experiment assignment and analytics.
- Server-side or edge-side routing for variants.
- Personalized content that does not block the first useful view.
- Safe third-party script loading.
Non-functional requirements
| Concern | Requirement |
|---|---|
| LCP | p75 mobile LCP under 2.5s for paid traffic. |
| INP | p75 INP under 200ms for form interactions. |
| CLS | p75 CLS under 0.1. |
| Third-party cost | Every script has owner, purpose, loading strategy, and kill switch. |
| Experiment safety | Variants must not create cache leaks or broken attribution. |
Architecture constraints
- First useful view must not depend on client-only rendering.
- Form interactivity can hydrate selectively.
- Experiment and personalization data must not leak across users.
- Tracking cannot block critical content.
Required diagrams
- Request and edge-routing flow.
- Variant rendering/cache strategy.
- Third-party script loading timeline.
- Form state and submission lifecycle.
- Performance monitoring pipeline.
Sample edge-routing diagram
Sample performance budget
| Budget item | Target | Owner | Failure response |
|---|---|---|---|
| p75 mobile LCP | <= 2.5s | frontend platform | block launch or reduce hero/critical path |
| p75 INP on form step | <= 200ms | funnel team | profile form state and third-party long tasks |
| p75 CLS | <= 0.1 | design system/funnel team | reserve media and injected content dimensions |
| First-party JS | <= 120 KB gzip initial | frontend platform | move noncritical code behind island boundary |
| Third-party scripts | owner and kill switch required | growth/platform | disable nonessential scripts on regression |
Sample form lifecycle
Implementation milestones
- Define traffic cohorts, campaign parameters, and conversion events.
- Build route budget for HTML, CSS, JS, images, fonts, and third parties.
- Choose static, ISR, cached SSR, or hybrid rendering per page segment.
- Design selective hydration for the form and interactive trust elements.
- Define experimentation and analytics loading rules.
- Create profiling workflow for LCP, INP, CLS, and total blocking time.
- Add regression gates and exception policy.
- Write final launch readiness review.
ADRs to write
- ADR: Hybrid rendering strategy for lead funnel variants.
- ADR: Third-party script governance.
- ADR: Experiment assignment and cache safety.
- ADR: Form state preservation and retry behavior.
Gates
| Gate | Evidence |
|---|---|
| Performance | Lighthouse/WebPageTest trace, RUM plan, route budget, third-party inventory. |
| Reliability | Form submission retry and duplicate prevention design. |
| Security/privacy | Consent, tracking, PII handling, and script ownership notes. |
| Experimentation | Assignment, attribution, cache, and rollback behavior. |
Failure-mode review
- Experiment script fails.
- Analytics loads slowly.
- Variant cache serves wrong content.
- Form submission times out.
- Mobile network changes during form completion.
- Third-party tag increases INP.
Architecture drills
| Drill | Expected architect-level answer | Common weak answer |
|---|---|---|
| A new experiment variant improves conversion but regresses mobile LCP. | Correlate RUM by variant, compare trace evidence, define budget exception or rollback, isolate heavy assets, and require variant-level gates. | Keep the winning variant because conversion improved. |
| Analytics and ad tags add long tasks during form entry. | Classify scripts by owner/purpose/data, defer or sandbox noncritical tags, add kill switches, and measure INP by cohort. | Move all scripts to the footer. |
| A cached variant leaks personalized content. | Rework cache keys and personalization boundary, purge affected cache, add tests for variant/data isolation, and document cache safety ADR. | Disable caching globally. |
Final review rubric
Use rubrics/performance-architect-rubric. Passing requires level 4 in cost modeling, Web Vitals, profiling, budgeting, third-party governance, and stakeholder communication.
Portfolio deliverables
- Performance budget.
- Before/after trace notes.
- Variant architecture diagram.
- Third-party register.
- Experiment safety review.
- Incident rollback plan.
Completed artifact targets
By the end, the capstone should include:
- one completed performance budget using
part-xii/completed-examples/completed-performance-budget-example - one completed review using
review-packets/performance-review-packet - one edge delivery review using
review-packets/edge-delivery-review-packet - one launch ADR explaining variant routing, cache safety, and third-party governance
Use capstones/solution-packs/capstone-solution-pack-performance-lead-funnel and part-xii/completed-examples/completed-third-party-script-register as calibrated examples of a strong final answer.