Skip to main content
flicker

A/B-тестирование: что такое фликер-эффект?

ВРЕМЯ ЧТЕНИЯ
4 минуты
Автор
Gilyana
Gilyana Akuginova
Контент-маркетолог Kameleoon, Гиляна анализирует отзывы наших клиентов и консультантов, а также делится новыми практиками в области оптимизации конверсии.
Поделиться

Фликер-эффект (flicker effect), который также называют FOOC (Flash of Original Content), можно наблюдать, когда посетитель заходит на сайт, где проводится A/B-тест. Длится он не более нескольких секунд, но может оказывать существенное влияние на поведение посетителей и на результаты Ваших A/B-тестов.

Что есть фликер-эффект в контексте A/B-тестирования?

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

Effet flicker

Исходная версия => Вариация = Фликер-эффект в действии 

Фликер-эффект может длится от 100 миллисекунд до нескольких секунд (время обновления браузера), когда как посетителям нужно лишь 13 миллисекунд, чтобы воспринять то или иное изображение. Речь идет об очень коротких промежутках времени, но это появление может оказать нежелательный эффект на результаты Ваших A/B-тестов.

Каковы последствия фликер-эффекта?

Пользовательский опыт ухудшается

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

Результаты теста будут ложными

С фликер-эффектом посетители, которые заметили, что на Вашем сайте проводится тест, могут поменять свое поведение. Когда как любой A/B-тест должен позволить изучать поведение и реакции посетителей в их привычном контексте. Если же это не так, то результаты A/B-теста не являются репрезентативными в том, что касается привычек и предпочтений посетителей, а Вы рискуете принять неправильные решения.

Откуда появляется фликер-эффект?

С решением A/B-тестирования типа client-side все модификации теста применяются с помощью скрипта на каждой странице, где тест проводится. Скрипт – это программа (или кусочек программы), которая позволяет осуществлять предопределенные действия, когда страница загружается или когда посетитель взаимодействует с сайтом. Со стороны клиента мы обычно используем скрипты JavaScript. Во время A/B-теста именно скрипт, загруженный браузером, позволяет применять изменения к Вашему сайту, чтобы посетители видели разные вариации. Фликер-эффект может проявляться, если загрузка этих элементов занимает слишком много времени. А еще если скрипт установлен в неправильном месте.

Важно знать: если Ваше решение для A/B-тестирования предлагает поддержку server-side, то нет необходимости беспокоиться о фликер-эффекте: его просто не существует в таком случае.

Многие элементы могут замедлять загрузку Вашего сайта, и Вы можете с этим бороться с помощью нескольких мер оптимизации.

  • Время загрузки сайта

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

  • Местонахождение скрипта

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

  • Размер скрипта очень важен

Ваш скрипт A/B-тестирования может содержать несколько тестов, а некоторые могут быть слишком устаревшими или бесполезными для теста, который Вы проводите в момент Т. Удаляя ненужные тесты, Вы облегчаете скрипт, который в свою очередь будет загружаться быстрее.

  • Синхронный или асинхронный скрипт

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

  • Использование диспетчера тегов

Диспетчеры тегов позволяют легко управлять тегами (внедрение, безопасность данных и т.д.). Тем не менее, рекомендуется интегрировать скрипт напрямую в код HTML, так как в некоторых случаях это может Вам помешать действовать по порядку загрузки скриптов, установленному диспетчером.

  • Использование библиотеки on-site, а не версии, интегрированной в код платформы

Библиотека jQuery – это библиотека JS, используемая для упрощения процесса написания скриптов. Тем не менее, рекомендуется использовать библиотеку, интегрированную в код платформы, потому что она загрузится до скрипта, что позволит уменьшить размер и ускорить загрузку.

  • Использование CDN (Content Delivery Network)

CDN – это совокупность серверов, расположенных в разных местах, позволяющая увеличить скорость загрузки сайта. Используя CDN, Вы уменьшаете шансы возникновения фликер-эффекта, так как Ваш сайт загрузится гораздо быстрее. В конце концов, фликер-эффект зависит также от качества кода программы и технологий, которые Ваше решение для A/B-тестирования использует.

Например, Kameleoon внедряет некоторые меры для улучшения, чтобы бороться с фликер-эффектом.

  • Только необходимые данные загружаются. Например, если Ваш A/B-тест не требует никакого продвинутого таргетирования, то нет необходимости загружать все критерии таргетирования.

  • Kameleoon не обращается ни к каким внешним библиотекам (jQuery), что позволяется уменьшить размер скрипта.

  • Визуальный редактор Kameleoon позволяет оптимизировать код Ваших модификаций для того, чтобы не создавать ненужные команды JS.

  • Новый скрипт anti-flickering позволяет браузеру замечать присутствие всех элементов на странице в реальном времени. Алгоритмы Kameleoon, таким образом, способны модифицировать незамедлительно элементы, которые только что появились в коде HTML, и гарантировать отображение Ваших A/B-тестов и персонализации для Ваших посетителей без фликер-эффекта.

cta ru ai
Gilyana
Gilyana Akuginova
Контент-маркетолог Kameleoon, Гиляна анализирует отзывы наших клиентов и консультантов, а также делится новыми практиками в области оптимизации конверсии.
Topics covered by this article