Конструкторы сайтов удобны скоростью сборки, но за это часто приходится платить производительностью. Типичная ситуация: дизайнер добавляет эффектный элемент, а Google PageSpeed Insights мгновенно отправляет мобильную версию сайта в «красную зону».
Мы столкнулись с этим при оптимизации сайта инженерной компании. Задача стояла простая: реализовать бесконечную бегущую строку с перечнем услуг, которая должна быть зафиксирована под шапкой. Штатное решение Tilda (блок DV13) справлялось с визуальной частью, но создавало недопустимую нагрузку на браузер.
Скрипты стандартного блока тормозили отрисовку (LCP и TBT), из-за чего мобильная версия получала низкие баллы, а десктоп балансировал в «желтой зоне».
В этом материале делимся готовым решением: как мы заменили тяжелый JS-скрипт на легкую CSS-анимацию, сократили время загрузки и сохранили функционал.
Проблема штатного решения
Изначально мы использовали стандартный блок бегущей строки с фиксированным позиционированием. Анализ через DevTools показал, что пересчет координат движения через JavaScript вызывает постоянные перерисовки (layout trashing). Для нагруженного контентом лендинга это критично.
Мы приняли решение полностью отказаться от штатного блока и написать кастомный HTML/CSS код.
Реализация для Desktop
Для десктопной версии мы создали контейнер, который жестко позиционируется под шапкой сайта. Вместо JS-вычислений движение текста реализовано через свойство transform: translateX, которое обрабатывается графическим процессором и не нагружает основной поток.
Использовали свойство will-change: transform, чтобы заранее сообщить браузеру о планируемых изменениях.
Код решения (HTML + CSS):
HTML
<style>
/* Настройки контейнера */
.custom-marquee-container {
background-color: #006399; /* Брендовый цвет */
overflow: hidden;
white-space: nowrap;
position: fixed;
top: 145px; /* Корректируем отступ под высоту шапки */
left: 0;
padding: 8px 0 9px 0;
width: 100%;
z-index: 980;
}
/* Трек анимации */
.custom-marquee-track {
display: inline-block;
/* 350s обеспечивает плавное, ненавязчивое движение */
animation: marquee 350s linear infinite;
will-change: transform;
}
/* Логика движения: СЛЕВА НАПРАВО */
@keyframes marquee {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
/* Типографика */
.custom-marquee-item {
display: inline-block;
color: #ffffff;
font-family: 'TildaSans', Arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
font-weight: 300;
margin-right: 60px; /* Отступ между фразами */
}
/* Скрываем на мобильных устройствах (breakpoint 980px) */
@media screen and (max-width: 980px) {
.custom-marquee-container {
display: none !important;
}
}
</style>
<div class="custom-marquee-container">
<div class="custom-marquee-track">
<span class="custom-marquee-item">· ПОЛНЫЙ СПЕКТР УСЛУГ В ОБЛАСТИ ИНЖЕНЕРНЫХ СИСТЕМ ·</span>
<span class="custom-marquee-item">· ПОДРОБНЫЙ РАСЧЕТ СМЕТЫ ·</span>
<span class="custom-marquee-item">· ФИКСИРОВАННАЯ СТОИМОСТЬ ·</span>
<span class="custom-marquee-item">· ЭСТЕТИКА МОНТАЖА ·</span>
<span class="custom-marquee-item">· ГАРАНТИЯ КАЧЕСТВА ·</span>
</div>
</div>
Адаптация под Mobile
Просто сжать десктопную версию было нельзя – на мобильных устройствах высота шапки и отступы отличаются. Мы создали отдельный блок кода для экранов уже 981px.
Здесь мы уменьшили размер шрифта до 12px и сократили отступы между фразами до 40px, чтобы строка оставалась читаемой, но не занимала половину экрана. Скорость анимации увеличили (200s вместо 350s), так как длина трека на мобильных меньше.
Код для мобильной версии:
HTML
<style>
/* Показываем только если ширина экрана меньше 980px */
@media screen and (min-width: 981px) {
.mobile-marquee-wrapper {
display: none !important;
}
}
.mobile-marquee-wrapper {
display: block;
background-color: #006399;
overflow: hidden;
white-space: nowrap;
position: fixed;
top: 110px; /* Отступ под мобильную шапку */
left: 0;
width: 100%;
z-index: 980; /* Слой ниже меню */
padding: 8px 0 9px 0;
}
.mobile-marquee-track {
display: inline-block;
animation: marquee-mobile 200s linear infinite;
will-change: transform;
}
@keyframes marquee-mobile {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
.mobile-marquee-item {
display: inline-block;
color: #ffffff;
font-family: 'TildaSans', Arial, sans-serif;
font-size: 12px;
text-transform: uppercase;
font-weight: 300;
margin-right: 40px;
}
</style>
<div class="mobile-marquee-wrapper">
<div class="mobile-marquee-track">
<span class="custom-marquee-item">· ПОЛНЫЙ СПЕКТР УСЛУГ В ОБЛАСТИ ИНЖЕНЕРНЫХ СИСТЕМ ·</span>
</div>
</div>
Нюанс с перекрытием (z-index)
При использовании position: fixed важно следить за контекстом наложения. У нас возник конфликт с плашкой меню. Чтобы бегущая строка не перекрывала навигацию при скролле, мы явно задали z-index для родительского блока шапки.
CSS
<style>
/* Фиксация шапки поверх строки */
#rec1219352071 {
position:fixed;
width: 100%;
z-index: 1000; /* Должен быть выше, чем 980 у строки */
}
</style>
Результат
Замена стандартного блока на 50 строк чистого CSS дала ощутимый прирост производительности:
-
Mobile: Переход из красной зоны в уверенную желтую (прирост 15-20 пунктов).
-
Desktop: Стабильная зеленая зона (90+ баллов).
-
UX: Анимация стала визуально плавнее, исчезли «фризы» при скролле страницы.
Посмотреть, как работает данное решение в реальных условиях (оценить плавность анимации и скорость загрузки страницы), можно на нашем проекте: Amikta.ru.
Этот опыт подтверждает: даже работая в конструкторе, не стоит бояться внедрять кастомный код. Иногда несколько строк CSS работают эффективнее, чем целая библиотека скриптов.
Комментарии