Бюджеты производительности для маркетинговых сайтов с высоким воздействием

Маркетинговые сайты конкурируют не только по информации, но и по ощущениям. Наша задача — предоставить оба аспекта, не обременяя мобильные сети. Мы устанавливаем бюджеты заранее: LCP, INP, общий вес JS и самые крупные медиа-ресурсы

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

Тяжёлые визуалы загружаются постепенно. Герой-сцены отложены до первого отрисовки; предпочтения prefers-reduced-motion полностью отключают ненужную анимацию

• Blurhash или заполнители с доминирующим цветом для главных медиа
• WebGL и Spline только после бездействия или пересечения
• Никакого автозапуска видео со звуком; никогда
• Подмножества шрифтов по маршруту, а не одна семья 800KB

Мы измеряем на реальных устройствах, а не только в Lighthouse в CI. Результаты лаборатории — это порог, а данные из поля — истина

Инструменты, такие как Web Vitals, предоставляют данные RUM. Мы отслеживаем опыт P75, чтобы убедиться, что большинство пользователей получает быстрый сайт

Когда бюджеты соскальзывают, мы жертвуем — меньшими текстурами, меньшим количеством одновременных эффектов, более короткими видео‑циклами — вместо того, чтобы тихо доставлять медленную страницу

Производительность — это функция. Сайт, который выглядит красиво, но загружается за десять секунд, потеряет посетителей до того, как они увидят дизайн