Убрать лишние скрипты в WordPress: частые ошибки новичков

За 20–30 минут вы соберёте короткий плагин, который снимает с витрины WordPress-сайта ненужные скрипты: эмодзи-детектор и JS формы обратной связи там, где формы нет. Править файлы темы и ставить плагины-оптимизаторы не придётся. Ниже порядок действий и места, где новички чаще всего ломают сайт.

Что понадобится до начала

• WordPress 6.x и PHP 7.4 или новее. Версии видны в разделе «Инструменты → Здоровье сайта → Информация».
• Роль администратора и доступ к файлам по SFTP или через файловый менеджер хостинга. Через него вы откатите изменение, если сайт перестанет открываться.
• Свежая резервная копия файлов сайта.
• Chrome или Firefox с инструментами разработчика (клавиша F12).
• Плагин Contact Form 7 по желанию: на нём построен пример условного отключения. Если его нет, подставьте хэндл из своего списка.

Что убираем в примере

Скрипты в WordPress снимают по хэндлу, а не по имени файла. Вот что и чем снимаем в примере:

Пояснение: хэндл (handle) — уникальное имя, под которым скрипт или стиль зарегистрирован в WordPress, например jquery-core. Имя файла и хэндл не совпадают: в исходнике страницы хэндл прячется в атрибуте id тега (шаг 2).

Пошаговая инструкция

1. Зафиксируйте исходное состояние. Без цифры «до» результат не оценить. Откройте сайт в приватном окне, где нет админ-панели WordPress с её скриптами. Нажмите F12, откройте вкладку Network, отключите кеш (в Chrome это флажок Disable cache), выберите фильтр JS и обновите страницу.

   Проверка: внизу вкладки видны число запросов и объём переданных данных, вы их записали.

2. Найдите хэндлы. WordPress добавляет к хэндлу суффикс при выводе тега, поэтому его можно прочитать в исходнике. Нажмите Ctrl+U, через Ctrl+F найдите «-js» и посмотрите теги script с путём вашего плагина. Если id тега равен contact-form-7-js, хэндл это contact-form-7. Для стилей ищите «-css». Не трогайте jquery-core и jquery-migrate: на них опираются многие плагины и темы.

   Проверка: у вас выписаны пары «файл и хэндл» для двух-трёх скриптов, и для каждого вы знаете, на каких страницах он нужен.

3. Создайте плагин. В папке wp-content/plugins создайте каталог trim-scripts, а в нём файл trim-scripts.php. В functions.php код не кладите: он пропадёт при обновлении темы, а плагин переживёт смену темы. Слаг contact и хэндл contact-form-7 замените своими значениями. Код написан для WordPress 6.x.

   <?php
   /**
    * Plugin Name: Trim Scripts
    * Description: Снимает лишние скрипты и стили с витрины сайта.
    * Version: 1.0.0
    */
   
   if ( ! defined( 'ABSPATH' ) ) {
       exit;
   }
   
   // Эмодзи-детектор выводится в wp_head, поэтому снимаем его на init.
   add_action( 'init', 'trim_scripts_disable_emoji' );
   
   function trim_scripts_disable_emoji() {
       remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
   }
   
   // Приоритет 100: к этому моменту плагины уже поставили скрипты в очередь.
   add_action( 'wp_enqueue_scripts', 'trim_scripts_dequeue', 100 );
   
   function trim_scripts_dequeue() {
       // Форма нужна только на странице со слагом contact.
       if ( ! is_page( 'contact' ) ) {
           wp_dequeue_script( 'contact-form-7' );
           wp_dequeue_style( 'contact-form-7' );
       }
   }
   

   Закрывающий тег в конце файла не нужен. Эмодзи в современных браузерах отображаются и без снятого скрипта. Активируйте плагин в разделе «Плагины → Установленные».

   Проверка: Trim Scripts есть в списке плагинов, сайт открывается без белого экрана.

4. Проверьте результат. Очистите кеш плагина кеширования и CDN, если они есть. В приватном окне откройте главную: во вкладке Network не должно быть запросов к папке contact-form-7, а в исходнике строки _wpemojiSettings. Затем откройте страницу с формой, отправьте тестовое сообщение и загляните во вкладку Console.

   Проверка: на главной скриптов формы нет, на странице формы она отправляется, в консоли нет красных ошибок.

5. Добавляйте по одному хэндлу. Следующие скрипты из списка шага 2 дописывайте в функцию по одному и после каждого повторяйте шаг 4. Так при поломке сразу ясно, кто виноват.

   Проверка: числа из шага 1 сравнены с новыми, каждый добавленный хэндл проверен на главной, на записи и на странице, где скрипт нужен.

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

Если не получилось

• Белый экран или сообщение «There has been a critical error on this website». В русской локали текст может отличаться. Чаще всего это опечатка в файле плагина. Переименуйте папку trim-scripts по SFTP, например в trim-scripts-off: WordPress перестанет её загружать, и сайт откроется. Поправьте код и верните имя.
• «Warning: Cannot modify header information - headers already sent by». Перед открывающим тегом PHP оказались пробел, пустая строка или BOM, который добавил редактор. Сохраните файл в UTF-8 без BOM.
• Скрипт остался в исходнике, ошибок нет. Проверьте три вещи: совпадает ли хэндл с id тега без суффикса «-js», очищен ли кеш и не ставит ли плагин скрипт в очередь позже вашего хука (например, при выводе шорткода). В последнем случае вызов нужно перенести на более поздний хук; порядок хуков смотрите в документации вашей версии WordPress.
• В консоли «Uncaught ReferenceError: jQuery is not defined». Вы сняли jQuery или скрипт, от которого он зависит, а чужой код его ждёт. Уберите последнюю добавленную строку и очистите кеш.
• Форма на месте, кнопка «Отправить» не реагирует. Слаг в is_page() не совпал со слагом страницы, и скрипты сняты там, где форма нужна. Слаг виден в адресе страницы.

Что делать дальше

После каждого обновления плагина или темы повторяйте проверку из шага 4: если хэндл сменился, wp_dequeue_script молча перестанет работать, и скрипт вернётся. Следите за двумя показателями: число JS-запросов во вкладке Network и Total Blocking Time в отчёте Lighthouse. Следующий шаг после уборки лишнего, отложенная загрузка оставшихся скриптов, это отдельная тема. Подробности о функциях смотрите в документации: wp_dequeue_script и хук wp_enqueue_scripts.