При загрузке страницы могут возникать сразу несколько проблем. Самая частая проблема – пустой белый экран. Посетитель просто должен сидеть и ждать, когда загрузится страница. Также при загрузке страницы не все шрифты и картинки успевают подгрузиться. Поэтому иногда пользователи видят, как шрифты начинают меняться, контент перемещается и т.д. Все это можно скрыть при помощи одного достаточно простого элемента – прелоадера. Это просто лучший способ, который не даст посетителям покинуть сайт, даже если они очень нетерпеливые. В этой статье мы расскажем о том, что такое предзагрузчик, как правильно его использовать и как лучше всего сделать экран предзагрузки на сайте.
Полезно: Data Tables Generator – что за плагин, для чего нужен, отзывы
Что такое прелоадер
Если говорить скучным языком программистов, то можно сказать, что прелоадер – это определенный механизм для вывода анимации (или индикатора загрузки) до того момента, пока страница не загрузится полностью и выведется на экран. Объясним проще – пока страница полностью не загрузится, на экране работает определенная анимация, которую можно выбрать самостоятельно. Эта анимация должна заменить пустой экран. Использование прелоадера дает пользователю понять, что страница не зависла и идет загрузка сайта. Также это достаточно хорошо удерживает посетителя на сайте.
Кому нужен экран предварительной загрузки
Некоторые разработчики не очень любят использование прелоадеров на веб-сайте. На самом деле, это мнение достаточно обосновано. Экран предварительной загрузки лучше всего ставить на крупные веб-сайты. Например, если вы владеете своим интернет-магазином или крупным порталом. Сюда же попадают интернет-сервисы, которые постоянно обрабатывают миллионы данных. У таких сайтов почти невозможно повысить скорость загрузки. Поэтому здесь можно использовать экран предварительной загрузки.
Если же вы просто ведете блог или у вас есть одностраничный сайт, то установка экрана предзагрузки совсем не принципиальна. В первую очередь лучше попробуйте оптимизировать свой сайт. Для этого можно попробовать использовать отложенную загрузку изображений, почистить код и минимизировать его. Есть множество способов ускорения веб-сайта. В принципе, даже можно попробовать использовать специальные расширения, но здесь речь не об этом. В первую очередь лучше постарайтесь оптимизировать свой сайт, и если скорость загрузки повысить не получится, то можно использовать прелоадер.
Вообще, всегда обращайте внимание на статистику. Это очень важно. Как говорит нам статистика, то веб-сайт должен загружаться не дольше 4 секунд. Когда эти четыре секунды проходят, то большая часть посетителей не дожидаются полной загрузки сайта и просто покидают его. Это плохой показатель. Если сайт нормально оптимизирован, то он должен загружаться в среднем за 2-3 секунды. Несмотря на то, что это не идеальные показатели, все же они достаточно эффективны. Статистика показывает, что пользователи остаются на сайте и могут подождать около 2-3 секунд. Поэтому, если у вас низкая скорость загрузки веб-сайта, то в первую очередь позаботьтесь об оптимизации, а уже потом думайте – нужен вам прелоадер или нет.
Перейдем к решению проблемы
Для установки прелоадера на сайт WordPress есть несколько способов. Здесь мы расскажем вам о том, как можно установить экран предзагрузки при помощи плагина The Preloader. После этого мы покажем пару альтернатив этому расширению, которые вы тоже можете использовать на своем сайте.
Полезно: подборка плагинов 2020 для формы регистрации WordPress
Как пользоваться плагином The Preloader
The Preloader – это лучший среди бесплатных дополнений для добавлении прелоадера. Чтобы воспользоваться им, нужно сначала установить расширение. Это делается очень просто, поэтому мы пропустим данный шаг. После завершения установки нужно перейти во вкладку дополнения. Именно здесь проводятся все работы по добавлению экрана предзагрузки на сайт.
Вот все настройки, которые можно выбрать с The Preloader:
- самая первая строка для настройки. Здесь вы выбираете цвет заднего фона. По умолчанию уже установлен белый, но можно задать и свои параметры;
- пункт “preloader image” в этом пункте нужно выбрать анимацию для прелоадера. Несмотря на достаточно большой выбор, анимаций может не хватать. Поэтому под полем для выбора анимации есть ссылка, где вы можете скачать еще больше картинок для экрана предзагрузки. Самое главное – учитывайте размер. GIF-изображение должно быть равно 128×128 пикселей;
- здесь можно выбрать, на каких страницах будет отображаться экран предварительной загрузки. Например, можно сделать предзагрузчик на все страницы веб-сайта или же поставить для отдельных директорий.
Когда вы пройдетесь по этим настройкам, то есть, выберете цвет фона, изображение для анимации и страницы, на которых будет отображаться прелоадер, нужно будет немного поработать с кодом. Не волнуйтесь, работа будет простой и недолгой. Необходимо только открыть файл header.php в папке темы и после открывающего <body> поставить строчку кода, которую показывает плагин. После этого нужно проверить, активен плагин или нет и посмотреть, насколько корректно работает предзагрузка.
Обращаем ваше внимание на то, что если вы собираетесь поменять гифку, то нужно установить для нее название “preloader”. И очень важно, чтобы в папке была только одна картинка с таким названием.
Работать с дополнением The Preloader достаточно просто. Несмотря на это, есть некоторые проблемы при использовании этого плагина. Поэтому мы расскажем вам еще о других расширениях для добавления экрана предзагрузки на сайт.
Ultimate WordPress Preloader
Это расширение можно считать отличной заменой The Preloader, несмотря на то, что оно платное. Разработчики дополнения вложили достаточно много сил и времени на создание этого плагина. Поэтому покупая Ultimate WordPress Preloader, вы получаете в свои руки невероятно мощное расширение для добавления экрана предварительной загрузку на сайт. Расширение имеет огромное количество настроек, и с ним вы можете максимально подстроить работу прелоадера под свои нужды.
Вот некоторые возможности Ultimate WordPress Preloader:
- более 54 анимированных стилей для предзагрузчика. Разработчики не стали использовать картинки и сделали элементы только при помощи чистого CSS3;
- если вы захотите использовать GIF-анимацию, то эта возможность тоже осталась. С плагином в комплекте идет 29 GIF-изображений, которые можно использовать;
- неограниченное количество цветов. Как для самой анимации, так и для фона можно поставить любые значения цветов. Это делается через панель управления дополнением.
Одна из главных фишек Ultimate WordPress Preloader – предварительный просмотр изменений. При настройке экрана предзагрузки вы можете сразу смотреть на готовый результат и корректировать его, если это необходимо. Это очень удобно и просто в несколько раз ускоряет работу, так как сразу видно, что получится в итоге. Также вы будете использовать мощный настройщик. Он позволяет без проблем настраивать экран предварительной загрузки, и с его помощью вы можете работать буквально с каждой мелкой деталью предзагрузчика.
Дополнение отлично работает с любой темой, которую вы только используете. Поэтому можно спокойно устанавливать его на любой веб-сайт и работать с ним. Также он является кроссбраузерным. Все анимации, которые вы добавите на свой сайт при помощи этого расширения, быстро адаптируются под мобильные устройства.
К плагину прилагается достаточно подробная документация. Поэтому здесь мы не рассказываем, как пользоваться этим дополнением. Вам достаточно только открыть руководство и выполнять те шаги, которые там указаны. Тогда точно не возникнет проблем ни с установкой дополнения, ни при работе с самим прелоадером.
Если вы не знаете, насколько вообще плагин будет удобен в использовании, то можно использовать одну интересную возможность. Если говорить точнее – разработчики предлагают вам бесплатный плагин Ultimate WordPress Preloader. В отличие от платной версии, он имеет более ограниченный функционал. О нем мы расскажем чуть позже, а пока закончим обзор платной версии.
Платная версия Ultimate WordPress Preloader стоит 24 доллара. После покупки вы будете получает поддержку от команды разработчиков в течение 6 месяцев. Этот плагин действительно имеет достаточно обширный функционал. Поэтому стоит подумать о его покупке.
Полезно: выбираем топовые плагины кнопок соц. сетей для сайта WordPress
Бесплатная версия Ultimate WordPress Preloader
Не будем особо сильно углубляться в функциональные возможности Ultimate WordPress Preloader. Это бесплатное дополнение позволяет протестировать все возможности плагина, поэтому оно имеет ограниченный набор функций. Вот список возможностей этого дополнения:
- вместо 54 вариантов, которые предоставляет расширенная версия плагина, в этой версии вам доступен выбор из 5 анимаций, построенных на чистом CSS3;
- для предзагрузчика доступно 4 различных размера предзагрузчика;
- также как и платной версии, здесь есть мощная панель управления, которая включает в себя функцию предварительного просмотра и настройщик прелоадера.
Вообще, в остальном дополнение не отличается от платного расширения. То есть, изменения есть только в количестве доступных анимаций и некоторых настроек. А в целом, все работает примерно также.
WordPress Preloader Unlimited
WordPress Preloader Unlimited – это еще одно премиальное расширение для добавления предзагрузчика на страницы сайта. Это плагин имеет средний рейтинг в 5 звезд, а также массу положительных отзывов. Например, вот что написал один из пользователей дополнения:
“При работе с плагином я столкнулся с парой проблем, но разработчики убедили, что они исправят все проблемы в будущих обновлениях. Поэтому я не вижу смысла занижать оценку дополнения. Этот плагин очень удобен и его можно считать универсальным решением. Расширение предоставляет на выбор большое количество различных типов и опций предзагрузчика. Также стоит отметить, что плагин очень прост в использовании. Это дополнение точно заслуживает 5 звезд рейтинга за универсальность, простоту использования и превосходную службу поддержки”.
Собственно, этот отзыв был написан около двух лет назад, а последнее обновление было выпущено около года назад. Это значит, что разработчики действительно следят за качеством своего продукта и исправляют ошибки. Ладно, теперь перейдем к обзору возможностей WordPress Preloader Unlimited. А возможностей, которые предоставляет дополнение, действительно очень много. Разработчики решили сделать свой плагин лучшим, среди расширений для добавления предзагрузчика. Поэтому он имеет расширенный функционал.
Вот список некоторых функций WordPress Preloader Unlimited:
- большое количество изображений для выбора анимации. Вы можете самостоятельно просмотреть, какие изображения можно установить в качестве предзагрузчика. Их там действительно очень много и все они имеют свой уникальный дизайн;
- анимация с заливкой. Можно написать любой текст и сделать так, чтобы он постепенно заливался по мере загрузки. Вы можете посмотреть на некоторые варианты, которые сделали разработчики, а потом добавить свои;
- уникальные пакеты анимаций. Разработчики дополнения собрали самые трендовые пакеты анимаций и добавили их в свой продукт. К слову, все анимации были сделаны на чистом CSS3, поэтому они быстро загружаются и работают без перебоев;
- поддержка 3D. Да, расширение поддерживает как 2D, так и 3D-анимации. Вам осталось лишь выбрать свой вариант и установить на сайт.
Помимо этого дополнение имеет еще очень большое количество различных особенностей. Вы можете полностью контролировать любой вариант предзагрузчика, который добавляете при помощи плагина. Можно включать и выключать предзагрузчик на мобильных устройствах, добавлять его только на определенные страницы, скрывать через определенное время и т.д.
Если вам понравился плагин, то вы можете приобрести его за 17 долларов. Разумеется, с таким функциональным расширением еще нужно научиться работать. Поэтому после покупки вы получаете 6 месяцев премиальной поддержки от команды разработчиков дополнения. Ребята помогут с любыми проблемами. Как писали покупатели в комментариях, служба поддержки действительно очень хорошо справляется со своей работой и дает только правильные и рабочие решения.
Полезно: плагины для анимации на сайте WordPress первой половины 2020
LoftLoader
Небольшой, простой в настройке, но очень функциональный плагин LoftLoader позволяет добавить настраиваемый предзагрузчик на страницы вашего веб-сайта. Это расширение поставляется бесплатно, но также имеет и расширенную, платную версию. Здесь мы поговорим именно о бесплатной версии этого дополнения.
Стоит начать с того, что этот плагин позволяет добавить экран предзагрузки контролировать его внешний вид без написания кода. Разработчики LoftLoader внедрили в свой продукт очень большое количество функций и настроек. Поэтому вы получаете множество возможностей, используя этот плагин.
Вот список некоторых возможностей LoftLoader:
- чистая анимация, построенная на CSS3. Использование CSS3 обеспечивает стабильную работу анимаций, без ошибок и увеличения нагрузки на сайт;
- с этой версией расширения вы получаете 4 эффекта для анимации предзагрузчика;
- плагин предоставляет на выбор 7 эффектов загрузки, два из которых имеют поддержку пользовательских изображений;
- для фона можно установить любой цвет, а также изменить его непрозрачность;
- для каждой страницы веб-сайта можно установить свой прелоадер, но учитывайте, что поддерживаются именно страницы.
Это не такая редкость для бесплатного расширения, но все же это достаточно важный момент. К дополнению прилагается подробная онлайн-документация. С ее помощью вы без лишних проблем и трудностей сможете разобраться с особенностями работы с дополнением. Документация создавалась для платной версии плагина, но в ней также рассказывается о том, как работать с бесплатной версией.
Если у вас возникнут проблемы при работе с дополнением, можно создать новую тему на форуме поддержки. Самое главное, что если вы пишете разработчикам на почту, то указывайте, что пишете о работе именно с LoftLoader Lite.
Но прежде чем обращаться в службе поддержки, лучше всего попробовать обновить все расширения и темы до последних версий, потом проверить документацию и страницу с часто задаваемыми вопросами. После этого стоит проверить, не конфликтует ли дополнение с другими темами или плагинами. Сделать это можно при помощи руководства. И если вы сделали все указанные действия, но проблема не исчезла, можно писать разработчикам.
DV Loading
Полностью отзывчивый и очень гибкий плагин DV Loading позволяет быстро добавить на веб-сайт пользовательский экран предзагрузки страницы. Расширение имеет множество различных опций и возможностей. Сейчас мы вам о них расскажем.
Вот некоторые основные функции дополнения:
- анимация загрузки текста. Это достаточно популярная и очень интересная анимация, которую можно добавить на сайт;
- расширение предоставляет на выбор 32 варианта перехода между страницами. Переходы работают на чистом CSS;
- для работы разработчики подготовили 29 гифок с анимацией;
- все цвета, которые есть на странице, можно изменить под себя.
Плагин имеет действительно очень большое количество параметров и настроек. Помимо большого выбора, есть один совершенно новый вариант добавления предзагрузки – через шорткод. То есть, вы создаете анимацию, настраиваете ее и добавляете на странице при помощи обычного шорткода. Все параметры можно генерировать на странице дополнения.
Расширение стоит совсем недорого – всего 17 долларов. Самое главное, что покупатели оценивают этот плагин на 5 звезд. Это говорит о том, что DV Loading действительно работает так, как нужно. Если вы хотите простое и недорогое дополнение для добавления экрана предварительной загрузки на сайт, то обратите внимание на DV Loading.
Полезно: лучшие WordPress плагины анимации второй половины 2020
Что же выбрать?
Мы рассказали вам как о бесплатных расширениях, так и о платных. Поэтому сейчас мы дадим некоторые руководства по поводу того, что же выбрать. В первую очередь подумайте, какие возможности для работы с предзагрузчиком вам нужны. Исходя из этого, уже нужно просмотреть, какие расширения способны дать нужный результат. Хотя, конечно же, больше всего функционала предоставляют именно платные дополнения.
Встроенные прелоадеры
Вообще, для добавления предзагрузчиков совсем необязательно использовать расширения. Если вы не создаете сайт с нуля, а используете тему, то можно выбрать такие макеты, которые включают в себя экраны предзагрузки. В чем же здесь особенность? Здесь есть одна очень интересная особенность. Премиальная тема всегда соответствует определенной тематике. Соответственно, эта тематика прослеживается в каждом элементе шаблона. Это также затрагивает и прелоадер. То есть вместе с темой вы получаете предзагрузчик, который полностью соответствует дизайну темы и передает его. Помимо этого, стоит обратить внимание на то, что разработчики даже не всегда используют расширения, внедряя экран предварительной загрузки прямо в тему.
Заключение
Вот мы и рассказали вам о том, для чего нужны прелоадеры, как правильно их использовать и как добавить. Теперь подведем небольшой итог всего того, что было описано в статье. Прелоадер – это функциональный элемент сайта, анимация, которую видит пользователь, когда сайт загружается. Прелоадер позволяет понять, что сайт не завис, а просто загружается. Это значительно увеличивает количество посетителей, так как если долго держится белый экран, то большая часть пользователей просто покидают веб-сайт. Предзагрузчик лучше всего ставить на большие сайты, которые обрабатывают очень много информации. Если у вас небольшой блог или одностраничник, то лучше всего оптимизировать его. Поставить экран предзагрузки можно с помощью расширений. Мы рассказали вам от некоторых плагинах для добавления предзагрузчика. Поэтому выбирайте любой из них и вперед.
