Современные сайты насыщены медиа: изображения высокого разрешения, видеофоны, анимации. Классический бюджет скорости, основанный на фиксированных порогах (например, «LCP < 2.5 с»), не учитывает нелинейную деградацию при добавлении контента. Инженеры часто сталкиваются с тем, что после запуска новой галереи или видео-блока Core Web Vitals резко падают, а стандартные инструменты не дают ответа, какие именно задержки стали критическими. Традиционные лабораторные тесты (Lighthouse) не отражают реальное разнообразие устройств и сетей, а RUM-данные не предоставляют достаточной детализации для прогнозирования.
В результате компании тратят ресурсы на реактивную оптимизацию, вместо того чтобы предвидеть деградацию и закладывать её в бюджет скорости. Решение — нейросетевая реконструкция бюджета скорости на основе тепловых следов Core Web Vitals и каскадной карты критических задержек.
Тепловые следы — это агрегированные пространственно-временные распределения метрик, собранные с реальных пользователей. Они показывают, как задержки загрузки ресурсов влияют на LCP, INP и CLS в зависимости от позиции элемента на странице, типа устройства и скорости сети. Например, тепловая карта может выявить, что изображения в первом экране дают 60% вклада в LCP, а скрипты аналитики — 30% в INP.
Для сбора таких данных используются:
На основе этих данных строится многомерная матрица «элемент × фаза загрузки × метрика», которая служит входом для нейросети.
Задача реконструкции формулируется как обратная: по наблюдаемым метрикам и таймингам восстановить максимально допустимые задержки на каждом этапе (DNS, TCP, TLS, TTFB, загрузка ресурсов, выполнение JS, рендеринг), чтобы итоговые метрики не превышали целевые. Мы используем глубокую нейронную сеть с архитектурой энкодер-декодер, где энкодер обрабатывает тепловые следы, а декодер генерирует бюджет в виде временных окон для каждого ресурса.
Обучение проводится на исторических RUM-данных с известными исходами. Функция потерь комбинирует ошибку восстановления метрик и штраф за нарушение бюджета. Важно обеспечить репрезентативность данных: разные устройства, сети, география.
Пример архитектуры:
Каскадная карта — это визуализация того, как задержки на разных этапах загрузки влияют на итоговые метрики. Она строится на основе реконструированного бюджета и позволяет увидеть цепочки: например, задержка TTFB увеличивает LCP, что, в свою очередь, может ухудшить INP из-за сдвига времени гидратации.
Карта представляет собой направленный граф, где узлы — этапы загрузки и ресурсы, а рёбра — причинно-следственные связи с весами, отражающими вклад в метрику. Нейросеть обучается предсказывать эти веса на основе тепловых следов.
Пример фрагмента карты для страницы с изображениями:
| Этап | Критическая задержка (мс) | Влияние на LCP | Влияние на INP |
|---|---|---|---|
| TTFB | 200 | Высокое | Среднее |
| Загрузка главного изображения | 400 | Критическое | Низкое |
| Выполнение JS гидратации | 300 | Среднее | Высокое |
| Lazy-load второго экрана | 150 | Низкое | Среднее |
Такая карта позволяет точно определить, какие задержки сокращать в первую очередь.
Отложенная загрузка (lazy-load) часто используется для медиа ниже первого экрана, но при увеличении объёма контента она может непредсказуемо влиять на LCP и INP. Например, если пользователь быстро прокручивает страницу, lazy-load изображения могут загружаться слишком поздно, вызывая сдвиги макета (CLS) и ухудшая INP из-за конкуренции за основной поток.
Наша нейросетевая модель симулирует сценарии с разным количеством медиа и прогнозирует, как изменятся критические задержки. Для этого используется агентное моделирование: каждый ресурс — агент, конкурирующий за пропускную способность и CPU. Модель обучена на исторических данных о загрузке страниц с разным медиа-объёмом и предсказывает нелинейный рост задержек.
Пример прогноза: при добавлении 20 изображений среднего размера (200 КБ каждое) ожидается рост LCP на 15–20% и INP на 10% из-за увеличения времени выполнения JS-обработчиков. Это позволяет заранее заложить в бюджет скорости резерв или выбрать более эффективный формат (WebP/AVIF) и настроить приоритеты.
Рассмотрим два кейса.
Кейс 1: Интернет-магазин с каталогом товаров. После добавления видео-обзоров на карточки товаров LCP вырос с 2.1 до 3.5 с. С помощью нейросетевой реконструкции мы построили каскадную карту и выяснили, что 70% задержки даёт загрузка видео-постеров, которые не были оптимизированы. Решение: использовать ленивую загрузку постеров с низким приоритетом и предзагрузку только для первого экрана. Прогноз модели показал, что это вернёт LCP к 2.3 с даже при росте числа видео на 50%.
Кейс 2: Новостной портал с бесконечной лентой. При увеличении количества изображений в ленте INP ухудшился с 150 до 280 мс. Модель предсказала, что причиной стала конкуренция за главный поток между lazy-load и обработкой скролла. Рекомендация: вынести обработку изображений в Web Worker и использовать `content-visibility: auto`. После внедрения INP стабилизировался на 180 мс.
Чеклист для внедрения:
Нейросетевая реконструкция бюджета скорости на основе тепловых следов Core Web Vitals и каскадной карты критических задержек позволяет перейти от реактивной оптимизации к проактивному управлению производительностью. Прогнозирование деградации при росте медиа-контента даёт возможность заранее принимать архитектурные решения и избегать сюрпризов с Core Web Vitals. Внедрение требует сбора качественных данных и обучения модели, но окупается стабильностью метрик и улучшением пользовательского опыта.
