Domäne
Frontend Development
Skill-Profil
LCP, FID/INP, CLS: measurement, optimization, monitoring
Rollen
5
wo dieser Skill vorkommt
Stufen
5
strukturierter Entwicklungspfad
Pflichtanforderungen
25
die anderen 0 optional
Frontend Development
Web Performance
17.3.2026
Wählen Sie Ihr aktuelles Level und vergleichen Sie die Erwartungen.
Die Tabelle zeigt, wie die Tiefe von Junior bis Principal wächst.
| Rolle | Pflicht | Beschreibung |
|---|---|---|
| Frontend Developer (Angular) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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 | Pflicht | 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. |
| Rolle | Pflicht | Beschreibung |
|---|---|---|
| Frontend Developer (Angular) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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 | Pflicht | Independently implements complex UI components with Core Web Vitals optimization. Optimizes rendering performance. Writes tests. Applies for state management. |
| Rolle | Pflicht | Beschreibung |
|---|---|---|
| Frontend Developer (Angular) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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 | Pflicht | 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. |
| Rolle | Pflicht | Beschreibung |
|---|---|---|
| Frontend Developer (Angular) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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 | Pflicht | 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. |
| Rolle | Pflicht | Beschreibung |
|---|---|---|
| Frontend Developer (Angular) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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 | Pflicht | 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. |