Как научить нейросеть проверять производительность сайта за вас

Представьте, что вы закончили фичу, запушили код, и тут в Slack прилетает уведомление от мониторинга: LCP вырос на полсекунды, а Layout Shift теперь «красный» на мобилках. Начинается классический дебаг: запуск Lighthouse, копание вкладки Network, поиск того самого тяжелого шрифта или несжатой картинки. Знакомая рутина?

Эдди Османи, один из главных экспертов Google по производительности, решил, что пора переложить эту скучную работу на плечи LLM (Large Language Models). Он создал репозиторий web-quality-skills — это набор специализированных инструкций (скиллов), которые превращают обычный чат с нейросетью или AI-редактор в полноценного инженера по качеству.

Что это вообще такое

Проект представляет собой реализацию концепции Agent Skills. Это не просто системный промпт, а модульный набор знаний и правил, которые можно «подключить» к Claude, Cursor, OpenCode или любому другому агенту.

Внутри лежат готовые инструкции, основанные на 150+ реальных аудитах Lighthouse и стандартах WCAG 2.2. По сути, это концентрированный опыт команды Chrome, упакованный в формат, понятный нейросети. Если раньше вы спрашивали чат-бота «как ускорить сайт?» и получали общие советы, то с этими скиллами агент начинает оперировать конкретными метриками: миллисекундами LCP, значениями INP и байтами в бандле.

Какие суперсилы получает ваш AI-агент

Репозиторий разбит на несколько узкоспециализированных модулей. Можно подключить всё сразу или только то, что болит в конкретном проекте.

Глубокий аудит производительности

Скилл performance заставляет нейросеть смотреть на сайт глазами браузера. Она начинает проверять критический путь рендеринга, стратегии загрузки шрифтов и даже то, как разбиты ваши JavaScript-бандлы. Вместо совета «оптимизируйте картинки», агент может предложить конкретные форматы (WebP/Avif) и правильные атрибуты для lazy loading в контексте вашего фреймворка.

Укрощение Core Web Vitals

Это, пожалуй, самая полезная часть для тех, кто борется за позиции в поисковой выдаче. Скилл core-web-vitals заточен под три главные метрики Google. Он «знает» пороговые значения (например, что LCP должен быть меньше 2.5с) и предлагает решения для фикса Layout Shift (CLS), которые часто неочевидны при обычном написании CSS.

Доступность и SEO без занудства

Разделы accessibility и seo избавляют от необходимости держать в голове сотни правил WCAG 2.2 или структуры JSON-LD. Агент автоматически проверяет контрастность, поддержку скринридеров и правильность мета-тегов.

Как это работает на практике

Самая крутая фишка в том, что эти инструкции не зависят от вашего стека. Неважно, пишете вы на Next.js, Vue, Astro или простом HTML — правила хорошего тона в вебе везде одинаковые.

Инсталляция выглядит максимально просто. Если вы используете специализированные инструменты для AI-агентов, достаточно одной команды:

npx add-skill addyosmani/web-quality-skills

Для тех, кто предпочитает старый добрый интерфейс claude.ai, можно просто скопировать содержимое нужного SKILL.md в знания проекта (Project Knowledge). После этого агент «просыпается» по ключевым фразам. Например, вы пишете: «Проверь этот компонент на доступность». Бот не просто посмотрит код, а применит заложенные в скилл чек-листы и выдаст отчет по пунктам.

Почему это стоит попробовать

Я часто вижу, как разработчики игнорируют мелкие огрехи в верстке или производительности, потому что «надо быстрее катить фичу», а ручной аудит занимает время. Проект Эдди Османи автоматизирует ту часть работы, которую мы обычно оставляем на потом.

Интересный момент: в репозитории прописаны четкие бюджеты производительности. Например:

Весь JS на странице — до 300 КБ в сжатом виде.
Шрифты — до 100 КБ.
Изображения «выше складки» (above-fold) — до 500 КБ.

Когда у AI-агента есть такие жесткие ориентиры, он перестает галлюцинировать и начинает давать действительно полезные советы по оптимизации.

Web-quality-skills — это не волшебная кнопка «сделать быстро», но это отличный способ привить вашему рабочему процессу культуру качества. Особенно полезно будет:

Соло-разработчикам, у которых нет времени на глубокий ручной QA.
Небольшим командам, где нет отдельного Performance-инженера.
Тем, кто только начинает разбираться в Core Web Vitals и хочет иметь под рукой умного суфлера.

Проект открытый, и если у вас есть свои лайфхаки по оптимизации (например, специфичные для Svelte или Nuxt), можно смело закидывать их в репозиторий через Pull Request. Похоже, именно так и будет выглядеть современная документация — не просто текст в браузере, а живые навыки для наших цифровых помощников.