Дата публикации
10 Июля 2019
Дата изменения
4 Июля 2020
Уникальных просмотров
540

Оглавление

Один из моих проектов был насыщен медиа-контентом. Это был сайт игровой тематики, сам шаблон состоит из графики, подключены несколько 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. На большинстве других типовых сайтов, он будет являться лишним.

Благодарность автору

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

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

Время работы: 0,1457 s
Время запросов: 0,1457 s
Количество запросов: 25
Источник: cache