В WordPress, как и на любом современном веб-сайте, JavaScript играет важную роль, обеспечивая интерактивность и динамическое поведение. Однако, со временем, на сайте может накапливаться неиспользуемый JavaScript, который негативно влияет на производительность.
Зачем удалять неиспользуемый JavaScript: Влияние на производительность
Неиспользуемый JavaScript – это код, который загружается браузером, но не выполняется на странице. Он увеличивает время загрузки страницы, ухудшает показатели Core Web Vitals и, как следствие, снижает позиции сайта в поисковой выдаче. Пользователи неохотно ждут загрузки медленных сайтов, что приводит к увеличению показателя отказов и снижению конверсии. Кроме того, избыточный JavaScript потребляет ресурсы сервера и мобильных устройств.
Проверка скорости сайта: Инструменты для анализа (PageSpeed Insights, GTmetrix)
Для оценки производительности сайта и выявления неиспользуемого JavaScript необходимо использовать инструменты анализа скорости, такие как Google PageSpeed Insights и GTmetrix. Эти инструменты предоставляют подробные отчеты с рекомендациями по оптимизации, включая удаление неиспользуемого JavaScript. Они позволяют увидеть, какие скрипты замедляют загрузку страницы и сколько времени требуется на их выполнение.
Основные причины появления неиспользуемого JavaScript в WordPress
Существует несколько распространенных причин появления неиспользуемого JavaScript в WordPress:
- Удаленные плагины: После удаления плагина его скрипты могут остаться на сайте.
- Устаревшие темы: Старые темы могут содержать неоптимизированный или избыточный JavaScript.
- Разные плагины, выполняющие одну и ту же функцию: Использование нескольких плагинов с перекрывающимся функционалом может привести к дублированию скриптов.
- Скрипты, загружаемые глобально, но используемые только на определенных страницах: Некоторые плагины и темы загружают скрипты на все страницы, даже если они необходимы только на некоторых из них.
Обнаружение неиспользуемого JavaScript в WordPress без плагинов
К счастью, выявить неиспользуемый JavaScript можно и без использования плагинов, применяя встроенные инструменты разработчика в браузере.
Использование инструментов разработчика браузера (Chrome DevTools, Firefox Developer Tools)
Современные браузеры, такие как Chrome и Firefox, предоставляют мощные инструменты разработчика, позволяющие анализировать производительность веб-страниц. Для доступа к ним необходимо открыть страницу сайта и нажать F12 (или Ctrl+Shift+I в Chrome/Windows, Cmd+Opt+I в Chrome/Mac, Cmd+Shift+I в Firefox/Mac). Перейдите во вкладку Network (Сеть), перезагрузите страницу (Ctrl+R или Cmd+R), и вы увидите список всех загруженных ресурсов, включая JavaScript-файлы.
Анализ отчета о покрытии кода (Coverage report)
Во вкладке Coverage (Покрытие) в Chrome DevTools (доступна через Cmd+Shift+P или Ctrl+Shift+P, затем ввести «Coverage») можно увидеть, какая часть JavaScript-кода действительно используется на странице. Отчет показывает процент используемого и неиспользуемого кода для каждого файла. Красный цвет указывает на неиспользуемый код, а зеленый – на используемый.
Выявление неиспользуемых скриптов и стилей
Анализируя отчет о покрытии кода, можно определить, какие скрипты загружаются, но практически не используются. Эти скрипты являются кандидатами на удаление или условную загрузку. Аналогичный подход применим и к CSS.
Ручное удаление неиспользуемого JavaScript: Пошаговая инструкция
Удаление неиспользуемого JavaScript требует осторожности, чтобы не нарушить функциональность сайта. Всегда делайте резервную копию перед внесением изменений.
Определение источника неиспользуемых скриптов (тема, плагины)
Прежде чем удалять скрипт, необходимо определить, откуда он загружается: из темы оформления или из плагина. Это можно сделать, просмотрев исходный код страницы и найдя тег <script> для интересующего скрипта. Адрес скрипта обычно указывает на папку темы или плагина.
Отключение или удаление скриптов из темы (functions.php)
Если скрипт загружается из темы оформления, его можно отключить, добавив код в файл functions.php дочерней темы (использование дочерней темы – обязательное условие!).
Например, если нужно отменить регистрацию скрипта с идентификатором example-script, добавьте следующий код:
<?php
/**
* Отменяет регистрацию указанного JavaScript.
*
* @param string $handle Идентификатор скрипта, который необходимо отменить регистрацию.
*/
function remove_unnecessary_scripts( string $handle ): void {
wp_deregister_script( $handle );
}
add_action( 'wp_print_scripts', 'remove_unnecessary_scripts', 100 );
Важно: Замените example-script на фактический идентификатор скрипта, который вы хотите удалить. Убедитесь, что этот скрипт действительно не используется на других страницах сайта.
Удаление скриптов плагинов вручную (не рекомендуется, только для опытных пользователей)
Не рекомендуется напрямую редактировать файлы плагинов, так как эти изменения будут потеряны при обновлении плагина. Если необходимо удалить скрипт плагина, лучше использовать фильтры WordPress или обратиться к разработчику плагина с просьбой добавить возможность отключения скрипта.
Использование условной загрузки скриптов (wpdequeuescript)
Вместо полного удаления скрипта можно использовать условную загрузку, чтобы скрипт загружался только на определенных страницах. Это можно сделать с помощью функции wp_dequeue_script в сочетании с условными тегами WordPress.
<?php
/**
* Отменяет регистрацию и удаляет скрипт на определенных страницах.
*
* @param string $handle Идентификатор скрипта, который необходимо отменить регистрацию и удалить.
*/
function conditionally_remove_script( string $handle ): void {
if ( ! is_page( array( 'contact', 'about' ) ) ) { // Загружать скрипт только на страницах 'contact' и 'about'
wp_dequeue_script( $handle );
wp_deregister_script( $handle );
}
}
add_action( 'wp_enqueue_scripts', 'conditionally_remove_script', 100 );
В этом примере скрипт с идентификатором example-script будет загружен только на страницах с идентификаторами ‘contact’ и ‘about’. На остальных страницах он не будет загружаться.
Оптимизация загрузки JavaScript для повышения производительности
Помимо удаления неиспользуемого JavaScript, существует несколько других способов оптимизации загрузки JavaScript для повышения производительности сайта.
Отложенная загрузка JavaScript (defer, async)
Атрибуты defer и async позволяют загружать JavaScript-файлы параллельно с разбором HTML, не блокируя рендеринг страницы. defer гарантирует, что скрипты будут выполнены после завершения разбора HTML, в то время как async выполняет скрипты, как только они будут загружены. Использование defer рекомендуется для скриптов, зависящих от DOM, а async – для независимых скриптов.
Минификация JavaScript (уменьшение размера файлов)
Минификация – это процесс удаления незначащих символов (пробелов, комментариев) из JavaScript-кода, что уменьшает размер файлов и ускоряет их загрузку. Существуют онлайн-инструменты и плагины для автоматической минификации JavaScript.
Объединение JavaScript-файлов (уменьшение количества HTTP-запросов)
Объединение нескольких JavaScript-файлов в один уменьшает количество HTTP-запросов к серверу, что также ускоряет загрузку страницы. Однако, следует помнить, что слишком большие файлы могут замедлить время разбора JavaScript.
Встраивание небольших скриптов непосредственно в HTML
Небольшие скрипты можно встраивать непосредственно в HTML-код страницы (в теги <script>). Это позволяет избежать дополнительных HTTP-запросов, но увеличивает размер HTML-файла.
Альтернативные методы и предостережения
Использование дочерней темы для изменений
Всегда используйте дочернюю тему для внесения изменений в файлы темы оформления. Это позволит сохранить ваши изменения при обновлении основной темы.
Резервное копирование сайта перед внесением изменений
Перед внесением любых изменений в файлы сайта необходимо создать резервную копию, чтобы в случае возникновения проблем можно было восстановить работоспособность сайта.
Регулярный мониторинг производительности сайта
После внесения изменений необходимо регулярно мониторить производительность сайта с помощью инструментов анализа скорости, чтобы убедиться, что изменения привели к улучшению показателей.
Когда следует использовать плагины для оптимизации JavaScript
Хотя удаление неиспользуемого JavaScript можно выполнить вручную, в некоторых случаях использование плагинов для оптимизации JavaScript может быть более удобным и эффективным. Например, плагины могут автоматически минифицировать и объединять JavaScript-файлы, а также реализовывать отложенную загрузку и другие оптимизации. Выбор между ручным методом и использованием плагинов зависит от ваших технических навыков и сложности проекта.