AI-промты для оптимизации Core Web Vitals

Роль: Ты Performance-инженер с 7 лет опыта в оптимизации Core Web Vitals. Экспертиза: WebPageTest, Chrome DevTools Performance panel, анализ HAR-файлов.

Контекст: Я веб-разработчик в [тип компании]. Проект: [название сайта] на стеке [фреймворк]. Данные: waterfall-отчёт WebPageTest со значением LCP = [текущий LCP в сек], TTFB = [текущий TTFB в мс], размер критического CSS = [размер в KB], список render-blocking ресурсов: [перечисление].

Задача: Проанализируй waterfall и выдай приоритизированный план устранения узких мест, критичных для достижения LCP < 2.5s.

Формат вывода: (1) Таблица: ресурс | тип проблемы | влияние на LCP в мс | приоритит P0/P1/P2. (2) Топ-5 конкретных фиксов с кодом или настройками. (3) Прогноз LCP после внедрения каждого фикса.

Детали: Опирайся на методологию RAIL и рекомендации web.dev. Учитывай third-party скрипты отдельно. Избегай общих советов вида 'оптимизируйте картинки'.

Роль: Ты Web Vitals-эксперт с 6 лет опыта в конкурентном анализе производительности. Экспертиза: CrUX BigQuery, PageSpeed Insights API, Treo.sh.

Контекст: Я frontend-разработчик в [ниша бизнеса]. Наш домен: [домен]. Домены конкурентов: [конкурент1], [конкурент2], [конкурент3]. Данные CrUX за [период]: наши p75 LCP = [значение], INP = [значение], CLS = [значение]. Тип страниц для сравнения: [тип страницы].

Задача: Построй сравнительный бенчмарк Core Web Vitals и определи, в каких метриках мы проигрываем, а в каких лидируем.

Формат вывода: (1) Таблица p75 по 3 метрикам для нас и 3 конкурентов с цветовой маркировкой Good/NI/Poor. (2) Гипотезы о технических причинах отставания (CDN, хостинг, вес JS). (3) План действий на 4 спринта с целевыми значениями.

Детали: Разделяй mobile и desktop. Учитывай, что CrUX использует реальных пользователей Chrome. Не предлагай фиксы без привязки к конкретной метрике.

Роль: Ты Senior Frontend-инженер с 8 лет опыта проведения внутренних воркшопов. Экспертиза: Long Animation Frames API, React Profiler, event loop debugging.

Контекст: Я тимлид в команде из [количество разработчиков] человек. Уровень команды: [junior/middle/senior]. Стек: [фреймворк и библиотеки]. Проблема: p75 INP = [текущее значение] мс на [тип страницы], цель — уложиться в 200 мс.

Задача: Разработай план 90-минутного воркшопа, который научит команду диагностировать и устранять проблемы INP.

Формат вывода: (1) Тайминг воркшопа по блокам: теория, live-debug, практика, Q&A. (2) Список из 5 практических упражнений с исходным кодом 'до' и ожидаемым 'после'. (3) Чек-лист код-ревью по INP для последующего внедрения в PR-процесс.

Детали: Используй реальные примеры из нашего репозитория. Объясни разницу между input delay, processing time и presentation delay. Избегай сухой теории без запуска кода.

Роль: Ты Full-stack оптимизатор с 5 лет опыта внедрения CI/CD для performance. Экспертиза: Lighthouse CI server, GitHub Actions, budget.json.

Контекст: Я DevOps-инженер в проекте [название]. Стек: [фреймворк], деплой через [CI-система]. Текущие метрики: LCP = [значение], TBT = [значение], размер JS-бандла = [KB], количество запросов = [число]. Бизнес-цель: [цель из брифа].

Задача: Спроектируй performance budget и конфигурацию Lighthouse CI, которая будет блокировать мерж PR при деградации метрик.

Формат вывода: (1) Готовый файл lighthouserc.js с assertions по категориям и метрикам. (2) Budget.json с лимитами на ресурсы (script, image, total) и тайминги. (3) Шаги настройки GitHub Action с командами и секретами. (4) Процесс эскалации при фейле бюджета.

Детали: Разделяй budget для мобильной и десктопной версии. Используй медианы из 3+ прогонов. Не ставь budget жёстче текущих значений более чем на 10% в первой итерации.