领域
Frontend Development
技能档案
LCP, FID/INP, CLS: measurement, optimization, monitoring
角色数
5
包含此技能的角色
级别数
5
结构化成长路径
必要要求
25
其余 0 个可选
Frontend Development
Web Performance
2026/3/17
选择当前级别并对比期望。下方卡片显示晋升所需掌握的内容。
表格展示从初级到首席的技能深度变化。点击行查看详情。
| 角色 | 必要性 | 描述 |
|---|---|---|
| Frontend Developer (Angular) | 必要 | 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) | 必要 | 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) | 必要 | 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) | 必要 | 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 | 必要 | 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. |
| 角色 | 必要性 | 描述 |
|---|---|---|
| Frontend Developer (Angular) | 必要 | 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) | 必要 | 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) | 必要 | 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) | 必要 | 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 | 必要 | Independently implements complex UI components with Core Web Vitals optimization. Optimizes rendering performance. Writes tests. Applies for state management. |
| 角色 | 必要性 | 描述 |
|---|---|---|
| Frontend Developer (Angular) | 必要 | 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) | 必要 | 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) | 必要 | 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) | 必要 | 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 | 必要 | 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. |
| 角色 | 必要性 | 描述 |
|---|---|---|
| Frontend Developer (Angular) | 必要 | 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) | 必要 | 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) | 必要 | 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) | 必要 | 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 | 必要 | 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. |
| 角色 | 必要性 | 描述 |
|---|---|---|
| Frontend Developer (Angular) | 必要 | 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) | 必要 | 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) | 必要 | 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) | 必要 | 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 | 必要 | 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. |