Дата публикации: 10 ноября 2026 г.
WeTV – это международная стриминговая платформа Tencent. Она предлагает сериалы, аниме и развлекательные шоу зрителям в Юго-Восточной Азии и других регионах. Для сайта, построенного на видео, производительность определяет, останутся ли зрители, будут ли поисковые системы показывать контент и будет ли воспроизведение плавным.
Команда веб-разработчиков WeTV не выпускает код, который не соответствует целям по производительности. Долгое время разработчикам приходилось останавливать работу, открывать Chrome и вручную профилировать страницу каждый раз, когда сборка не проходила проверку. Поиск и устранение одной регрессии занимали около четырех часов.
Сегодня эту работу выполняет ИИ-агент для программирования в рамках конвейера CI/CD. С помощью инструментов разработчика Chrome для агентов агент проверяет страницу в активном браузере. Благодаря Modern Web Guidance агент пишет исправления, соответствующие современным стандартам веб-платформ. Теперь рабочий процесс автоматически диагностирует и устраняет 90 % неудачных тестов производительности, а время от неудачной проверки до подтвержденного исправления сократилось с четырех часов до 30 минут, включая полную сборку и ручную оценку.
Проблема: разработчик застрял между редактором и браузером
Инженеры WeTV уже использовали инструменты ИИ для написания кода в своей IDE. Эти инструменты могли писать код, но не могли видеть, что он делает после запуска в браузере. Поэтому работа разделилась на две части. Инженеры пишут код в редакторе, а затем переключаются на Chrome, чтобы развернуть, проверить и подтвердить его. Каждое исправление означало, что нужно снова пройти этот цикл вручную.
Разделение больше всего навредило на этапе выпуска. Конвейер непрерывной интеграции и непрерывной поставки WeTV отслеживает производительность каждого выпуска и поддерживает показатель Cumulative Layout Shift (CLS) на уровне 0,1 или ниже. Если сборка пересекала эту линию, конвейер помечал ее, но причину все равно приходилось искать вручную. Разработчику приходилось открывать инструменты разработчика Chrome, записывать трассировку, находить перемещенный элемент, переносить эту находку обратно в редактор, писать исправление и снова запускать проверку. На устранение одной регрессии CLS уходило около четырех часов работы инженеров.
Команде нужен был агент, который мог бы справиться с обеими частями работы: посмотреть на работающую страницу, а затем исправить код в соответствии с известным стандартом.
Решение: подключить агент к браузеру и веб-стандартам
WeTV добавила проверку производительности в процесс запроса на слияние. Когда разработчик открывает запрос на слияние, конвейер CI/CD запускает среду, в которой локально работает ИИ-агент для программирования с двумя возможностями, которых не хватало инструментам IDE команды:
- Инструменты разработчика Chrome для агентов. Запускают сервер Model Context Protocol (MCP) и подключают агента к активному экземпляру Chrome. Агент может записывать трассировки производительности (среди других функций инструментов разработчика Chrome) и проверять, как на самом деле отображается код интерфейса, так же, как это сделал бы разработчик в инструментах разработчика.
- Modern Web Guidance – навык агента, который содержит рекомендации по работе с веб-платформами и данные о совместимости браузеров. Он направляет агента в сторону от устаревших шаблонов и к исправлениям, основанным на современных функциях веб-платформы.
Инструменты разработчика для агентов сообщают агенту, что пошло не так. Modern Web Guidance определяет, как именно это будет сделано.
Реальный пример: сдвиг макета на странице воспроизведения эпизода
Во время одного из запросов на объединение агент запустил инструмент performance_start_trace на странице воспроизведения выпуска на компьютере. В трассировке зафиксирован CLS, равный 0,39, что почти в четыре раза превышает лимит 0,1.
Попросите агента провести диагностику перед редактированием
WeTV не позволяет агенту импровизировать. Запрос, который управляет рабочим процессом, указывает ему диагностировать проблему, прежде чем касаться какого-либо кода, и проверять свои выводы на соответствие Modern Web Guidance, а не полагаться на то, что модель сгенерирует по умолчанию.
Вот пример запроса, который использовала команда WeTV:
Context:
"The CLS (Cumulative Layout Shift) of this page needs inspection. Diagnose
first, then modify the code, do not guess."
Mandatory Execution Steps:
1. Performance Trace: Use Chrome DevTools for agents to run performance traces
on both Desktop and Mobile views.
2. Identify Culprits: Use CLSCulprits insight to pinpoint the exact DOM elements
causing shifts (capture class/id, timing, and score).
3. Use web best practices for performance and CSS to optimize CLS.
4. Multi-Agent Parallelism: Enable parallel agents for efficiency:
- Agent A: Investigate Player/Main Layout SSR placeholders.
- Agent B: Investigate Sidebar Ads, VIP buttons, Tabs, and late-injected
lists.
- Agent C: Investigate Fonts and other minor factors.
Constraint: Each agent modifies only files within its scope to prevent
conflicts.
5. Root Cause Confirmation: Confirm the root cause before applying fixes.
Prioritize reserving space over changing interaction semantics just to fix
CLS.
6. Verification: After modification, re-test CLS via equivalent CSS injection
or local build. Target: CLS < 0.1.
Две части этого запроса несут основную нагрузку. "Сначала диагностируй, потом меняй код" – это правило не позволяет агенту устранять симптомы. На шаге 2 агент получает указание использовать performance_analyze_insight с insightName: 'CLSCulprits', чтобы сообщить точный элемент, время и оценку вместо общего подозрения.
В видео ниже показано, как агент выполняет запрос: ищет в Modern Web Guidance руководство по устранению проблем с CLS с помощью современных веб-функций, а затем использует инструменты разработчика Chrome для агентов, чтобы открыть экземпляр браузера Chrome и записать трассировку производительности.
Такое сочетание диагностики во время выполнения и структурированных рекомендаций позволяет автоматически исправлять сложные сдвиги макета. Вот пример проблемы, исправленной автоматизированным рабочим процессом.
Найдите основную причину
След вел к видеопроигрывателю. WeTV отрисовывает проигрыватель на сервере, но контейнер проигрывателя не резервирует для него высоту. Когда клиент гидратировал страницу, высота контейнера увеличилась, а контент вокруг него сместился.
Примените исправление на основе стандартов
Чтобы исправить это, зарезервируйте место во время отрисовки на стороне сервера, чтобы у контейнера уже была правильная высота до гидратации. Ниже приведен пример исправления, которое агент написал, используя руководство по макетам CSS из Modern Web Guidance.
.play__block--player .play__aside--left {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16/9;
}
После того как агент применил CSS, конвейер перестроил страницу, и агент снова запустил ту же трассировку. Только когда CLS стал меньше 0,1, исправление было передано на проверку специалистам.
Результат: более быстрый выпуск версий и стабильные макеты
Добавив инструменты разработчика Chrome для агентов и Modern Web Guidance в рабочий процесс CI/CD, компания WeTV добилась заметных улучшений в эффективности разработки и стабильности макета:
- Время на отладку и устранение неполадок сократилось на 87 % (с 4 часов до 30 минут).
- 90 % всех повторяющихся регрессий производительности диагностируются и устраняются автоматически.
Инженеры больше не тратят половину рабочего дня на профилирование. Если сборка не проходит проверку, агент читает трассировку, пишет исправление, тестирует его и передает проверенный патч специалисту. Окончательное решение по-прежнему принимают люди, но они начинают с исправления, которое уже прошло проверку, которая не удалась.
Поскольку регрессии CLS исправляются внутри запроса на слияние, они не достигают производства. Это позволяет удерживать показатель CLS ниже целевого значения 0, 1, защищает видимость WeTV в Поиске и устраняет распространенную причину блокировки выпуска на поздних этапах цикла.
Уроки для вашей команды
Настройка WeTV специфична для его стека, но лежащий в ее основе шаблон переносится на большинство команд, которые выпускают релизы на основе производительности:
- Запустите агент, в котором произошел сбой. WeTV запускает агент из запроса на слияние, поэтому никому не нужно замечать неудачную проверку и запускать сеанс вручную.
- Попросите агента провести диагностику, прежде чем вносить изменения. Если вы сначала попросите трассировку и укажете виновника, вы получите исправления, нацеленные на фактический элемент, а не на предположение.
- Сопоставьте данные о времени выполнения со стандартом. Трассировка сообщает агенту, какой элемент переместился. Modern Web Guidance подсказывает, какое исправление соответствует текущей практике платформы.
- Требуйте доказательств. Повторный запуск той же трассировки, которая завершилась неудачей, является доказательством того, что исправление работает. В P2ER используется тот же принцип, который называется правилом обязательной эмпирической проверки.
- Оставьте человека в контуре. Агент проводит исследование, а инженер проверяет исправление, которое уже прошло проверку.
Отзывы и планы на будущее
Специалисты WeTV обнаружили, что сочетание телеметрии в реальном времени из инструментов разработчика Chrome для агентов со стандартизированными правилами в Modern Web Guidance позволило исключить ручной анализ производительности из процесса выпуска, сохранив при этом изменения кода агента в соответствии с текущими стандартами веб-платформы.
"Результаты оказались очень хорошими и с точки зрения скорости, и с точки зрения качества. Выводы диагностики, предоставленные инструментами разработчика Chrome для агентов и Modern Web Guidance, дали нам надежные рекомендации по устранению сложных проблем с макетом. После каждого исправления мы проводим строгую проверку. Текущая доля успешных запросов и стабильность значительно повысили нашу уверенность в выпусках".
— Янцзе Чжэн (Yangjie Zheng), руководитель отдела разработки, WeTV (Tencent)
В дальнейшем команда разработчиков WeTV планирует использовать инструменты разработчика Chrome для агентов и Modern Web Guidance для сквозного тестирования будущих выпусков кода.
Ресурсы
Чтобы настроить аналогичный рабочий процесс, изучите следующие ресурсы: