Back to Frontend ArchitectTrack Details
Frontend Architect Curriculum
Frontend Performance Engineering
Track performance metrics Core Web Vitals (LCP, INP, CLS), optimize code split bundles, and isolate execution loops.
Syllabus Modules
Module 17.1: INP optimizations & Bundle SplittingModule
Analyze LCP assets preloads, yield execution cycles to boost INP, and configure bundle splits.
Detailed Topics & Submodules
Core Web Vitals & Auditing Pipelines
Analyze LCP bottlenecks, eliminate INP scripting delays, and debug CLS shifts.
Why It Matters: Page load speeds directly correlate with user conversions and SEO rankings.
Skills:LCP asset preloadsINP script yieldingCLS size aspects
Related System Design Case Studies
Design Instagram Feed FrontendCase Study
Designing a media-heavy social feed web application optimized for fast image/video preloading, lazy loading, and auto-play viewports.
advanced11 min Readhigh Relevance
IntersectionObserver viewportsMedia prefetching pipelinesLayout aspect-ratios (CLS)
Category: Media & StreamingRead Full Case Study
Design LinkedIn Feed FrontendCase Study
Architecting a professional feed rendering heterogeneous card layouts (text, articles, videos, interactive polls) with reaction picker widgets.
architect13 min Readcritical Relevance
Heterogeneous cards factoryReaction picker portalScroll preservation
Category: Media & StreamingRead Full Case Study
Planned Practice Projects
Projects mapping coming soon.
Track Details
Difficulty:architect
Estimated Time:50 Hours
Interview Weight:critical
Prerequisites
Learning Outcomes
- Trace and debug LCP bottlenecks using performance profiles
- Mitigate INP delays by yielding script execution loops
- Eliminate CLS shifting errors setting static layout box ratios