Домашнее задание
Задача: Запустите Lighthouse-аудит своей страницы, запишите Core Web Vitals (LCP, CLS, INP), найдите один источник CLS, один источник лишнего CSS и одну анимацию, которая может вызвать reflow/repaint — и устраните их.
1
Измерьте
DevTools → Lighthouse → режим Performance → Analyze. Запишите LCP, CLS, INP до изменений.
2
Найдите три проблемы
(а) картинку/блок, из-за которого прыгает вёрстка (CLS); (б) неиспользуемый CSS (вкладка Coverage в DevTools); (в) анимацию на width/top/left.
3
Исправьте
Добавьте картинке width/height; уберите/вынесите лишний CSS; перепишите анимацию на transform/opacity. Зафиксируйте причину каждого изменения.
4
Перепроверьте
Повторите Lighthouse и сравните метрики «до/после». Цели: LCP < 2.5 с, CLS < 0.1, INP < 200 мс.