Как добавить автоматический прелоадер в WordPress для улучшения UX

Прелоадер — это анимация или индикатор загрузки, который показывается пользователю до полной загрузки страницы. Он помогает улучшить восприятие сайта и снизить ощущение долгой загрузки, особенно на медленных соединениях или при использовании тяжелых тем и плагинов. В этой статье рассмотрим, как добавить автоматический прелоадер в WordPress, используя собственный код и плагины, а также подскажем, как оптимизировать процесс загрузки.

Что такое прелоадер и зачем он нужен в WordPress

Прелоадер — визуальный элемент, который появляется сразу после перехода на страницу и скрывается, когда контент полностью загрузился. Это помогает избежать пустого экрана и улучшает пользовательский опыт (UX). Особенно полезен прелоадер для сайтов со сложными скинами, большими изображениями или видео. На wpskins.ru, где часто используются кастомные стили и динамические скины, прелоадер помогает сгладить переходы.

Для WordPress прелоадер можно реализовать разными способами: через плагины, кастомный JavaScript и CSS, а также с использованием AJAX для динамических частей.

Реализация автоматического прелоадера с помощью кода

HTML и CSS для базового прелоадера

Начнем с простого прелоадера, который занимает весь экран и показывает анимацию загрузки.

<!-- Добавьте этот HTML в footer.php или через хук wp_footer -->
<div id="wpskins-preloader">
  <div class="loader"></div>
</div>

<style>
#wpskins-preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: wpskins-spin 1s linear infinite;
}
@keyframes wpskins-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

Этот код создаст белый фон с вращающимся кругом — классический прелоадер.

JavaScript для автоматического скрытия прелоадера

Чтобы прелоадер исчезал после полной загрузки страницы, добавим простой скрипт.

<script>
window.addEventListener('load', function() {
  const preloader = document.getElementById('wpskins-preloader');
  if(preloader) {
    preloader.style.opacity = '0';
    preloader.style.transition = 'opacity 0.5s ease';
    setTimeout(() => {
      preloader.style.display = 'none';
    }, 500);
  }
});
</script>

Этот скрипт плавно скрывает прелоадер после полной загрузки всех ресурсов.

Добавление прелоадера через плагин: плюсы и минусы

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

• LoftLoader — простой плагин с поддержкой кастомных анимаций и изображений.
• Preloader Plus — расширенные настройки для разных страниц и типов устройств.
• WP Smart Preloader — минималистичный и быстрый.

Плюсы плагинов — быстрая установка, визуальные настройки, готовые шаблоны. Минусы — лишний вес, возможные конфликты с темами и плагинами, ограниченная кастомизация.

Для сайтов на базе скинов, например, темы Reboot или Root с wpskins.ru, лучше использовать кастомные решения, чтобы прелоадер гармонично вписывался в дизайн.

Оптимизация прелоадера и советы по его использованию

Минимизация времени отображения прелоадера

Прелоадер не должен показываться слишком долго — это раздражает пользователей. Чтобы минимизировать время загрузки и сократить время показа прелоадера:

• Оптимизируйте изображения и видео с помощью современных форматов (WebP, AVIF).
• Используйте lazy loading для медиа-контента.
• Удаляйте ненужные скрипты и стили (например, с помощью Clearfy Pro).
• Настройте кеширование и CDN.

Динамические прелоадеры для AJAX и SPA

Если сайт использует AJAX-загрузку контента или реализован как SPA, прелоадер нужно запускать и скрывать программно. Пример использования с jQuery:

jQuery(document).on('ajaxStart', function() {
  jQuery('#wpskins-preloader').show();
});
jQuery(document).on('ajaxStop', function() {
  jQuery('#wpskins-preloader').fadeOut(500);
});

Так прелоадер будет отображаться при каждом AJAX-запросе, улучшая UX.

Пример интеграции прелоадера с темой Reboot и плагином WPCommunity

Для темы Reboot и плагина WPCommunity с wpskins.ru можно добавить прелоадер, который активируется на страницах со сложными динамическими блоками. Добавьте код из раздела с HTML, CSS и JS в functions.php или через дочернюю тему. Для запуска прелоадера при загрузке блоков WPCommunity используйте:

add_action('wp_footer', function() {
  ?>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const preloader = document.getElementById('wpskins-preloader');
      if(preloader) {
        setTimeout(() => {
          preloader.style.opacity = '0';
          setTimeout(() => preloader.style.display = 'none', 500);
        }, 1000); // время для загрузки динамики
      }
    });
  </script>
  <?php
});

Вывод

Добавление автоматического прелоадера — эффективный способ улучшить UX на сайтах WordPress, особенно если используются кастомные скины и тяжелый динамический контент. Выбор между плагином и собственным решением зависит от ваших навыков и задач. Используйте описанные методы и рекомендации для создания легкого и красивого прелоадера на вашем сайте.

Для удобства скачайте и посмотрите готовые решения и плагины на WPSHOP.RU.