De__nis
@De__nis
just_dev

Дергается скролл на на телефоне на комп версии прокрутка нормальная?

Дергается скролл на на телефоне на комп версии прокрутка нормальная
Сайт
Подскажите что делать пожалуйста
  • Вопрос задан
  • 1946 просмотров
Решения вопроса 1
@Flying
В первую очередь вам необходимо профилировать нагрузку на отрисовку через профайлер, "дёргание" означает просадку по fps, а просадка по fps означает что задачи основного потока выполнения не влезают в 16ms чтобы обеспечить 60fps.

Если открыть сайт в Firefox, то он сразу указывает на возможную причину: "This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Perform..."

Быстрый просмотр показывает что это действительно так - у вас подключен jquery.sticky.js, созданный аж в 2012-м и реализующий то, что сейчас делается через position: sticky или IntersectionObserver путём навешивания обработчика на событие scroll. Это приводит к тому что на каждое движение страницы запускается JavaScript обработчик и создаёт изменения в DOM которые приводят к необходимости пересчёта стилей, а то и layout'а.

Изменения в DOM - в целом довольно дорогая операция, а уж пересчёт layout'а - тем более, так что логично что на более слабых CPU мобильных устройств это не влезает в бюджет по времени.

В целом же причина довольно низкой производительности в том что вы пошли по пути наименьшего сопротивления, взяв готовую тему для WordPress. Они обычно сильно перегружены скриптами из-за желания создать их гибкими и универсальными, что, естественно, работает во вред производительности.

Таким образом начните с замены jquery.sticky.js на нормальное решение, а потом перепроверяйте результат через профайлер и смотрите что ещё вы можете выбросить. Ваша страница визуально явно не требует тех 900кб скриптов что вы на неё грузите.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Проверьте много ли у вас елементов с абсолютным позиционированием, чаще всего их избыток - причина дергания на мобильных девайсах.
Ответ написан
Комментировать
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Я бы начал с удаления ошибок в консоли...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы