Этап 12 из 19

Производительность

Основа

Core Web Vitals, скорость загрузки и отзывчивость интерфейса.

Скорость — часть пользовательского опыта и фактор ранжирования. Google измеряет её тремя метриками Core Web Vitals на реальных пользователях:

метрикачто измеряетхорошо
LCPкогда отрисован главный элемент≤ 2,5 с
INPзадержка реакции на действия≤ 200 мс
CLSсдвиги вёрстки при загрузке≤ 0,1

Производительность делится на две задачи: быстро загрузиться и быстро реагировать. Измеряют Lighthouse (лаборатория) и данными реальных пользователей (CrUX, библиотека web-vitals) — лабораторные цифры на мощном ноутбуке часто обманчивы.

Темы этапа

  • Скорость загрузки Основа

    Меньше байтов, раньше важное — сжатие, кэш, картинки, шрифты, разделение кода.

  • Отзывчивость интерфейса Основа

    Долгие задачи, лишние перерасчёты раскладки и тяжёлые рендеры — почему интерфейс тормозит.

Вопросы с собеседований

Смотреть все
Как браузер отрисовывает страницу и чем reflow отличается от repaint?Junior

HTML → DOM, CSS → CSSOM, вместе → дерево отрисовки → layout (геометрия: размеры и позиции) → paint (пиксели слоёв) → composite (сборка слоёв на GPU). Reflow — пересчёт раскладки при изменении геометрии, дорогой; repaint — перерисовка без изменения геометрии…

Полный разбор
Что делает CDN?Middle

CDN — сеть серверов по миру, которые кэшируют контент рядом с пользователями: меньше задержка и нагрузка на исходный сервер (origin).

Полный разбор
Что такое Core Web Vitals и как их улучшить?Middle

Три метрики Google, измеряемые на реальных пользователях: LCP — когда отрисован главный элемент (хорошо ≤ 2,5 с), INP — задержка реакции на действия пользователя (≤ 200 мс), CLS — сдвиги вёрстки при загрузке (≤ 0,1). LCP улучшают быстрым ответом сервера…

Полный разбор
Как держать производительность большого фронтенд-приложения под контролем?Senior

Производительность деградирует незаметно — по килобайту в каждом PR. Удержать её помогают бюджеты (размер JS на маршрут, LCP, INP) с проверкой в CI, которая блокирует превышение, мониторинг реальных пользователей (RUM) по маршрутам и устройствам с алертами…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования