Как удалить CSS и JS файлы в WordPress правильно

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

Почему важно удалять лишние CSS и JS в WordPress

Любой лишний CSS или JS увеличивает время загрузки страницы, увеличивает количество запросов к серверу и замедляет отдачу контента пользователю. Это особенно критично для мобильных устройств и сайтов с большим трафиком.

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

Удаление лишних файлов оптимизирует производительность, улучшает SEO и повышает удобство посетителей.

Как определить, какие CSS и JS можно отключить

Первый шаг — определить, какие стили и скрипты подключаются на страницах сайта. Для этого удобно использовать инструменты разработчика в браузере (например, Chrome DevTools) и вкладку Network (Сеть).

Также можно использовать плагины, которые показывают, какие скрипты и стили загружаются на странице:

• Query Monitor — позволяет увидеть все enqueued (подключённые) скрипты и стили.
• Asset CleanUp — позволяет selectively выключать скрипты и стили на отдельных страницах.

После того, как вы определили ненужные скрипты, можно приступать к их отключению.

Удаление CSS и JS с помощью wp_dequeue_style и wp_dequeue_script

Самый правильный способ убрать подключение стилей и скриптов — использовать хуки wp_dequeue_style и wp_dequeue_script. Они позволяют отменить регистрацию и подключение файлов, не ломая логику работы WordPress.

Рассмотрим пример, как отключить стандартный jQuery, если он не нужен, и лишний CSS от плагина:

function wp8_dequeue_assets() {
    // Отключаем jQuery
    wp_dequeue_script('jquery');
    wp_deregister_script('jquery');

    // Отключаем CSS плагина example-plugin-style
    wp_dequeue_style('example-plugin-style');
    wp_deregister_style('example-plugin-style');
}
add_action('wp_enqueue_scripts', 'wp8_dequeue_assets', 100);

Обратите внимание, что важно ставить высокий приоритет, например 100, чтобы отключение происходило после первоначального подключения файлов.

Как узнать хендлы (handles) скриптов и стилей

Хендл — это идентификатор файла, под которым он зарегистрирован в WordPress. Обычно его можно узнать через исходный код темы или плагина, либо с помощью плагина Query Monitor.

Например, для отключения скрипта с хендлом contact-form-7 нужно в функции указать именно этот хендл.

Отключение скриптов на отдельных страницах

Иногда нужно отключить CSS и JS не на всем сайте, а только на конкретных страницах. Это позволяет экономить ресурсы и не отключать то, что нужно где-то ещё.

Пример отключения скрипта на всех страницах кроме главной:

function wp8_conditional_dequeue() {
    if (!is_front_page()) {
        wp_dequeue_script('example-script');
        wp_deregister_script('example-script');

        wp_dequeue_style('example-style');
        wp_deregister_style('example-style');
    }
}
add_action('wp_enqueue_scripts', 'wp8_conditional_dequeue', 100);

Для определения условия можно использовать любые условные теги WordPress (is_single(), is_page(), is_category() и др.).

Использование плагина Asset CleanUp для удобного управления

Если вы не хотите писать код, можно использовать плагин Asset CleanUp. Он показывает все CSS и JS, загружаемые на странице, и позволяет отключать их через админку.

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

Однако для тонкой настройки и автоматизации лучше использовать код, описанный выше.

Обработка ошибок и проверка корректности отключения

При отключении важно не сломать функционал сайта. После внесения изменений проверьте:

• Работоспособность основных функций сайта;
• Отсутствие JavaScript ошибок в консоли браузера;
• Правильное отображение стилей на разных страницах;
• Проверку скорости загрузки с помощью инструментов, например, Google PageSpeed Insights или GTmetrix.

Если что-то сломалось, верните отключение или попробуйте отключать только часть скриптов.

Заключение: правильное удаление CSS и JS в WordPress

Удаление ненужных CSS и JS в WordPress — важный шаг к оптимизации сайта. Используйте wp_dequeue_style и wp_dequeue_script с правильными хендлами и условиями, чтобы убрать лишнее. Для удобства можно применять плагины вроде Asset CleanUp.

Всегда проверяйте корректность работы сайта после изменений и следите за производительностью. Такой подход повысит скорость загрузки страниц и улучшит пользовательский опыт.