Как компания Policybazaar сократила накладные расходы на аудит на 92 % и ускорила доставку экранов более чем на 90 % с помощью инструментов разработчика Chrome для агентов и Modern Web Guidance

Aman Soni

Swetha Gopalakrishnan

Дата публикации: 10 ноября 2026 г.

Policybazaar – одна из ведущих страховых платформ в Индии, на которой зарегистрировано более 97 миллионов клиентов. Около 80 % клиентов посещают сайт каждый месяц. Ее головная компания, PB Fintech, недавно запустила Pensionbazaar – комплексную платформу для планирования выхода на пенсию, которая является брендом Paisabazaar Marketing & Consulting Private Limited.

Обе команды уже используют агентов, которые быстро пишут код, но не могут увидеть, как он работает в браузере. Агенты часто использовали устаревшие веб-шаблоны и не могли проверить, правильно ли отображается экран, поэтому инженерам все равно приходилось проверять все вручную.

Чтобы решить эту проблему, обе компании объединили в своих рабочих процессах два инструмента: Modern Web Guidance, чтобы обучить модели современным веб-стандартам, и инструменты разработчика Chrome для агентов, чтобы предоставить агентам браузер без графического интерфейса для проверки и подтверждения их работы.

Вот как это повлияло на вас:

Проблема: быстрая разработка, медленная проверка

Компании Policybazaar и Pensionbazaar столкнулись с двумя разными проблемами, которые стандартные рабочие процессы программирования с помощью ИИ не могли оптимизировать на уровне производства.

Pensionbazaar: новые экраны с долгими циклами контроля качества

Pensionbazaar требовались десятки новых сложных экранов, таких как многоэтапный калькулятор Retirement Freedom Score, настраиваемые прогнозы инвестиционных расходов и автоматизированные отчеты с рекомендациями. Команда создала их с помощью агентов кодирования и сервера Figma MCP, но две проблемы затягивали циклы контроля качества.

Во-первых, агенты писали код вслепую. Базовая модель могла генерировать код, но не могла видеть отрисованный интерфейс, сравнивать вычисленные стили со спецификациями дизайна, обнаруживать сдвиги макета или читать сетевой водопад. Поэтому связанные проблемы, такие как обрезанный интерфейс и сдвиги макета, дошли до ручного контроля качества.

Во-вторых, сгенерированный код застрял в прошлом. Не зная о современных веб-платформах, агенты использовали устаревшие обходные пути: писали тяжелые модальные окна на JavaScript вместо встроенного элемента <dialog>, добавляли ненужные полифилы и не использовали подсказки по производительности, такие как fetchpriority.

Policybazaar: 30 целевых страниц и ручной аудит

Команда Policybazaar, занимающаяся страхованием жизни, использует около 30 целевых страниц для разных страховых продуктов, и у каждой страницы могут быть варианты для разных маркетинговых кампаний. Вместе они получают от 200 000 до 300 000 посетителей в день, и каждая страница ежемесячно обновляет дизайн и бизнес-логику. Команда должна поддерживать высокие показатели Core Web Vitals и следить за тем, чтобы каждый вариант оставался доступным и правильно отображался на экране любого размера.

До автоматизации инженер проверял каждую страницу вручную:

1. Запустите PageSpeed Insights, чтобы собрать реальные пользовательские данные.
2. Ознакомьтесь с оценками и рекомендациями Core Web Vitals.
3. Проверьте сборку для разработки или промежуточную сборку, определите причины низких оценок и исправьте код.

Процесс был медленным, повторяющимся и не масштабируемым. Это приводило к упущенным возможностям оптимизации, неполному охвату аудита, незамеченным регрессиям производительности и задержкам релизов.

Перед изменением рабочего процесса команды поставили три цели: сократить время, затрачиваемое разработчиками на аудит производительности, более чем на 80 %, сделав при этом охват аудита непрерывным, сократить время выполнения контроля качества с помощью проверенных отчетов и уменьшить количество ошибок пользовательского интерфейса, возникающих из-за того, что экран не соответствует его каркасам.

Решение: цикл "код – проверка"

Pensionbazaar удалось сократить время между написанием кода и его проверкой. Агент пишет код, запускает чистый экземпляр браузера, программно проверяет страницу на визуальное соответствие, нарушения макета, ошибки консоли и производительность, а также исправляет обнаруженные проблемы с минимальным вмешательством человека. Агент получает дизайн из Figma MCP и сравнивает отрисованную страницу с тем, что задумали дизайнеры.

В видео ниже показано, как работает этот цикл. Агент читает макеты Figma для нового экрана, реализует его, а затем использует инструменты разработчика Chrome для агентов, чтобы проверить отрисованную страницу и исправить найденные различия.

