💡 Адаптивы на Тильде: как брейкпоинты влияют на скорость сайта?

О влиянии брейкпоинтов на производительность я предполагал ещё давно, но никак не доходили руки это проверить. Спешу поделиться с вами наблюдениями: каждый новый адаптив увеличивает длительность отрисовки страницы на 20%.

▫️ Почему так происходит?
Когда мы задаём настройки элементов на определенном брейкпоинте, каждое свойство записывается в код определенным образом. Основные настройки — размеры, координаты и состояние элемента помещаются в специальные data-атрибуты, которые достаются алгоритмами Тильды при отрисовке страницы и преобразуются в атрибут style.

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

Чтобы проверить это на практике, я замерил производительность странички из 15 Zero-блоков, поочередно удаляя из неё брейкпоинты. Тестирование проводилось через Lighthouse при замедлении процессора 4x и низкой скорости 4G.

▫️ Что показало тестирование?
Я замерил три ключевые метрики: размер страницы, LCP и время до загрузки DOM. Получились такие результаты:
1. Размер страницы: каждый новый брейкпоинт добавлял ~150 КБ к самой странице (примерно 20% от её объёма)
2. LCP: время отрисовки самого крупного элемента увеличивалось на ~0,3 секунды с каждым новым брейкпоинтом, причем на мобильных эта разница оказалась заметнее — почти полсекунды.
3. DOMContentLoaded: корреляция минимальна, рост времени до срабатывания события составил всего 3-5% (не более 0,1 с)

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

▫️ Что это значит для нас?
Адаптивы действительно увеличивают длительность отрисовки страниц, так что я рекомендую добавлять их только при необходимости. Это особенно заметно, если на странице много блоков — новые брейкпоинты могут заметно тормозить сайт, снижая конверсию и SEO-показатели.

В своих проектах я использую 3-4 брейкпоинта и в принципе не верстаю планшетную версию, а заменяю её компьютерной с обратным масштабированием с помощью расширенного автоскейла. Это помогает ускорить загрузку сайта и сократить время на поддержку уникальных блоков.

А как у вас с адаптивами? Напишите, какие используете в проектах) 🔥

Максим Постников | Дизайн, Тильда и модификации