Прелоадер или как уменьшить показатель отказов

Вас приветствует Блог Старого Перца!!!

Всем доброго времени суток.

Задача - как удержать посетителя до полной отрисовки страницы и улучшить показатели загрузки по Google PageSpeed Insights.

Допустим, на странице и слайдер и скрипты и в тексте полно тяжёлых картинок и видео.

А если ещё и скорость интернета как у черепахи, то пока всё отрисуется и займёт своё место, посетитель видит непонятную кашу из скачущих элементов.

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

Решение вы уже видели, как только открыли эту страницу и называется оно Прелоадер - предварительная загрузка.

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

Код прелоадера написан на html+css+javascript без использования библиотек, то есть предельно лёгкий, поэтому с его размещением и применением не будет никаких проблем.

Не посвящённым я подробно покажу как это сделать на WordPress.

Крутящуюся gif картинку можно сделать самостоятельно, а можно выбрать на специальных сервисах конструкторах прелоадеров, где много как платных, так и бесплатных вариантов.

Вот пара таких сервисов:

preloaders.net

loading.io

Код:

<!DOCTYPE html>

<html lang="ru">

    <head>

        <meta charset="utf-8" />

        <title>Preloader</title>

<style>

    #preloader{

	display: none;

}

    #preload{

	position: relative;

	display: block;

	position: fixed;

	z-index: 99999;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: #87D37C url(images/Gear.gif)center center no-repeat; // Gif картинка

	background-size:60px; // Размер gif картинки

}

    .privet{

	position: absolute;

	top: 15%;

	left: 25%;

	right: 25%;

	font-family: Monotype Corsiva;

	font-size: 40px;

	text-align: center;

	color: #fff;

}

</style>

    </head>

<body>

   <div id="preloader">

	<div id="preload">

	<div class="privet">Вас приветствует Блог Старого Перца!!!</div>

	</div>

   </div>

  <script>

	var preloader = document.getElementById("preload");

	  function fadeOutnojquery(el){el.style.opacity = 1;

	    var interpreloader = setInterval(function(){

		el.style.opacity = el.style.opacity - 0.05;

		if (el.style.opacity <=0.05){

		  clearInterval(interpreloader);

		  preloader.style.display = "none";

		}},15);

		};

		window.onload = function(){setTimeout(function(){fadeOutnojquery(preloader);

		},2000); // Время работы прелоадера ms

		};

  </script>

</body>

</html>

Как видите прелоадер предельно прост и эта простота имеет как свои плюсы так и минусы.

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

Можно просто ввести в фал шаблона в теге <body> не заморачиваясь с подключением , и прелоадер сработает на всех страницах.

Минус в том, что программа имеет фиксированное время работы, и не зависит от загрузки страницы.

Так что у Вас есть выбор - делать прелоадер зависимый от загрузки страницы и использовать для этого jQuery, или остановится на простом варианте и задать время работы самостоятельно.

На данной странице время работы прелоадера 2 секунды.

Ну и напоследок пошаговый пример установки прелоадера на WordPress, для тех, кто пока делает первые шаги в программировании.

Шаг 1

Выбираем gif картинку в одном из указанных выше сервисов и скачиваем на свой компьютер. Затем загружаем эту картинку в шаблон, в папку images активной темы. Путь: public_html (или home) - Домен - wp-content - themes - Название темы - images.

Шаг 2.

Заходим в файл style.css. Путь: Консоль - Внешний вид - Редактор - Таблица стилей (style.css).

В конце файла вставляем код стилей прелоадера

Сохраняем файл.

Шаг 3. Прелоадер на отдельной странице.

Заходим в редактор WordPress. Путь: Консоль - Записи (или Страницы) - Нужная страница (или Добавить новую).

В текстовом поле редактора в режиме Текст, в самом начале вставляем код html+javascript

Сохраняем или обновляем.

Можно посмотреть как работае тпрелоадер.

Шаг 4. Прелоадер на всех страницах.

Заходим в файл шаблона Подвал (footer.php). Путь: Консоль - Внешний вид - Редактор - Подвал (footer.php) и перед &jt;/body> вставляем код html+javascript.