Как удалить скрипты и стили в WordPress для оптимизации загрузки

Почему важно удалять ненужные скрипты и стили в WordPress

На каждом сайте WordPress подключается множество CSS и JavaScript файлов, которые нужны для работы тем и плагинов. Часто многие из них используются только на определённых страницах, а на остальных — просто нагружают сайт. Удаление лишних скриптов и стилей снижает количество HTTP-запросов, уменьшает размер загружаемых данных и ускоряет отображение страниц, что положительно влияет на пользовательский опыт и SEO.

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

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

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

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

• Инспектор браузера (Chrome DevTools, Firefox DevTools) — на вкладке Network можно увидеть все подключаемые CSS и JS, а также их размер и время загрузки.
• Плагин Query Monitor — покажет список всех зарегистрированных и подключаемых скриптов и стилей, а также их источники.
• Плагин Asset CleanUp — позволяет в визуальном режиме отключать скрипты и стили на конкретных страницах и постах.

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

Как программно отключить скрипты и стили в WordPress

Использование хуков wp_enqueue_scripts и wp_print_styles

WordPress использует функции wp_enqueue_script и wp_enqueue_style для подключения скриптов и стилей. Чтобы удалить ненужные, можно использовать функцию wp_dequeue_script и wp_dequeue_style в нужном хуке.

Пример функции в файле functions.php вашей темы или в плагине:

function wpdo_remove_unused_assets() {
    if ( !is_admin() ) {
        // Пример: отключаем скрипт contact-form-7 только на главной
        if ( is_front_page() ) {
            wp_dequeue_script( 'contact-form-7' );
            wp_dequeue_style( 'contact-form-7' );
        }

        // Отключаем скрипт и стиль плагина example-plugin на страницах записей
        if ( is_single() ) {
            wp_dequeue_script( 'example-plugin-script' );
            wp_dequeue_style( 'example-plugin-style' );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'wpdo_remove_unused_assets', 100 );

Здесь важно указать правильные идентификаторы скриптов и стилей, которые можно узнать в коде плагина или через инструменты разработчика.

Удаление встроенных скриптов и стилей

Иногда нужно убрать встроенные стили или скрипты, например, встроенный jQuery Migrate или Emoji скрипты, которые часто не нужны.

Пример удаления Emoji скриптов:

function wpdo_disable_emojis() {
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
}
add_action( 'init', 'wpdo_disable_emojis' );

Это помогает уменьшить количество загружаемых скриптов.

Плагины для управления скриптами и стилями в WordPress

Для тех, кто не хочет писать код, существуют удобные плагины:

• Asset CleanUp: Page Speed Booster — позволяет отключать ненужные CSS и JS на отдельных страницах через интерфейс. Очень удобен для сайтов с большим количеством плагинов.
• Perfmatters — платный плагин с множеством функций оптимизации, включая отключение скриптов, lazy loading, оптимизацию запросов и т.д.
• Clearfy Pro — из набора функций Clearfy предлагает опции для отключения неиспользуемых скриптов и стилей, что помогает ускорить сайт.

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

Как найти идентификаторы скриптов и стилей для отключения

Очень часто возникает вопрос — как узнать, какой ID у скрипта или стиля, чтобы его отключить? Вот несколько способов:

• В коде темы или плагина — ищите функции wp_enqueue_script и wp_enqueue_style, первый параметр — это ID.
• Через Query Monitor — откройте панель разработчика, перейдите в Query Monitor, там есть вкладка с перечнем всех подключаемых ресурсов и их ID.
• Через просмотр исходного кода страницы — иногда в URL файлов есть подсказки, но ID лучше смотреть через инструменты WordPress.

Советы для правильного удаления скриптов и стилей

• Тестируйте на каждом шаге — после отключения обязательно проверьте работу сайта, особенно функционал плагинов и темы.
• Отключайте только ненужные скрипты — если сомневаетесь, лучше не отключать, чтобы не сломать важные функции.
• Используйте условные теги WordPress — is_front_page(), is_single(), is_page() и др. помогут отключать скрипты только там, где они не нужны.
• Кешируйте результат — после оптимизации используйте плагины кеширования и minify для дополнительного ускорения.

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

Пример комплексного решения для wpdo.ru

Допустим, на сайте используется плагин Contact Form 7, который нужен только на странице контактов, но подключается на всех страницах. Можно добавить в functions.php следующее:

function wpdo_dequeue_contact_form_7() {
    if ( !is_page( 'contacts' ) ) {
        wp_dequeue_script( 'contact-form-7' );
        wp_dequeue_style( 'contact-form-7' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpdo_dequeue_contact_form_7', 99 );

Это позволит значительно сократить нагрузку на остальные страницы.

Для удобной массовой работы можно использовать плагин Asset CleanUp, который поможет отключать любые скрипты и стили прямо из админки.