Избавляемся от jQuery в темах WPShop: ускоряем Root, Reboot и Bono

Зачем вырезать jQuery в 2026 году?

Кажется, что лишние 30–80 КБ сжатого кода — мелочь. Однако в мобильной верстке важен не столько сетевой вес файла, сколько время, необходимое процессору смартфона для его парсинга и выполнения.

• Ликвидация render-blocking ресурсов: jQuery традиционно загружается в шапке сайта и замораживает отрисовку первого экрана, пока файл не скачается и не выполнится целиком.
• Ощутимое ускорение LCP (Largest Contentful Paint): устранив задержку главного потока на старте, браузер начинает загружать и рендерить главное изображение статьи на сотни миллисекунд раньше.
• Улучшение отклика интерфейса (INP): замена устаревших скриптовых анимаций на легкие CSS-переходы и нативные события разгружает стек вызовов мобильного процессора.
• Отказ от лишних надстроек: замена устаревших jQuery-библиотек вроде Sticky-Kit на стандартное браузерное свойство position: sticky, которое работает на уровне графического движка.
• Прямой рост оценки «Производительность»: реальное сокращение времени до полной готовности страницы (Speed Index).

Вскрываем scripts.min.js: из чего собран бандл

В оригинале файл темы scripts.min.js — это монолитная минифицированная сборка. Если отформатировать ее через Prettier или встроенный инструмент DevTools (кнопка { } во вкладке Sources), обнаруживается блочная структура, скомпонованная через вызовы jQuery(function(t){ ... }):

1. Системный блок: определение мобильных устройств (isMobile), поисковых ботов и работа с Cookie.
2. Интерфейсные элементы: кнопка скролла наверх (.js-scrolltop) и спойлеры (.js-spoiler-box-title).
3. Встроенный Lightbox: плагин всплывающих картинок wpshoplightbox.
4. AJAX-рейтинг: клики по звездам (.js-star-rating-item) и отправка данных через jQuery.post.
5. Анимации при скролле: логика появления блоков .w-animate.
6. Счетчик просмотров: AJAX-запрос к API темы за количеством прочтений.
7. Социальный блок: монолитная библиотека кнопок шаринга Goodshare.
8. Фиксация сайдбара: jQuery-плагин Sticky-Kit.
9. Шапка и навигация: мобильный гамбургер, поиск, адаптивные iframe, шифрование ссылок .js-link.
10. Оглавление (TOC): сворачивание списка и плавный переход к заголовкам с отступом 100px.

Пошаговая пересадка: меняем jQuery на Vanilla JS

1. Замена slideToggle и анимаций высоты

jQuery-методы .slideDown(), .slideUp() и .slideToggle() анимируют inline-высоту элемента. На чистом JS мы пишем легковесный хелпер, который берет реальную высоту элемента и анимирует ее через нативный CSS transition:

function slideToggle(elem, duration = 300) {
  if (!elem) return;
  if (window.getComputedStyle(elem).display === "none") {
    elem.style.removeProperty("display");
    var display = window.getComputedStyle(elem).display;
    if (display === "none") display = "block";
    elem.style.display = display;
    var height = elem.offsetHeight;
    elem.style.overflow = "hidden";
    elem.style.height = "0px";
    elem.offsetHeight; // форсируем reflow
    elem.style.transition = "height " + duration + "ms";
    elem.style.height = height + "px";
    setTimeout(() => {
      elem.style.removeProperty("height");
      elem.style.removeProperty("overflow");
      elem.style.removeProperty("transition");
    }, duration);
  } else {
    elem.style.height = elem.offsetHeight + "px";
    elem.style.overflow = "hidden";
    elem.offsetHeight;
    elem.style.transition = "height " + duration + "ms";
    elem.style.height = "0px";
    setTimeout(() => {
      elem.style.display = "none";
      elem.style.removeProperty("height");
      elem.style.removeProperty("overflow");
      elem.style.removeProperty("transition");
    }, duration);
  }
}

