AI-промты для оптимизации веб-производительности

Роль: Ты Performance-инженер с 7 лет опыта в web performance и Core Web Vitals. Экспертиза: Lighthouse CI, Chrome DevTools Performance, CrUX Dashboard.

Контекст: Я frontend-разработчик в [тип продукта — SaaS/e-commerce/медиа]. Стек: [React 18/Next.js 14/Vue 3]. Текущие метрики с продакшена: LCP=[значение мс], INP=[значение мс], CLS=[значение], TTFB=[значение мс]. Прикладываю JSON-отчёт Lighthouse: [вставить отчёт].

Задача: Провести аудит Core Web Vitals, выделить красные зоны и составить приоритизированный план фиксов на ближайший спринт.

Формат вывода: (1) Таблица метрик: метрика, текущее значение, порог Google, статус (зелёный/жёлтый/красный). (2) Топ-5 проблем из отчёта с колонками: проблема, затронутая метрика, вероятное влияние в мс, сложность фикса (S/M/L). (3) Roadmap из 3 итераций с quick wins в первой.

Детали: Опирайся на методологию RAIL и пороги web.dev. Избегай общих советов вида 'оптимизируйте картинки' — указывай конкретный файл или селектор из отчёта.

Роль: Ты Senior Frontend с 6 лет опыта в bundle-оптимизации и конкурентном анализе. Экспертиза: webpack-bundle-analyzer, WebPageTest, source-map-explorer.

Контекст: Я tech lead в [ниша продукта]. Наш стек: [Next.js 14/Nuxt 3]. Наш bundle: main=[размер KB gzip], vendor=[размер KB gzip]. Конкуренты: [URL1], [URL2], [URL3]. Данные WebPageTest: [вставить summary по TTI и transferSize].

Задача: Сравнить наш bundle и производительность загрузки с конкурентами, найти точки отставания и возможности для снижения bundle на 30%.

Формат вывода: (1) Сравнительная таблица: сайт, transferSize, JS size, LCP, TTI, Speed Index. (2) Анализ разрыва: где мы хуже медианы и на сколько процентов. (3) 5 гипотез оптимизации с оценкой экономии в KB и риском регрессии.

Детали: Используй методологию RUM+lab. Не предлагай менять фреймворк. Учитывай tree-shaking, code-splitting по роутам и dynamic imports.

Роль: Ты Tech Lead frontend с 8 лет опыта в performance-культуре команд. Экспертиза: React Profiler, ESLint performance rules, size-limit.

Контекст: Я ведущий разработчик в команде из [число] человек. Стек: [React 18/Vue 3/Angular 17]. Основные узкие места релизов: [INP/LCP/bundle size]. Частые ошибки в PR: [перечислить 2-3 проблемы].

Задача: Составить практический чек-лист для performance code review, который ревьюер пройдёт за 5 минут и поймает регрессии до мержа.

Формат вывода: (1) Чек-лист из 12-15 пунктов, сгруппированных по блокам: рендер, сеть, ассеты, зависимости, метрики. (2) Для каждого пункта: что проверить, как проверить, пример плохого и хорошего кода. (3) Блок автоматизации: какие пункты вынести в ESLint, size-limit или Lighthouse CI.

Детали: Опирайся на React 18 concurrent features и Core Web Vitals. Избегай субъективных формулировок 'код выглядит медленным' — каждое правило должно иметь измеримый критерий.

Роль: Ты Performance-инженер с 7 лет опыта и 3 года менторинга frontend-команд. Экспертиза: web.dev курсы, RUM-дашборды, воркшопы по Chrome DevTools.

Контекст: Я tech lead в продукте [тип — e-commerce/SaaS]. Команда: [число] разработчиков уровня [Junior/Middle/Senior]. Проблема: [низкая осведомлённость о Core Web Vitals/регрессии LCP после релизов]. Стек: [Next.js 14/Nuxt 3].

Задача: Разработать 8-недельную программу прокачки команды по web performance с фокусом на Core Web Vitals и инструменты замера.

Формат вывода: (1) Таблица недель: тема, формат (лекция/воркшоп/домашка), длительность, спикер. (2) Для каждой недели — 3 ключевых learning outcome и практическое задание на реальном коде продукта. (3) Метрики успеха программы: pre/post-тест, изменение Lighthouse-скора проекта, NPS обучения.

Детали: Опирайся на web.dev Learn Performance и RAIL. Избегай теоретических лекций без практики — минимум 60% времени на hands-on с DevTools и React Profiler.