Как отключить ненужные скрипты и стили в WordPress для улучшения производительности

Диагностика проблемы: зачем отключать скрипты и стили

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

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

Как посмотреть подключённые скрипты и стили

• Откройте страницу сайта в браузере Google Chrome.
• Нажмите F12 для вызова панели разработчика.
• Перейдите во вкладку Network и обновите страницу (F5).
• Отфильтруйте запросы по типу JS и CSS.
• Посмотрите, какие скрипты и стили загружаются и соответствуют ли они текущему функционалу.

Также можно использовать плагин Query Monitor для удобного отображения подключаемых ресурсов.

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

1. Определение хендлов скриптов и стилей

Для отключения ресурсов нам нужны их handle — имена, под которыми они зарегистрированы в WordPress. Можно узнать их из исходного кода темы/плагина или с помощью wp_print_scripts.

2. Отключение скриптов и стилей через wp_dequeue_script и wp_dequeue_style

Добавьте следующий код в файл functions.php вашей дочерней темы или в собственный плагин:

function disable_unused_assets() {
    if ( !is_admin() ) {
        // Отключаем скрипт, например, contact-form-7 на всех страницах, кроме страницы контактов
        if ( !is_page('contact') ) {
            wp_dequeue_script('contact-form-7');
            wp_dequeue_style('contact-form-7');
        }

        // Отключаем стили темы Twenty Twenty-One на главной странице
        if ( is_front_page() ) {
            wp_dequeue_style('twentytwentyone-style');
        }
    }
}
add_action('wp_enqueue_scripts', 'disable_unused_assets', 100);

Обратите внимание на приоритет 100 — так мы гарантируем, что отключение произойдёт после регистрации и подключения скриптов и стилей.

3. Отключение встроенных скриптов WordPress

Иногда можно отключить стандартные скрипты, например, emoji:

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

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

После добавления кода:

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

Частые ошибки и как их исправить

• Неправильный handle скрипта/стиля: Используйте плагин Query Monitor или изучайте исходники, чтобы точно определить имена.
• Отключение нужных скриптов: Тестируйте страницы после отключения, чтобы не сломать функционал (например, формы, слайдеры).
• Неправильный приоритет хука: Если скрипты не отключаются, попробуйте увеличить приоритет до 100 или выше.
• Отключение в админке: Следите, чтобы отключение происходило только на фронтенде с помощью !is_admin().

Практические советы по безопасности и производительности

• Отключайте только те скрипты и стили, которые точно не используются на странице.
• Если плагин позволяет гибко отключать скрипты на страницах (например, Asset CleanUp, Perfmatters), используйте их для удобства.
• Не отключайте скрипты, отвечающие за безопасность, например, nonce или CAPTCHA.
• Используйте минимизацию и объединение CSS/JS после отключения лишних ресурсов.

Сравнение способов отключения скриптов и стилей в WordPress