Техпрогон
ВойтиНачать бесплатно
Ответ вслух Middle Производительность и Web Vitals спрашивают часто обновлено

Страница медленная: с чего начать

Вопрос

Тебе говорят: «страница тормозит». Как ты будешь искать и устранять проблему?

Попробуйте сами

Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.

Показать ответ и разбор

Коротко

Сначала уточняю симптом, потому что «тормозит» бывает трёх видов: долго появляется контент, страница медленно реагирует на клики или скачет вёрстка. Это ровно три Core Web Vitals: LCP, INP и CLS.

Что должно прозвучать в ответе

  • Уточнить, что именно медленно: загрузка, отклик на действия или прыжки вёрстки

  • Посмотреть полевые данные (CrUX, web-vitals в аналитике) и лабораторные (Lighthouse, Performance)

  • Для LCP: найти LCP-элемент, проверить TTFB, приоритет загрузки, блокирующие ресурсы

  • Для INP: найти длинные задачи в профиле, разбить работу, вынести в воркер, уменьшить JS

  • Для CLS: размеры у медиа, резерв места, шрифты

  • После правки измерить снова и следить за метриками в мониторинге

Что могут спросить следом

  • Как найти, какой элемент стал LCP?
  • Почему в Lighthouse всё хорошо, а у пользователей плохо?
  • Какой бюджет на JS ты бы поставил для мобильной страницы?

Разбор

Сначала уточняю симптом, потому что «тормозит» бывает трёх видов: долго появляется контент, страница медленно реагирует на клики или скачет вёрстка. Это ровно три Core Web Vitals: LCP, INP и CLS. Смотрю полевые данные, CrUX или нашу аналитику через библиотеку web-vitals, чтобы понять масштаб и на каких устройствах. Потом воспроизвожу в DevTools на замедленном CPU. Если проблема в LCP, нахожу LCP-элемент и раскладываю время: ответ сервера, когда начала грузиться картинка, сколько грузилась. Обычно помогает убрать lazy с главной картинки, дать fetchpriority, убрать блокирующий CSS и JS. Если в INP, ищу длинные задачи в профиле и разбиваю их, откладываю неважное, выношу вычисления в воркер. Если CLS, ставлю размеры медиа и резервирую место. После каждой правки мерю снова.

Ответьте сами, а не прочитайте

В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.

Потренироваться бесплатно

Предыдущий вопрос

Как улучшить INP

Следующий вопрос

Пороги «хорошо» для LCP, INP и CLS

Урок по теме

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

Термины по теме

Длинная задача (long task)CLSINPLCP

Ещё по теме «Производительность и Web Vitals»

Все вопросы модуля