Что такое визуальные рендеры и как они влияют на производительность WordPress
Визуальные рендеры — это различные анимации, эффекты и визуальные элементы, которые автоматически применяются в теме или плагинах WordPress. Например, плавное появление элементов, анимации при прокрутке, эффекты наведения, параллакс и другие. Хотя эти эффекты делают сайт более привлекательным, они требуют дополнительных ресурсов браузера и времени на загрузку, что может замедлить работу сайта, особенно на мобильных устройствах и при медленном интернете.
Отключение или минимизация визуальных рендеров помогает ускорить загрузку страниц, снизить нагрузку на сервер и улучшить пользовательский опыт. Особенно это актуально для сайтов с большим трафиком и на слабом хостинге.
Кроме того, отключение ненужных визуальных эффектов помогает улучшить показатели Core Web Vitals и SEO, так как Google учитывает скорость и удобство загрузки страниц.
Какие визуальные рендеры чаще всего замедляют сайт
Чаще всего замедляют работу такие эффекты:
- Анимации CSS и JavaScript (плавное появление, сдвиги, масштабирование);
- Параллакс-эффекты и фоны с прокруткой;
- Тени, размытия и сложные переходы;
- Всплывающие окна с анимацией;
- Lazy load с визуальными эффектами;
- Скрипты и стили плагинов, добавляющие анимации.
Например, тема Reboot и некоторые популярные конструкторы страниц могут автоматически подключать сложные анимации, которые не всегда нужны.
Как отключить визуальные анимации через functions.php — пример кода
Самый простой способ — убрать загрузку стилей и скриптов, отвечающих за анимации, если вы знаете их имена. Также можно добавить фильтры для отключения встроенных эффектов темы или плагина.
Пример функции, которая отключает анимации, подключаемые в теме или плагинах:
function wpid_disable_visual_renders() {
// Отключаем стили анимаций
wp_dequeue_style('animate-css'); // пример имени стиля
wp_deregister_style('animate-css');
// Отключаем скрипты анимаций
wp_dequeue_script('wow-js'); // пример имени скрипта
wp_deregister_script('wow-js');
// Отключаем встроенные анимации темы
add_filter('wpid_theme_enable_animations', '__return_false');
}
add_action('wp_enqueue_scripts', 'wpid_disable_visual_renders', 100);В этом коде мы отключаем стили и скрипты, которые обычно отвечают за визуальные эффекты. Имена animate-css и wow-js — примерные, нужно проверить на вашем сайте через инструменты разработчика браузера или в коде темы/плагина.
Отключение анимаций в популярных плагинах и темах
Для темы Reboot
В теме Reboot есть опция включения анимаций. Можно отключить её через кастомайзер или программно:
function wpid_disable_reboot_animations() {
add_filter('reboot_enable_animations', '__return_false');
}
add_action('after_setup_theme', 'wpid_disable_reboot_animations');Это отключит все анимации темы без удаления стилей.
Для плагина WPStories
WPStories использует анимации для показа историй. Чтобы отключить анимации, можно воспользоваться хуками плагина:
add_filter('wpstories_enable_animation', '__return_false');Добавьте этот код в functions.php или в свой кастомный плагин.
Плагины для контроля и отключения визуальных эффектов
Если не хотите копаться в коде, используйте плагины, которые позволяют управлять скриптами и стилями:
- Asset CleanUp — позволяет отключать отдельные CSS и JS на страницах;
- Perfmatters — включает опции отключения анимаций, эмодзи, шрифтов и других ресурсов;
- Clearfy Pro — набор инструментов оптимизации, включая отключение визуальных эффектов и скриптов, с удобным интерфейсом.
Пример использования Asset CleanUp: после установки перейдите в редактирование страницы и отключите ненужные стили и скрипты с анимациями.
Ссылка на Clearfy Pro с utm-метками: Clearfy Pro — оптимизация и отключение скриптов
Дополнительные советы по ускорению сайта за счёт отключения визуальных эффектов
Кроме отключения самих анимаций, важно:
- Минимизировать количество подключаемых CSS и JS;
- Использовать условную загрузку скриптов только там, где они нужны;
- Включить кэширование и CDN для ускорения доставки ресурсов;
- Оптимизировать изображения и видео, чтобы уменьшить нагрузку;
- Проверять сайт на Core Web Vitals после изменений.
Если вы используете редактор Gutenberg, отключите ненужные блоки с анимациями через плагин WPRemark или аналогичные решения, чтобы уменьшить количество подключаемых ресурсов.
Выводы и рекомендации
Отключение визуальных рендеров и анимаций — важный шаг для ускорения WordPress-сайта, особенно если вы стремитесь к максимальной производительности и удобству пользователей. Сделать это можно как вручную через код, так и с помощью оптимизирующих плагинов.
Для начинающих и продвинутых разработчиков — всегда проверяйте, какие скрипты и стили загружаются на сайте, и отключайте лишние. Для пользователей, которые хотят быстро и безопасно улучшить скорость — рекомендую обратить внимание на Clearfy Pro с его возможностями по управлению скриптами и стилями.