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

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

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

Задача - как удержать посетителя до полной отрисовки страницы и улучшить показатели загрузки по 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.

Сохраняем файл. Можно открыть любую страницу и посмотреть как работает прелоадер.

Желаю творческих успехов.

Скрипт для увеличения картинок на WordPress < < < В раздел > > >

Запись опубликована в рубрике SEO. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *