Проблема с залипанием блоков при скролле на мобильных устройствах

Кейс по выявлению и устранению проблемы на моем сайте, связанной с некорректной версткой и залипанием блоков на некоторых страницах при прокрутке на мобильных устройствах.

Эта история произошла со мной несколько дней назад. Мой сайт osipenkov.ru работает на WordPress, а часть страниц создана с использованием плагина-конструктора WPBakery Page Builder. Он позволяет создавать сложный, адаптивный дизайн веб-страниц с помощью визуального интерфейса Drag-and-Drop (перетаскивание) без необходимости написания кода.

Поскольку около 90% времени я работаю с osipenkov.ru на компьютере (пишу статьи, обновляю контент, плагины и редактирую блоки), я даже не предполагал, что на сайте есть серьезная проблема на мобильных устройствах, которая сильно ухудшает его конверсию. Но обо все по порядку.

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

 

Отфильтровав визиты по достижению цели Ecommerce: добавление в корзину, я начал просматривать записи. И обнаружил неприятную проблему. Оказалось, что после добавления товара в корзину пользователя перенаправляло на страницу корзины (cart), а затем на страницу оформления заказа (checkout), где он не мог ничего сделать. Прокрутка страницы для перехода к следующему шагу оплаты была недоступна. Лишь спустя некоторое время (3-5 секунд) возможность прокрутки появлялась, и посетитель мог продолжить действия. Но к этому времени некоторые пользователи уже покидали сайт и не оплачивали заказ.

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

 

Самое интересное, что такое поведение наблюдалось только на мобильных устройствах и только на устройствах Apple (iOS). Причем из разных браузеров - Chrome, Safari, Opera и т.д. На компьютере же все работало корректно - без залипаний, остановок и блокировок. Именно поэтому я долго не мог определить причину проблемы. Добавлений товаров в корзину было много, а вот покупок - нет. Удивительно, но никаких жалоб о существующей проблеме мне в онлайн-чат от посетителей не поступало, хотя он был всегда активен.

Поскольку я давно работаю с WordPress и примерно представляю, где может быть проблема, первым делом я начал обновлять все установленные плагины, а также поочередно отключать некоторые из них, чтобы понять, из-за чего возникает это залипание. Возможно, дело в онлайн-чате Talk-Me, который не дает странице прогрузиться до того, как сам загрузиться? Или в баннере в верхней части страницы? А может быть, какие-то плагины конфликтуют друг с другом?

Проблема оказалась распространенной, но не такой простой, как казалось вначале. Многие пользователи (разработчики) жаловались создателям плагинов-конструкторов вроде WPBakery Page Builder, Elementor и им подобных. Вот несколько тем, которые были созданы за последние 5-6 лет (проблема была известна давно и продолжает «ломать» сайты до сих пор):

• Scrolling bug: page on mobile phones is jumping #11012
• Help! Website scrolling getting stuck on mobile
• iOS/Safari scroll and menu issues after optimization
• Issue with scrolling down on mobile

Один из пользователей на форуме написал, что это классическая и раздражающая проблема с прокруткой на мобильных устройствах! И что он сталкивался с этим много раз. Проблема почти всегда вызвана конфликтующими CSS или JavaScript, которые приводят к неправильному расчету высоты страницы на мобильном устройстве.

Он привел пошаговую инструкцию того, как это можно попробовать исправить на WordPress:

• добавление дополнительного CSS (пример, к себе не копируйте!):

• тестирование конфликтующих плагинов:

Попробовал, но не помогло. Тогда я стал проверять каждый скрипт по очереди, беря его название из консоли разработчика (вкладка Source):

И вставляя сам код в нейросеть, чтобы получить от нее ответ, нужно ли удалять этот код или он является системным (важным).

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

Asset CleanUp - это популярный плагин для оптимизации скорости загрузки сайтов на WordPress. Его главная задача - «хирургически» точно удалять ненужные файлы стилей (CSS) и скрипты (JavaScript) с конкретных страниц, чтобы сайт загружался быстрее.

К сожалению, ни обновление плагинов до последних версий (включая WPBakery Page Builder), ни поочередное отключение и оптимизация не дали нужного результата. Что-то мешало сайту работать правильно...

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

С его помощью я нашел еще несколько ошибок, а также обновил версию PHP с 8.2.29 на 8.4.14.

К сожалению, это тоже не помогло... Оставался запасной вариант - попробовать проверить саму тему сайта. Может быть конфликт связан именно с набором скриптов и файлов, которые предоставляются вместе с ней.

Те, кто работал с WordPress, знают, что в нем по умолчанию предоставляется несколько тем на выбор: Twenty Twenty-Five, Twenty Twenty-Four, Twenty Twenty-Three и Twenty Twenty-Two.

И в этих темах присутствует минимальный набор плагинов и скриптов. Они легкие, простые и годятся для тестирования.

Я решил проверить эту версию, сменив текущую тему моего сайта Marketing на стандартную. И тут же, к моему огромному удивлению, «залипание» бесследно пропало.

Таким образом, я получил два неопровержимых доказательства:

1. проблема возникает на некоторых страницах (Главная и Оформление заказа), что указывает на конфликт с конкретным элементом;
2. при переключении на стандартную тему дефект полностью исчезает.

Вывод очевиден: источник неполадок - текущая тема (или один из ее элементов). Мое предположение подтвердили и разработчики плагина-конструктора WPBakery Page Builder, которые любезно согласились мне помочь, так как я использую официальную лицензию 😉

Далее я вернул свою тему назад и стал поочередно проверять каждый блок на главной странице. Через некоторое время я дошел до последнего элемента с формой и просто отключил его:

И снова приятный сюрприз... Проблема с залипанием на главной странице исчезла. Задержки в 1-2 секунды больше не было. Страница загружалась практически мгновенно, и с мобильного устройства можно было начинать скроллинг сразу, незаметно для глаза.

Какой вывод можно сделать из этого кейса? Во-первых, несмотря на то что в Интернете встречались похожие случаи и примеры ошибок, они не помогли точно определить причину проблемы на моем сайте. Да, они позволили сузить круг проверок и тестов, но не помогли устранить саму причину.

Во-вторых, на сайте osipenkov.ru я использую премиум-тему, которую приобрел в 2019 году на themeforest.net. Сейчас она уже не поддерживается и не обновляется, что является серьезной проблемой. Кроме того, в теме используется достаточно сложная структура JS и CSS. Поскольку она имеет собственные обработчики прокрутки, они могут конфликтовать с другими плагинами, из-за чего на некоторых устройствах возникает эффект «залипания». Тот факт, что проблема проявлялась только на отдельных страницах, позволяло предположить, что это результат сочетания скриптов и определенного элемента конструктора страниц. В итоге так и оказалось.

И, наконец, даже чат-боты и нейросети, которые помогали мне в процессе решения этой проблемы, не смогли точно определить ее причину. Их советы носили достаточно поверхностный характер и во многом повторяли то, что уже было известно. Я обращаю на это внимание потому, что сегодня многие специалисты чрезмерно полагаются на новые IT-технологии, забывая, что экспертность, накопленную годами, пока не может заменить ни один чат-бот. По крайней мере, в ближайшей перспективе.

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

И это относится не только к подобным техническим задачам, но и к рекламе и аналитике. Хорошего дня!