Лендинг на мобильном: тикер — 39% узлов страницы (446 из 1142). Анимация при этом невиновна #3280

New issue

Open

opened 2026-08-30 10:45:53 +00:00 by bot-backend · 0 comments

bot-backend commented

2026-08-30 10:45:53 +00:00

Collaborator

Замер сделан. Механизм выключался.

Что измерено

Метод: инвалидировать стили всему документу и вызвать синхронный reflow, медиана 15 прогонов. Затем то же со снятым подозреваемым. Мобильная эмуляция 375×812, DPR 2.

состояние	медиана полной перекладки
как есть	7,8 мс
анимация выключена, DOM на месте	8,2 мс
тикер удалён целиком	6,0 мс

вклад анимации: −0,4 мс, то есть ноль в пределах шума;
вклад DOM тикера: 2,2 мс, около 28% стоимости перекладки.

Анимация невиновна, и это было предсказуемо

.tickerTrack анимируется transform: translateX(), .tickerDot — opacity. Обе идут на композиторе и в Style & Layout не попадают по устройству браузера. Плюс есть гейт prefers-reduced-motion.

Так что «бесконечно едущий тикер» как причина 1824 мс — совпадение по виду, а не по механизму.

Виноват объём разметки

узел	узлов
тикер	446
accuracy	200
check	83
objSection	68
остальные девять секций	< 40 каждая
всего на странице	1142

В ленте 40 элементов — 20 сделок, продублированных ради бесшовной прокрутки, по ~11 узлов на элемент. То есть половина этих 446 узлов существует только для склейки цикла.

Границы этого замера — важно

1824 мс я не воспроизвёл и не претендую. Это другая величина: у меня одна принудительная перекладка на нетроттленной машине, у Lighthouse — накопленное за загрузку при четырёхкратном замедлении CPU. Пропорция переносится, абсолютные числа нет.

Что отсюда следует и что нет:

следует: анимацию отключать бессмысленно, экономии не будет;
следует: сокращение разметки тикера снимает около четверти стоимости перекладки;
не следует: что это закроет LCP 3,4 с. Оставшиеся 72% лежат в остальной странице, и их отдельно никто не мерил.

Что можно сделать

Облегчить элемент ленты — 11 узлов на строку это много для «объект · прогноз · факт · расхождение». Оценка S, риска для смысла нет.
Показывать в ленте меньше сделок — 10 вместо 20 уполовинит и оригинал, и дубль. Это продуктовое решение, не техническое: лента сейчас показывает ровно те же 20 строк, что и таблица сверки.
Не делать: трогать анимацию.

Приёмка

После правки повторить ТОТ ЖЕ замер (медиана 15 принудительных перекладок, мобильная эмуляция 375×812) и указать оба числа — до и после
Отдельно посчитать узлы: цель — тикер меньше 20% страницы
Критерий записан ДО правки

Refs: перф-разбор 30.08.2026.

Продолжение перф-разбора от 30.08.2026: «страница не тяжёлая, она дорогая в отрисовке — 1824 мс в Style & Layout против 445 мс на JS». В том разборе подозреваемым назван бесконечный тикер, и автор честно пометил это как непроверенное: «нужен профиль с отключённым тикером, иначе это гадание». Замер сделан. Механизм выключался. ## Что измерено Метод: инвалидировать стили всему документу и вызвать синхронный reflow, медиана 15 прогонов. Затем то же со снятым подозреваемым. Мобильная эмуляция 375×812, DPR 2. | состояние | медиана полной перекладки | |---|---| | как есть | 7,8 мс | | **анимация выключена, DOM на месте** | 8,2 мс | | **тикер удалён целиком** | 6,0 мс | - вклад **анимации**: −0,4 мс, то есть ноль в пределах шума; - вклад **DOM тикера**: 2,2 мс, около 28% стоимости перекладки. ## Анимация невиновна, и это было предсказуемо `.tickerTrack` анимируется `transform: translateX()`, `.tickerDot` — `opacity`. Обе идут на композиторе и в Style & Layout не попадают по устройству браузера. Плюс есть гейт `prefers-reduced-motion`. Так что «бесконечно едущий тикер» как причина 1824 мс — совпадение по виду, а не по механизму. ## Виноват объём разметки | узел | узлов | |---|---| | **тикер** | **446** | | accuracy | 200 | | check | 83 | | objSection | 68 | | остальные девять секций | < 40 каждая | | **всего на странице** | **1142** | В ленте **40 элементов** — 20 сделок, продублированных ради бесшовной прокрутки, по ~11 узлов на элемент. То есть **половина этих 446 узлов существует только для склейки цикла**. ## Границы этого замера — важно **1824 мс я не воспроизвёл и не претендую.** Это другая величина: у меня одна принудительная перекладка на нетроттленной машине, у Lighthouse — накопленное за загрузку при четырёхкратном замедлении CPU. Пропорция переносится, абсолютные числа нет. Что отсюда следует и что нет: - следует: анимацию отключать бессмысленно, экономии не будет; - следует: сокращение разметки тикера снимает около четверти стоимости перекладки; - **не следует**: что это закроет LCP 3,4 с. Оставшиеся 72% лежат в остальной странице, и их отдельно никто не мерил. ## Что можно сделать 1. **Облегчить элемент ленты** — 11 узлов на строку это много для «объект · прогноз · факт · расхождение». Оценка S, риска для смысла нет. 2. **Показывать в ленте меньше сделок** — 10 вместо 20 уполовинит и оригинал, и дубль. Это продуктовое решение, не техническое: лента сейчас показывает ровно те же 20 строк, что и таблица сверки. 3. Не делать: трогать анимацию. ## Приёмка - [ ] После правки повторить ТОТ ЖЕ замер (медиана 15 принудительных перекладок, мобильная эмуляция 375×812) и указать оба числа — до и после - [ ] Отдельно посчитать узлы: цель — тикер меньше 20% страницы - [ ] Критерий записан ДО правки Refs: перф-разбор 30.08.2026.