Шаг 1. Обучите агента современным веб-стандартам

Команда Pensionbazaar хотела, чтобы сгенерированный код соответствовал современным рекомендациям по веб-разработке, использовал текущие функции платформы и при этом работал в старых браузерах. Проверять это вручную утомительно, а агенты не всегда в курсе актуальных изменений на платформе. Modern Web Guidance решает эту проблему. Это навык агента, написанный и поддерживаемый веб-экспертами из Chrome и веб-сообщества, который охватывает более 200 вариантов использования. Он направляет агентов к современным API веб-платформы и к лучшим практикам производительности и доступности, которые соответствуют вашей цели Baseline. Если вы не укажете целевую версию, по умолчанию будет выбрана Baseline Widely Available.

После того как агент извлечет контекст из файлов Figma, он использует Modern Web Guidance для написания кода. В случае с Pensionbazaar это привело к трем изменениям в коде:

• Встроенные элементы заменили обходные решения на JavaScript. Агент использовал встроенный элемент <dialog> и Popover API для модальных окон с подробными сведениями о планах, а также CSS Grid и Flexbox для карточек с финансовой сводкой.
• Агент добавил подсказки по производительности, которые базовые модели обычно упускают. В частности, для изображений LCP на главном баннере использовался атрибут fetchpriority="high", для карточек тарифов в нижней части страницы – loading="lazy", а для защиты показателя Interaction to Next Paint (INP) – временной бюджет выполнения с scheduler.yield().
• Современные функции не нарушали работу старых браузеров. Pensionbazaar поддерживает старые версии браузеров, которые определены в Browserslist. Агент использовал такие функции, как псевдокласс CSS :user-invalid и autoComplete="one-time-code" в поле одноразового кода. Старые браузеры игнорируют их, и основные функции продолжают работать.

Базовые модели были неплохими. С точки зрения эффективности они примерно на 70 % соответствовали рекомендациям. В отчете агента было указано 12 правил Modern Web Guidance, которые помогли устранить оставшиеся проблемы. Вот четыре примера:

При создании Pensionbazaar мы с самого начала стремились писать качественный код, чтобы избежать технических проблем в будущем. Modern Web Guidance помог нашему агенту программирования внедрить современные веб-стандарты и рекомендации по повышению производительности, не нарушая совместимость с браузерами. Это существенно упростило и ускорило проверку кода интерфейса, что в конечном итоге сократило время разработки.

Аман Сони (Aman Soni), менеджер по разработке, Policybazaar

Шаг 2. Предоставьте агенту браузер

Инструменты разработчика Chrome для агентов – это набор инструментов, включающий сервер MCP, CLI и навыки агента, который предоставляет агентам кодирования доступ в реальном времени к данным отладки среды выполнения, таким как журналы консоли, сетевой трафик, дерево специальных возможностей и другие возможности инструментов разработчика.

Команда установила инструменты разработчика Chrome для агентов в качестве плагина в Claude Code, своего агента программирования.

# Add the marketplace registry
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

# Install the plugin (MCP server and skills)
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Команда хотела, чтобы каждый тест запускался в чистом экземпляре браузера, чтобы установленные расширения Chrome не могли повлиять на результаты, а личные или конфиденциальные данные не могли утечь. Для этого добавьте --isolated в массив args в конфигурации MCP-сервера:

{
  "args": ["-y", "chrome-devtools-mcp@latest", "--isolated"]
}

Если для тестов требуется существующий сеанс браузера, в котором выполнен вход, используйте --autoConnect.

Шаг 3. Позвольте агенту проверить и исправить свою работу

Команда инженеров перечисляет проверки в инструкциях агента в виде запроса или навыка агента. В целом агент выполняет следующие действия:

• Проверяет дерево DOM и вычисленный CSS и сравнивает их с дизайном Figma.
• Изменяет размер страницы в соответствии с областью просмотра на мобильных устройствах, чтобы проверить адаптивность.
• Записывает трассировки производительности, чтобы находить длительные кадры анимации, вызванные скриптами, ресурсами, блокирующими отрисовку, и другими проблемами производительности.
• Переписывает код, чтобы устранить несоответствия дизайна, проблемы производительности и исключения консоли, прежде чем инженер проверит его.

В таблице ниже показано, какие инструменты разработчика Chrome для агентов поддерживают каждую проверку.

Когда агент обнаруживает проблему, например обрезанный текст на маленьких экранах, сломанную обертку flex или неоптимизированное изображение, которое вызывает сдвиг макета, он запускает короткий цикл исправления:

1. Инструменты разработчика Chrome для агентов фиксируют точную ошибку.
2. Агент анализирует данные и переписывает проблемный код CSS или JavaScript.
3. Агент перезагружает страницу, чтобы убедиться, что проблема устранена.

