Анимация загрузки страницы. Простой способ снизить отказы.

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

Но что делать в ситуации, когда у вас нет возможности ускорить загрузку сайта, а задержать пользователя как-то надо?

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

Как понять, что нужно установить анимацию загрузки страниц

Перейдите в Яндекс Метрику. Если вы еще не установили Метрику на сайт, то вот инструкция, как это сделать.

Перейдите в Отчеты > Мониторинг > Время загрузки страниц.

Меню метрики

В таблице с данными обратите внимание на показатель “ Время до загрузки DOM”. Оптимальный показатель - не более 5 секунд, лучше 1-3 секунды, если это возможно.

Отчет время загрузки страниц

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

Если показатель в пределах 5 секунд, то загрузчик, скорее всего, не сделает хуже. Однако, вы можете установить и проверить собственные ощущения. Также вы можете сделать тестирование, основываясь на показателе отказов и глубине просмотра.

Как установить анимацию загрузки страницы

Чтобы установить такой, вам всего-лишь нужно будет скопировать код ниже в самое начало тега <body> (желательно сразу после открывающего тега), либо внутри тега <head>.

<script>
  // ссылка на гифку
  var preloaderLink = 'https://thumbs.gfycat.com/SeparateFeistyGoa-size_restricted.gif';
  
  // цвет фона
  var preloaderBackground = 'white';
  
  var preloaderBlock = document.createElement('div');
  preloaderBlock.style.position = 'fixed';
  preloaderBlock.style['z-index'] = '99';
  preloaderBlock.style.display = 'flex';
  preloaderBlock.style['align-items'] = 'center';
  preloaderBlock.style['justify-content'] = 'center';
  preloaderBlock.style['background-color'] = preloaderBackground;
  preloaderBlock.style.width = '100vw';
  preloaderBlock.style.height = '100vh';
  preloaderBlock.style.transition = 'opacity 1s';
  preloaderBlock.style.opacity = '1';
  document.body.prepend(preloaderBlock);
  var preloaderImg = document.createElement('img');
  preloaderImg.src = 'https://thumbs.gfycat.com/SeparateFeistyGoa-size_restricted.gif';
  preloaderBlock.prepend(preloaderImg);
  window.addEventListener('load', ev => {
      preloaderBlock.style.opacity = 0;
      setTimeout(()=> {
        preloaderBlock.style.display = 'none';
      }, 710)
      document.body.style['overflow-y'] = 'scroll';
  })
</script>

Если вам не подходит картинка из моего примера, то можете выбрать свою на любых стоковых сервисах, например Preloaders.net.

Покажу, как использовать анимированные картинки на примере этого сервиса.

После того, как вы перейдете по ссылке, то попадете на каталог бесплатных анимаций.

preloaders.net / бесплатные

Нажмите на понравившейся анимации правой кнопкой мыши и выберите пункт “Копировать URL картинки”.

Меню копирования

Вставьте ссылку в параметр preloaderLink в коде выше (2-я строка) вместо текущей.

Если нужно поменять цвет фона для экрана загрузки, то поменяйте значение в параметре preloaderBackground (5-я строка), вместо white. Вы можете определить цвет фона как по названию, так и с помощью HEX кода цвета.

Выводы

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

Если вдруг у вас возникли трудности с установкой загрузчика на ваш сайт, то буду рад помочь: d@pantext.ru.

Анимация загрузки страницы. Простой способ снизить отказы.

Как понять, что нужно установить анимацию загрузки страниц

Как установить анимацию загрузки страницы

Выводы

Читайте также