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

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

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

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