Domain
Frontend Development
Skill Profile
LCP, FID/INP, CLS: measurement, optimization, monitoring
Roles
5
where this skill appears
Levels
5
structured growth path
Mandatory requirements
25
the other 0 optional
Frontend Development
Web Performance
3/17/2026
Choose your current level and compare expectations. The items below show what to cover to advance to the next level.
The table shows how skill depth grows from Junior to Principal. Click a row to see details.
| Role | Required | Description |
|---|---|---|
| Frontend Developer (Angular) | Required | Understands Core Web Vitals metrics (LCP, FID, CLS) and their measurement for Angular applications. Uses Chrome DevTools and Lighthouse for basic Angular component performance diagnostics. |
| Frontend Developer (React) | Required | Understands Core Web Vitals metrics (LCP, FID/INP, CLS) and their impact on React applications. Uses Lighthouse and React DevTools for basic performance analysis, applies Image component in Next.js for LCP optimization. |
| Frontend Developer (Svelte) | Required | Understands LCP, FID/INP, and CLS metrics in the context of SvelteKit applications, measures them through Lighthouse and PageSpeed Insights. Follows basic practices: optimizes image sizes, avoids layout shifts from dynamic content in Svelte components. |
| Frontend Developer (Vue) | Required | Understands Core Web Vitals metrics — LCP, FID, CLS and their impact on UX. Measures Vue application metrics through Lighthouse and Chrome DevTools, applies basic optimizations — lazy loading images, font-display. |
| Fullstack Developer | Required | Understands Core Web Vitals metrics (LCP, FID, CLS) and their impact on fullstack application UX. Measures metrics through Lighthouse and Chrome DevTools, fixes basic issues: image optimization, lazy-loading, preventing layout shift. |
| Role | Required | Description |
|---|---|---|
| Frontend Developer (Angular) | Required | Optimizes Core Web Vitals in Angular: lazy loading via @defer blocks for improved LCP, trackBy in @for for stable CLS, ChangeDetectionStrategy.OnPush for reduced INP, NgOptimizedImage for images. |
| Frontend Developer (React) | Required | Optimizes Core Web Vitals in React/Next.js applications: LCP through load prioritization and Server Components, INP through useTransition and handler debouncing, CLS through reserving space for dynamic content and font display swap. |
| Frontend Developer (Svelte) | Required | Optimizes Core Web Vitals in SvelteKit: preloads critical resources, lazy loading through Svelte actions, font optimization. Configures web-vitals library for RUM monitoring, improves INP through event handler debouncing and $effect optimization. |
| Frontend Developer (Vue) | Required | Optimizes Vue application Core Web Vitals — code splitting through dynamic import(), LCP optimization with Nuxt Image, CLS elimination through skeleton screens and aspect-ratio for media content. |
| Fullstack Developer | Required | Independently implements complex UI components with Core Web Vitals optimization. Optimizes rendering performance. Writes tests. Applies for state management. |
| Role | Required | Description |
|---|---|---|
| Frontend Developer (Angular) | Required | Designs Core Web Vitals monitoring system: web-vitals library integration in Angular, Real User Monitoring via Angular performance API, SSR with Angular Universal for LCP optimization, performance budgets in CI. |
| Frontend Developer (React) | Required | Designs React application architecture for optimal Core Web Vitals: rendering strategy (SSR/SSG/ISR/PPR) in Next.js, progressive hydration, selective streaming. Configures RUM monitoring through web-vitals library, defines performance budgets. |
| Frontend Developer (Svelte) | Required | Designs SvelteKit application architecture prioritizing Core Web Vitals: streaming SSR for LCP, route-based code splitting, predictive prefetching. Creates performance budgets in CI, automates metric regression testing through Playwright and Lighthouse CI. |
| Frontend Developer (Vue) | Required | Designs Core Web Vitals monitoring system for Vue applications — RUM through web-vitals library, performance budgets in CI. Optimizes INP through handler debouncing, requestIdleCallback and Vue scheduler. |
| Fullstack Developer | Required | Optimizes Core Web Vitals of fullstack applications across the entire stack: server-side rendering for LCP, hydration optimization for INP, streaming SSR for TTFB. Configures RUM monitoring, analyzes field data and eliminates bottlenecks from API to rendering. |
| Role | Required | Description |
|---|---|---|
| Frontend Developer (Angular) | Required | Sets performance standards for the Angular project: CWV target values per route, Lighthouse CI automation, PR impact review process for metrics, performance dashboards. |
| Frontend Developer (React) | Required | Defines Core Web Vitals performance standards for the team's React projects: threshold values, CI/CD monitoring through Lighthouse CI, degradation alerts. Introduces performance culture: dashboards, review checklists, regular performance audits. |
| Frontend Developer (Svelte) | Required | Defines Core Web Vitals standards for the team's Svelte projects: threshold values, monitoring, regression response process. Integrates performance review into the development process, coordinates optimization between the frontend team and SvelteKit infrastructure. |
| Frontend Developer (Vue) | Required | Defines performance budgets and Core Web Vitals SLA for organizational Vue projects. Introduces Lighthouse CI in pipeline, configures metric degradation alerting, trains teams on optimization. |
| Fullstack Developer | Required | Designs Web Performance strategy for fullstack products: performance budgets, CWV monitoring in CI/CD, SSR pipeline optimization. Defines architectural decisions for achieving target metrics and trains the team on performance-oriented development. |
| Role | Required | Description |
|---|---|---|
| Frontend Developer (Angular) | Required | Defines Angular platform performance strategy: architectural decisions for stable CWV (streaming SSR, partial hydration), influence on Angular roadmap, R&D of new optimizations. |
| Frontend Developer (React) | Required | Shapes organization-level performance strategy: Core Web Vitals SLAs for all React products, architectural patterns for achieving targets, edge infrastructure investments. Evaluates the impact of performance on business metrics and conversion. |
| Frontend Developer (Svelte) | Required | Shapes web performance strategy at the organizational level, defines architectural decisions for consistently high Core Web Vitals. Researches Svelte 5 compiler optimizations for metrics, influences SvelteKit development roadmap in the performance area. |
| Frontend Developer (Vue) | Required | Shapes web performance strategy for Vue ecosystem — monitoring automation, metric correlation with business KPIs. Researches new metrics (INP, Smoothness) and architectural approaches to their optimization in Vue/Nuxt. |
| Fullstack Developer | Required | Defines organizational performance strategy for fullstack products: Core Web Vitals SLAs, architectural patterns for optimal performance, edge-rendering strategies. Creates platform solutions for automated monitoring and optimization. |