На одном экране агент отрисовал страницу и обнаружил, что макет заголовка, интервалы и градиент не соответствуют дизайну. Исправлено файлов: .scss. Он также взаимодействовал со страницей, например, разворачивал аккордеоны, чтобы проверить, соответствуют ли их открытые состояния дизайну.

Шаг 4. Передайте отчет специалисту по контролю качества

После завершения проверки агент предоставляет готовый к использованию код вместе с отчетом об аудите для команды контроля качества. В отчете представлены следующие показатели:

• Визуальное сравнение с дизайном Figma, которое выделяет различия в пикселях, созданное на основе скриншотов, снимков DOM и вычисленных стилей.
• Скриншоты обработанной страницы на экранах разных размеров.
• Core Web Vitals и диагностика производительности от performance_start_trace и performance_analyze_insight, например Speed Index и Total Blocking Time (TBT).
• Оценки Lighthouse для поисковой оптимизации, рекомендации и специальные возможности из lighthouse_audit.
• Проверки на успешность или неудачу для взаимодействий, таких как сворачивание строк и переключатели, а также ошибки консоли и изменения состояния приложения, такие как редактирование строк, удаление строк и пустые состояния.

Примените этот подход к 30 страницам кампаний

На своей основной платформе Policybazaar заменила ручные запуски PageSpeed Insights на аудиты, выполняемые с помощью инструментов разработчика Chrome для агентов в Kiro. Перед запуском страницы кампании инженер запускает аудит URL-адреса промежуточной среды для мобильных устройств и компьютеров. Агент проводит аудит производительности и Lighthouse, а инструменты разработчика Chrome для агентов автоматически извлекают реальные данные из отчета об удобстве пользования браузером Chrome (CrUX) вместе с лабораторными данными. Это полностью заменило этап PageSpeed Insights.

Затем агент сообщает показатели производительности, обнаруженные узкие места и приоритетный список улучшений, которые должен исправить инженер. В ходе одного из аудитов перед предварительным выпуском он выявил некритичные вызовы API, которые выполнялись один за другим во время загрузки страницы и конкурировали с критически важными задачами по отрисовке. Команда устранила проблему до того, как страница была опубликована.

Теперь агент выполняет 12 проверок производительности за то время, которое требуется инженеру, чтобы закончить одну. Это на 92 % меньше, чем при ручной настройке.

Для нас важно, чтобы сайт работал быстро и был удобен для пользователей. Однако вручную проверять и оценивать каскады и трассировки на десятках целевых страниц было утомительно и отнимало много времени. Инструменты разработчика Chrome для агентов изменили этот процесс и сократили время, которое наши инженеры тратят на аудит производительности, на 92 %, что позволило им сосредоточиться на более сложных задачах.

Аман Сони (Aman Soni), менеджер по разработке, Policybazaar

Результат

Modern Web Guidance и инструменты разработчика Chrome для агентов превратили тестирование интерфейса в Policybazaar и Pensionbazaar из ручного реактивного процесса в автоматизированный проактивный. В таблице ниже сравниваются рабочие процессы до и после изменения.

Снижение на 92 % превзошло цель команды, которая составляла более 80 %. Регрессии целевых страниц выявляются до того, как они достигают этапа тестирования или контроля качества. В Pensionbazaar код поступает уже проверенным, со скриншотами для нескольких областей просмотра, что сокращает количество итераций между дизайнерами, инженерами и специалистами по контролю качества.

Основные темы

• Обучите агента на основе авторитетных источников. Рекомендации, такие как Modern Web Guidance, помогают агентам избегать устаревших шаблонов и поддерживать код в соответствии с целями Baseline.
• Не позволяйте агенту помечать задачу как выполненную, пока он не проверит отрисованную страницу. Инструменты разработчика Chrome для агентов позволяют агенту проверять макет, области просмотра и трассировки производительности в реальном браузере.
• Задайте четкие критерии выхода из цикла. Установите ограничения на количество шагов и явные условия прохождения и непрохождения, чтобы агент не зацикливался и не тратил токены.
• Начните с часто посещаемых страниц, созданных на основе шаблонов. Рабочие процессы с замкнутым циклом наиболее эффективны, когда важна скорость выполнения.
• Проводите аудит в чистом браузере. Используйте --isolated, чтобы расширения и кешированные данные не влияли на результаты и не раскрывали личные данные.

Ресурсы

• Modern Web Guidance
• Репозиторий исходного кода Modern Web Guidance
• Документация по инструментам разработчика Chrome для агентов
• Инструменты разработчика Chrome для агентов на GitHub