2. AJAX рейтинга статей через fetch() и URLSearchParams

В оригинале темы используется jQuery.post(), который по умолчанию отправляет заголовки application/x-www-form-urlencoded. Если попытаться отправить данные через FormData, PHP-обработчик темы в admin-ajax.php не всегда корректно принимает nonce и action, в результате чего рейтинг «залипает».

Вот рабочий нативный аналог с сохранением правильной кодировки параметров и обновлением текста оценки в DOM:

// Было в jQuery:
// jQuery.post(e.url, { action: "wpshop_star_rating_submit", nonce: e.nonce, ... }, callback);

// Стало на Vanilla JS:
var params = new URLSearchParams();
params.append("action", "wpshop_star_rating_submit");
params.append("nonce", ajax.nonce);
params.append("post_id", postId);
params.append("score", score);
params.append("rating_count", count);
params.append("rating_sum", sum);
params.append("rating_value", val);

fetch(ajax.url, {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
  },
  body: params.toString(),
  credentials: "same-origin"
})
.then(res => res.json())
.then(res => {
  if (res.success) {
    // Пересчитываем средний балл и обновляем текст .star-rating-text
    var rootBox = parent.closest(".star-rating-box") || parent.parentElement.parentElement;
    var textBox = rootBox ? rootBox.querySelector(".star-rating-text") : null;
    if (textBox) {
      textBox.innerHTML = "( " + (count + 1) + " оценок, среднее " + ((sum + parseFloat(score)) / (count + 1)).toFixed(2) + " из 5 )";
    }
  }
});

3. Замена плагина Sticky-Kit на нативный CSS

В темах WPShop для фиксации правой колонки подключается громоздкий скрипт Sticky-Kit ($.fn.stick_in_parent), нагружающий обработчик скролла. В современных браузерах для этого достаточно одной строки CSS, которую мы активируем при проверке настроек темы:

var sidebar = document.querySelector(".js-sticky-sidebar");
if (sidebar && window.innerWidth >= 992 && window.settings_array && window.settings_array.sidebar_fixed == 1) {
  sidebar.style.position = "sticky";
  sidebar.style.top = "20px";
}

4. Плавный скролл оглавления с компенсацией шапки

Оригинальный скрипт плавно скроллит страницу к заголовку через jQuery.animate() с отступом 100 пикселей, чтобы фиксированное меню сайта не перекрывало текст. В Vanilla JS это решается штатным методом window.scrollTo:

document.addEventListener("click", function(e) {
  var anchor = e.target.closest('.table-of-contents a[href*="#"]');
  if (!anchor || !anchor.hash) return;
  var target = document.querySelector(anchor.hash);
  if (target) {
    e.preventDefault();
    var top = target.getBoundingClientRect().top + window.pageYOffset - 100;
    window.scrollTo({ top: top, behavior: "smooth" });
  }
});

Скачать готовый скрипт

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

Скачать scripts.vanilla.js

Важно: темы WPShop содержат десятки опций и комбинаций настроек. Я использую только часть функций темы на своем проекте, поэтому протестировать абсолютно все сценарии физически не мог. Если вы обнаружите, что какой-то специфический элемент (редкий тип меню, сторонний виджет или анимация) работает некорректно, либо найдете недочет в коде — пожалуйста, напишите об этом мне. Я оперативно проверю проблему и обновлю скрипт!

Куда и как загрузить файл scripts.vanilla.js

Есть два способа внедрения: правильный (через дочернюю тему, чтобы обновления родительской темы ничего не затирали) и прямой (с заменой файла в родительской теме).

Вариант А. Через дочернюю тему (Рекомендуемый)

1. Откройте Файловый менеджер в панели хостинга (cPanel, ISPmanager, Beget) или подключитесь по SFTP / FTP (через FileZilla).
2. Перейдите в директорию вашего сайта: /public_html/wp-content/themes/.
3. Найдите папку вашей дочерней темы (например, reboot_child).
4. Загрузите файл scripts.vanilla.js прямо в корень этой папки (путь будет: /wp-content/themes/reboot_child/scripts.vanilla.js).
5. Откройте файл functions.php в этой же папке и добавьте следующий код.

