Профиль навыка

Core Web Vitals

LCP, FID/INP, CLS: измерение, оптимизация, мониторинг

Frontend Development Web Performance

Ролей

5

где встречается этот навык

Грейдов

5

сформированная дорожка роста

Обязательных требований

25

ещё 0 — необязательные

Домен

Frontend Development

Группа

Web Performance

Последнее обновление

17.03.2026

Как использовать

Выберите текущий грейд и сравните ожидания. Карточки ниже покажут, что нужно закрыть для следующего уровня.

Чего ждут на каждом уровне

Таблица показывает, как меняется глубина владения навыком от Junior до Principal.

Роль Обязательность Описание
Frontend Developer (Angular) Обязателен Понимает метрики Core Web Vitals (LCP, FID, CLS) и их измерение для Angular-приложений. Использует Chrome DevTools и Lighthouse для базовой диагностики производительности Angular-компонентов.
Frontend Developer (React) Обязателен Понимает метрики Core Web Vitals (LCP, FID/INP, CLS) и их влияние на React-приложение. Использует Lighthouse и React DevTools для базового анализа производительности, применяет Image component в Next.js для оптимизации LCP.
Frontend Developer (Svelte) Обязателен Понимает метрики LCP, FID/INP и CLS в контексте SvelteKit-приложений, измеряет их через Lighthouse и PageSpeed Insights. Следует базовым практикам: оптимизирует размер изображений, избегает layout shifts от динамического контента в Svelte-компонентах.
Frontend Developer (Vue) Обязателен Понимает метрики Core Web Vitals — LCP, FID, CLS и их влияние на UX. Измеряет показатели Vue-приложения через Lighthouse и Chrome DevTools, применяет базовые оптимизации — lazy loading изображений, font-display.
Fullstack Developer Обязателен Понимает метрики Core Web Vitals (LCP, FID, CLS) и их влияние на UX fullstack-приложений. Измеряет показатели через Lighthouse и Chrome DevTools, исправляет базовые проблемы: оптимизация изображений, lazy-loading, предотвращение layout shift.
Роль Обязательность Описание
Frontend Developer (Angular) Обязателен Оптимизирует Core Web Vitals в Angular: lazy loading через @defer блоки для улучшения LCP, trackBy в @for для стабильного CLS, ChangeDetectionStrategy.OnPush для снижения INP, NgOptimizedImage для изображений.
Frontend Developer (React) Обязателен Оптимизирует Core Web Vitals в React/Next.js приложениях: LCP через приоритизацию загрузки и Server Components, INP через useTransition и дебаунс обработчиков, CLS через резервирование места для динамического контента и font display swap.
Frontend Developer (Svelte) Обязателен Оптимизирует Core Web Vitals в SvelteKit: preload критических ресурсов, lazy loading через Svelte actions, font optimization. Настраивает web-vitals библиотеку для RUM-мониторинга, улучшает INP через дебаунс обработчиков событий и оптимизацию $effect.
Frontend Developer (Vue) Обязателен Оптимизирует Core Web Vitals Vue-приложения — code splitting через динамические import(), оптимизация LCP с Nuxt Image, устранение CLS через skeleton screens и aspect-ratio для медиа-контента.
Fullstack Developer Обязателен Самостоятельно реализует сложные UI-компоненты с Core Web Vitals. Оптимизирует производительность рендеринга. Пишет тесты. Применяет для state management.
Роль Обязательность Описание
Frontend Developer (Angular) Обязателен Проектирует систему мониторинга Core Web Vitals: интеграция web-vitals библиотеки в Angular, Real User Monitoring через Angular performance API, SSR с Angular Universal для оптимизации LCP, performance-бюджеты в CI.
Frontend Developer (React) Обязателен Проектирует архитектуру React-приложений для оптимальных Core Web Vitals: стратегию рендеринга (SSR/SSG/ISR/PPR) в Next.js, progressive hydration, selective streaming. Настраивает RUM-мониторинг через web-vitals библиотеку, определяет performance budgets.
Frontend Developer (Svelte) Обязателен Проектирует архитектуру SvelteKit-приложений с приоритетом Core Web Vitals: streaming SSR для LCP, route-based code splitting, predictive prefetching. Создаёт performance budgets в CI, автоматизирует регрессионное тестирование метрик через Playwright и Lighthouse CI.
Frontend Developer (Vue) Обязателен Проектирует систему мониторинга Core Web Vitals для Vue-приложений — RUM через web-vitals библиотеку, performance budgets в CI. Оптимизирует INP через дебаунсинг обработчиков, requestIdleCallback и Vue scheduler.
Fullstack Developer Обязателен Оптимизирует Core Web Vitals fullstack-приложений сквозь весь стек: серверный рендеринг для LCP, оптимизация гидратации для INP, streaming SSR для TTFB. Настраивает RUM-мониторинг, анализирует field data и устраняет узкие места от API до рендеринга.
Роль Обязательность Описание
Frontend Developer (Angular) Обязателен Устанавливает performance-стандарты для Angular-проекта: целевые значения CWV для каждого маршрута, автоматизация Lighthouse CI, процесс ревью влияния PR на метрики, dashboards производительности.
Frontend Developer (React) Обязателен Определяет performance-стандарты Core Web Vitals для React-проектов команды: пороговые значения, мониторинг в CI/CD через Lighthouse CI, алерты при деградации. Внедряет culture of performance: dashboards, review checklists, regular performance audits.
Frontend Developer (Svelte) Обязателен Определяет стандарты Core Web Vitals для Svelte-проектов команды: пороговые значения, мониторинг, процесс реагирования на регрессии. Внедряет performance review в процесс разработки, координирует оптимизацию между frontend-командой и инфраструктурой SvelteKit.
Frontend Developer (Vue) Обязателен Определяет performance budgets и SLA по Core Web Vitals для Vue-проектов организации. Внедряет Lighthouse CI в pipeline, настраивает алертинг на деградацию метрик, обучает команды оптимизации.
Fullstack Developer Обязателен Проектирует стратегию Web Performance для fullstack-продуктов: performance-бюджеты, мониторинг CWV в CI/CD, оптимизация SSR-pipeline. Определяет архитектурные решения для достижения целевых метрик и обучает команду performance-ориентированной разработке.
Роль Обязательность Описание
Frontend Developer (Angular) Обязателен Определяет стратегию производительности Angular-платформы: архитектурные решения для стабильных CWV (streaming SSR, partial hydration), влияние на Angular roadmap, R&D новых оптимизаций.
Frontend Developer (React) Обязателен Формирует performance-стратегию на уровне организации: SLA по Core Web Vitals для всех React-продуктов, архитектурные паттерны для достижения целей, инвестиции в edge infrastructure. Оценивает влияние performance на бизнес-метрики и конверсию.
Frontend Developer (Svelte) Обязателен Формирует стратегию web-производительности на уровне организации, определяет архитектурные решения для стабильно высоких Core Web Vitals. Исследует оптимизации компилятора Svelte 5 для метрик, влияет на development roadmap SvelteKit в области performance.
Frontend Developer (Vue) Обязателен Формирует стратегию web performance для Vue-экосистемы — автоматизация мониторинга, корреляция метрик с бизнес-KPI. Исследует новые метрики (INP, Smoothness) и архитектурные подходы к их оптимизации в Vue/Nuxt.
Fullstack Developer Обязателен Определяет performance-стратегию организации для fullstack-продуктов: SLA по Core Web Vitals, архитектурные паттерны для оптимальной производительности, edge-rendering стратегии. Создаёт платформенные решения для автоматического мониторинга и оптимизации.

Сообщество

👁 Следить ✏️ Предложить изменение Войдите, чтобы предлагать изменения
📋 Предложения
Пока нет предложений для Core Web Vitals
Загрузка комментариев...