Содержание · 9
Core Web Vitals ломаются не в коде, а в макете. Разбираем, какие дизайнерские решения дороже всего обходятся по производительности и чем их заменить.
Три показателя и что их ломает
Core Web Vitals измеряют три вещи: скорость появления основного контента, стабильность вёрстки и отзывчивость на действие. Все три чаще всего ломаются решениями, принятыми в макете, а не ошибками разработчика.
Шрифты
Каждое дополнительное начертание — это отдельный файл в критическом пути. Четыре гарнитуры по три начертания дают двенадцать файлов и заметную задержку.
Практичнее взять одну-две гарнитуры с вариативной осью: один файл покрывает весь диапазон весов.
- Не больше двух-трёх гарнитур на проект.
- Вариативные шрифты вместо набора статических начертаний.
- Сабсет только нужных языков (latin + cyrillic).
- font-display: swap и подобранный по метрикам фолбэк.
- preload для двух критических файлов, не для всех.
Изображения
Изображение первого экрана почти всегда является элементом LCP. Оно должно быть в современном формате, точного размера под вьюпорт и загружаться приоритетно.
Все остальные изображения — ленивые. И у каждого должны быть заданы ширина и высота, иначе вёрстка прыгает при загрузке.
Анимации
Дорогие по производительности анимации — те, что меняют геометрию: ширину, высоту, отступы, положение через top/left. Дешёвые — transform и opacity, которые обрабатываются композитором.
Особенно опасны эффекты, привязанные к скроллу и пересчитывающие layout на каждом кадре: они напрямую бьют по отзывчивости.
Стоимость анимаций
Core Web Vitals ломаются в макете, а не в коде: тяжёлый первый экран и шрифт, подменяющийся с задержкой, — решения дизайнера.
Где дизайн и скорость расходятся
Скорость страницы почти всегда упирается в решения, принятые на этапе дизайна, а не вёрстки: полноэкранная съёмка в первом экране, четыре гарнитуры, видеофон, карта на главной, встроенный виджет. Каждое из них можно оптимизировать, но нельзя сделать бесплатным — и лучший выигрыш даёт отказ, а не сжатие.
Полезно считать бюджет: сколько килобайт отводится на первый экран и что в него входит. Когда бюджет назван заранее, разговор об очередном виджете превращается из вкусового в арифметический.
Что даёт наибольший выигрыш
- Правильные размеры изображений под слот — типичная страница отдаёт кадры вдвое крупнее нужного.
- Современный формат и ленивая загрузка всего ниже первого экрана.
- Сокращение числа начертаний: каждое — отдельный файл, и не все используются.
- Отказ от сторонних встраиваний на главной: чужой виджет тянет чужой код и чужие запросы.
- Резервирование места под элементы: сдвиг вёрстки не про скорость, но ощущается как медлительность.
Захват прокрутки и другие вмешательства
Скролл-джекинг — приём, при котором страница перехватывает прокрутку и двигается не так, как ждёт человек: одно движение колеса перелистывает целый экран, прокрутка тормозится «плавностью» или ведёт горизонтально вместо вертикальной. Замысел понятен — управлять темпом показа, как в презентации. Цена тоже понятна, но платят её не авторы: у прокрутки нет единого шага, она разная у мыши, тачпада и телефона, и перехват ломает моторику, выученную годами.
Отдельно страдают те, кому важна точность: люди с тремором, с трекболом, с клавиатурной навигацией. Страница с перехваченной прокруткой обычно не отвечает и на Page Down. Если темп показа действительно нужен, его задают анимацией появления по мере прокрутки — она подчиняется движению человека, а не заменяет его.
Что ещё вмешивается в прокрутку
- Плавная прокрутка со сглаживанием: добавляет задержку к каждому движению и раздражает тем сильнее, чем быстрее человек читает.
- Липкая шапка выше 15% высоты экрана: она не мешает прокрутке, но отнимает то, ради чего прокручивают.
- Автопрокрутка к якорю без учёта липкой шапки — заголовок оказывается под ней, и это видно на каждом переходе по оглавлению.
- Подгрузка при прокрутке без стабильной высоты: страница дёргается, и это прямо портит показатель сдвига вёрстки.
scroll-behavior: smoothглобально — то же сглаживание, только средствами браузера; его отключают приprefers-reduced-motion.
Что в итоге
Скорость сайта закладывается в макете: количество шрифтов, вес героя и тип анимаций решают почти всё.
Договоритесь о бюджете производительности до начала дизайна — тогда не придётся выбирать между красотой и показателями после запуска.
Коротко
- Что в дизайне сильнее всего замедляет сайт?
- Изображения без заданных размеров и современных форматов, шрифты без ограничения набора символов и анимация при прокрутке. Первые два решаются на этапе макета, третье — отказом от эффекта.
- Сколько шрифтов можно позволить себе на сайте?
- Обычно два семейства и три-четыре начертания. Каждое начертание — отдельный файл, который грузится до отрисовки текста; кириллица и латиница считаются отдельно.
- Влияет ли скорость на дизайн-решения или наоборот?
- Наоборот: скорость — следствие дизайнерских решений. Макет определяет, сколько изображений, шрифтов и анимаций окажется на странице, и разработчик может лишь смягчить последствия.
Тренды веб-дизайна 2027
Крупная типографика, честная сетка, возвращение плотности и тихая анимация. Разбираем, куда движется дизайн сайтов, и показываем, как эти приёмы выглядят на практике.ДальшеЧитайте также
Посмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…