Скил «Аудит скорости»: найди, почему сайт тормозит

Замер Core Web Vitals, поиск bottleneck'ов, бюджет производительности и мониторинг. Отчёт с планом по срокам.

Шаги

1. 1Зафиксируйте базовую линию

   Прогоните сайт через PageSpeed Insights (мобильная версия важнее) и запишите LCP, INP, CLS. Это точка отсчёта — без неё не докажете, что оптимизация сработала.

2. 2Найдите самый тяжёлый элемент

   LCP-элемент (обычно главный баннер или заголовок) и самые большие ресурсы: JS-бандлы, картинки, шрифты. Именно они дают основную задержку.

   ПРОМПТ ДЛЯ АГЕНТА

   Ты — аудитор веб-производительности. Проанализируй страницу [URL]: найди LCP-элемент, перечисли ресурсы, блокирующие рендер, и оцени размер JS-бандлов. Верни список из 10 главных проблем по убыванию влияния на скорость.

   📋 Скопировать промпт⚡ Обкатать

3. 3Проверьте реальные метрики пользователей

   Lab-данные Lighthouse отличаются от жизни. Откройте отчёт CrUX (в PageSpeed Insights он встроен) или статистику Search Console — смотрите на 75-й перцентиль.

4. 4Разложите находки по срокам

   Быстрые победы (1–2 дня): сжатие gzip/brotli, минификация, отложенные скрипты, оптимизация картинок. Средний этап (1–2 недели): разделение кода, кэширование, preload. Стратегический (1–3 месяца): архитектура, CDN.

5. 5Назначьте бюджет производительности

   Пропишите лимиты: FCP до 1.5 c, LCP до 2.5 c, скрипты до 150 КБ, картинки до 300 КБ на страницу. Бюджет не даёт сайту снова «расползтись» после следующего релиза.

6. 6Поставьте мониторинг

   Подключите сбор CWV реальных пользователей (библиотека web-vitals или Search Console) и алерты на просадку. Разовый аудит без мониторинга — деньги на ветер.

✅ Сделал материал, если:

• ☐Зафиксированы исходные LCP, INP, CLS
• ☐Есть список bottleneck'ов, отсортированный по эффекту
• ☐Быстрые победы отделены от долгосрочных работ
• ☐Назначен бюджет производительности
• ☐Мониторинг метрик настроен