// Подключение Vanilla JS вместо оригинального скрипта темы
add_action('wp_enqueue_scripts', function () {
    // 1. Отключаем оригинальный скрипт родительской темы
    wp_dequeue_script('reboot-scripts');
    wp_deregister_script('reboot-scripts');

    $script_path = get_stylesheet_directory() . '/scripts.vanilla.js';
    $script_uri  = get_stylesheet_directory_uri() . '/scripts.vanilla.js';
    $version     = file_exists($script_path) ? filemtime($script_path) : null;

    // 2. Регистрируем наш скрипт под ИМЕНЕМ родительского 'reboot-scripts'
    // Это сохраняет передачу настроек (settings_array) от темы
    wp_enqueue_script(
        'reboot-scripts',
        $script_uri,
        array(), // Никаких зависимостей от jquery
        $version,
        true     // Загрузка перед закрывающим тегом body
    );

    // 3. Передаем параметры AJAX для звездного рейтинга и счетчика
    wp_localize_script('reboot-scripts', 'wpshop_ajax', array(
        'url'   => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpshop-nonce')
    ));

    // 4. Отключаем сам jQuery на фронтенде для гостей
    if (!is_admin() && !is_user_logged_in()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', false);
    }
}, 9999); // Высокий приоритет, чтобы сработать строго ПОСЛЕ темы

Примечание: Если у вас тема Root или Bono, замените идентификатор reboot-scripts на root-scripts или bono-scripts соответственно.

Вариант Б. Прямая замена в родительской теме (Без дочерней)

1. Через файловый менеджер хостинга откройте папку темы: /wp-content/themes/reboot/assets/js/.
2. Переименуйте оригинальный scripts.min.js в scripts.min.js.bak (для резервной копии).
3. Загрузите подготовленный scripts.vanilla.js в эту папку и переименуйте его в scripts.min.js.
4. В functions.php темы (или через плагин ProFunctions) отключите регистрацию самого jQuery для неавторизованных пользователей.

Реальные результаты оптимизации

После замены скрипта, отключения jQuery и сброса кэша сайта были проведены контрольные замеры в Google PageSpeed Insights (для мобильных устройств). Результаты наглядно подтвердили эффективность отказа от устаревшей библиотеки:

• Общий балл «Производительность» вырос с 79 до 84: сайт вплотную подошел к зеленой зоне исключительно за счет чистки фронтенда.
• LCP (время отрисовки основного контента) сократился с 4,5 до 3,8 секунды: выигрыш сразу в 0,7 сек. Главный баннер статьи перестал ждать, пока браузер скачает, распарсит и выполнит jQuery, перейдя из критической красной зоны в оранжевую.
• Speed Index улучшился с 3,6 до 3,4 секунды: визуальное заполнение экрана контентом стало происходить на 200 мс быстрее.
• Суммарный вес блокирующего JS уменьшился на 30–80 КБ: браузер больше не держит лишний код в памяти устройства.
• Мгновенный отклик интерфейса: спойлеры, содержание статьи (TOC), звездный рейтинг и мобильное меню открываются сразу, не дожидаясь инициализации сторонней библиотеки.

Что делать дальше для выхода в зеленую зону (90+)? Как видно из теста, показатель FCP (2,7 сек.) остался на прежнем уровне. Это естественное поведение: первая отрисовка страницы теперь упирается не в JavaScript, а в время ответа сервера (TTFB) и загрузку шрифтов. Чтобы дожать оставшиеся баллы, следующим шагом достаточно настроить серверное кэширование страниц (FastCGI / LiteSpeed / WP Super Cache) и добавить предзагрузку (fetchpriority="high") для изображения главного экрана.

← Предыдущая статьяWordPress как подключить определенные CSS и JS на определенных страницах и записях