🎯 5 метрик производительности, которые должен знать каждый фронтендер
Шпаргалка для работы и собеседований

Эти метрики спрашивают на собесах, по ним оценивают вашу работу, и они напрямую влияют на бизнес. Простым языком с примерами.

1. Скорость загрузки

FCP (First Contentful Paint) — когда на экране впервые появляется что-то (текст, лоадер).

LCP (Largest Contentful Paint) — когда прогружается самый крупный блок на странице (скелетоны, баннер).

2. Реакция на действия

FID (First Input Delay) — как быстро страница реагирует на первое действие (например, клик по кнопке).
- FID измеряет только первое взаимодействие и только задержку до начала выполнения callback, не включая отрисовку. В 2024–2025 его постепенно заменяет INP.

INP (Interaction to Next Paint) — измеряет, насколько быстро страница реагирует на взаимодействия пользователя — не только на первое, а на протяжении всей сессии.

3. Стабильность интерфейса

CLS (Cumulative Layout Shift) — измеряет «прыжки» элементов при загрузке.

- Шифты считаются только для видимых элементов и только пока страница активна.
- Поздние изменения (через секунды после загрузки) тоже учитываются, если это внезапные сдвиги.
- Анимации не считаются шифтом, если они предсказуемы (например, transition с фиксированным началом и концом).

Как замерять

Инструменты разработчика в Chrome (вкладка Lighthouse или Performance).

Аналитика в реальном времени: Google Analytics 4, Sentry, Datadog и др.

Почему всё это важно

- Google учитывает Core Web Vitals (LCP, INP, CLS) в SEO-рейтинге.

- Конверсия напрямую связана с перформансом (например, +100 мс к LCP может заметно уменьшить продажи).

- Легче проходить собеседования 😅

Вопрос на подумать, как думаете, FCP или LCP сильнее влияет на конверсию?)

Пару месяцев назад проводили открытое мок-собеседование для одного из наших подписчиков, получилось очень весело и продуктивно)

На следующей неделе планируем еще несколько очень интересных форматов, с мок-собеседованием и не только🫶

Если хочешь стать участником следующих открытых моков - пиши @codepunks_bro

Также готов ответить на любые вопросы по менторству, ведь совсем недавно двоих подписчиков взяли после голосования, и нашли всем работу рассказывая о каждом шаге от резюме до оффера публично в канале)