Оценка и оптимизация загрузки скриптов в WordPress

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

Почему важно оптимизировать загрузку скриптов и стилей

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

Оптимизация загрузки позволяет:

• Уменьшить время загрузки страниц;
• Снизить нагрузку на сервер и трафик;
• Повысить оценки в Google PageSpeed и других инструментах;
• Улучшить поведенческие факторы и SEO.

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

Как проанализировать, какие скрипты и стили загружаются на сайте

Для начала нужно понять, что именно грузится на странице. Используем несколько подходов:

1. Инструменты разработчика браузера (DevTools)

В Google Chrome или Firefox откройте DevTools (F12), перейдите во вкладку Network и обновите страницу. Отфильтруйте запросы по типу JS и CSS, чтобы увидеть все загружаемые скрипты и стили. Обратите внимание на их размер, время загрузки и домен загрузки.

Во вкладке Performance можно записать загрузку страницы и увидеть, какие скрипты тормозят рендеринг.

2. Плагины для анализа загрузки

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

• Query Monitor — мощный инструмент для разработчиков с информацией о запросах, ошибках и подключаемых скриптах.
• Clearfy Pro — плагин для оптимизации и управления ресурсами, умеет отключать скрипты на конкретных страницах.

3. Функция wp_print_scripts и wp_print_styles

Для более точного анализа можно вывести список зарегистрированных и подключенных скриптов и стилей через хуки WordPress. Добавим в functions.php следующий код с префиксом функции wpcource_:

add_action('wp_print_scripts', 'wpcource_list_scripts');
function wpcource_list_scripts() {
    global $wp_scripts;
    echo '<!-- Загруженные скрипты: --><br>';
    foreach( $wp_scripts->queue as $handle ) {
        echo $handle . '<br>';
    }
}

Аналогично можно вывести стили через wp_print_styles.

Как отключить загрузку лишних скриптов и стилей

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

Функция отключения скриптов и стилей с префиксом wpcource_

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

        // Отключаем скрипт плагина WooCommerce на страницах, где он не нужен
        if ( !is_woocommerce() && !is_cart() && !is_checkout() ) {
            wp_dequeue_script('woocommerce');
            wp_dequeue_style('woocommerce-layout');
            wp_dequeue_style('woocommerce-smallscreen');
        }
    }
}

Такой подход снижает вес страниц и уменьшает количество запросов.

Асинхронная и отложенная загрузка скриптов

Дополнительно можно ускорить загрузку, подключая скрипты с атрибутами async или defer. WordPress не поддерживает это из коробки для wp_enqueue_script, но можно добавить фильтр:

add_filter('script_loader_tag', 'wpcource_add_async_defer', 10, 3);
function wpcource_add_async_defer($tag, $handle, $src) {
    $async_scripts = ['my-script-handle']; // список скриптов для async
    $defer_scripts = ['another-script-handle']; // список для defer

    if (in_array($handle, $async_scripts)) {
        return '<script src="' . $src . '" async></script>';
    }
    if (in_array($handle, $defer_scripts)) {
        return '<script src="' . $src . '" defer></script>';
    }
    return $tag;
}

Управляйте этими атрибутами для скриптов, которые не участвуют в первичном рендеринге.

Плагины для оптимизации загрузки скриптов и стилей

Если хочется готового решения, обратите внимание на плагины:

• Clearfy Pro — позволяет отключить скрипты на страницах, управлять кэшированием, объединять и минифицировать файлы.
• Autoptimize — объединяет CSS и JS, поддерживает отложенную загрузку и оптимизацию.

Выводы и рекомендации

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

Резюмируем основные шаги:

1. Проанализируйте текущие скрипты и стили с помощью DevTools и плагинов.
2. Определите, какие из них не нужны на конкретных страницах.
3. Отключите их программно через wp_dequeue_script и wp_dequeue_style.
4. Используйте async и defer для не критичных скриптов.
5. Используйте плагины Clearfy Pro или Autoptimize для автоматизации оптимизации.

Такой подход поможет сделать сайт на WordPress быстрее и удобнее.