Preloader для сайта

Оглавление

• Preloader — плюсы и минусы
  • Зачем нужен Preloader на типовых сайтах
  • Почему Preloader не нужен
• Устанавливаем Preloader
• Итог

Один из моих проектов был насыщен медиа-контентом. Это был сайт игровой тематики, сам шаблон состоит из графики, подключены несколько JS скриптов и библиотек. Помимо прочего сами статьи содержат в себе изображения, видео из ютуба и т.д… Скорость загрузки некэшированных страниц в среднем составляла 2 — 3 секунды. После кэширования отдача страниц происходила за 0.70 — 1.5 секунды.

До кэширования:

После кэширования:

Google Pagespeed оценил мой сайт для мобильных версий в 59 баллов, для PC в 95. Причем основной проблемой стало отсутствие ленивой загрузки изображений. Даже на телефоне в сети 3G, сайт отдавался достаточно быстро. Однако я решил попробовать применить один прием, который не позволит посетителю сайта увидеть страницу до того как она загрузилась. Давайте разберем все плюсы и минусы, как вижу их я.

#

Preloader — плюсы и минусы

Вообще Preloader обычно делают для Progressive Web Applications (PWA) или Single Page Application (SPA). На обычных, типовых сайтах, Preloader вещь не частая. Давайте разберем, зачем нужен и нужен ли он вообще для типовых сайтов.

#

Зачем нужен Preloader на типовых сайтах

Основная причина — подгрузка контента. Preloader будет отображать загрузку страницы и отдаст её посетителю только тогда, когда все её элементы будут загружены. В итоге пользователь не увидит страницу, на которой еще не догрузились изображения, видео и т.д…

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

#

Почему Preloader не нужен

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

1. Начнем с того, что пользователю может быть все равно, загрузился контент на странице или нет. Возможно ему важно сразу физически перейти на страницу и подождать полной загрузки нужной ему информации самостоятельно.
2. Далее, работая для каждой страницы, Preloader может начать вызывать отрицательные чувства у посетителя. Даже если сделать красивую и приятную анимацию, добавить эффект fadein, продумать цветовую гамму — все равно, путешествуя по страницам вашего сайта, Preloader может послужить негативным решением проблемы загрузки контента.

Можно понять полезен ли Preloader для вашего сайта. Для этого необходимо провести A/B тесты. Например включать Preloader для не четных месяцев и выключать для четных. После наблюдать за посещаемостью, за процентом отказов, времени проведенном на сайте, глубины просмотров и отзывами юзеров.

#

Устанавливаем Preloader

Все довольно просто. Для начала, после открывающего тэга body, пишем разметку:

<div id="preloader">
    <div class="pre_wrapper">
        <span class="icon_animate">
            <small>Загружаю</small>
        </span>
    </div>
</div>

Основной блок с идентификатором #prelodader будет заполнять весь экран. Внутри нужно расположить то, что увидит посетитель до полной загрузки страницы. В нашем случае это будет блок .pre_wrapper внутри которого разместим анимационную иконку (svg) и текст.

Далее, обязательно стили для разметки:

/*  ---------------------------------------------------------------- */
/*  1. Preloader
/*  ---------------------------------------------------------------- */
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000000;
  z-index: 30;
}

.pre_wrapper small {
  display: block;
  position: relative;
  text-align: center;
  font-size: 25px;
  top: 100px;
}

#preloader .icon_animate {
  position: absolute;
  width: 170px;
  height: 140px;
  background: url(../images/icons/preloader.svg) center center no-repeat; // Path to preloader icon
  background-size: 140px;
  /* centering begin */
  margin-left: auto;
  margin-right: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* centering end */
}

Путь до иконки укажите свой.

Теперь прописываем небольшой jQuery код:

/*    --------------------------------------------------------------*/
/*  1. Preloader loading
/*  --------------------------------------------------------------*/
$(window).on('load', function () {
    var $preloader = $('#preloader'),
        $icon_animate = $preloader.find('.icon_animate');
    $icon_animate.fadeOut();
    $preloader.delay(300).fadeOut('slow');
});

Если вы поменяли классы и идентификатор разметки, тут нужно их заново прописать. В параметре delay, указано 300 миллисекунд (0,3 секунды). Это время отвечает за исчезновение блока с анимацией и сработает этот участок кода только тогда, когда страница полностью загрузится. После этого плавно появится контент сайта.

#

Итог

На примере моего сайта, загрузка в 2 — 3 секунды некэшированных страниц не является существенной. Особенно учитывая что у меня сайт кэшируется и крайне редко пользователь может зайти на сайт и не встретить его закэшированным. Однако если это произойдет или скорость интернета пользователя будет слабой, я не хочу отдавать страницу «не готовой». Посему и решил поставить такой Preloader. На большинстве других типовых сайтов, он будет являться лишним.