Как удалить неиспользуемые CSS и JavaScript в WordPress

Легкие темы, такие как Astra, GeneratePress и Genesis, намного меньше загружают CSS и скрипты на сайте. Это помогает удалить неиспользуемые ошибки CSS и JavaScript в инструменте Google PageSpeed ​​Insights и резко повысить показатель скорости.

Однако 99% коммерческих тем WordPress сочетают в себе множество функций и загружают тяжелые скрипты и CSS. Независимо от того, используете ли вы легкую или тяжелую тему, вам все равно понадобится множество функций через плагин. Комбинируя тему и плагины, общая оценка скорости будет зависеть от каждого исходного файла.

В этой статье мы объясним, как удалить неиспользуемые CSS и JavaScript в WordPress, чтобы улучшить показатель скорости страницы.

Что такое неиспользуемый CSS и JavaScript?

Поясним это на простом примере. Contact Form 7 — один из популярных плагинов для добавления контактных форм на ваш сайт. Как правило, вам нужна контактная форма на странице «Контакты» и, возможно, на нескольких других страницах. Вы не будете использовать контактную форму для каждого сообщения в блоге.

Однако плагин Contact Form 7 будет загружать CSS и JavaScript на каждую страницу и сообщение в блоге вашего сайта. Это большая проблема, когда у вас есть 1000 сообщений в блоге, и все они загружают скрипт / CSS контактной формы без необходимости. Эти ненужные CSS и скрипты называются неиспользуемыми CSS и неиспользуемыми скриптами.

Еще один хороший пример — магазин WooCommerce. Вам нужны стили и скрипты WooCommerce только на страницах магазинов, таких как продукты, архивы продуктов, корзина, касса и магазин. Однако у плагина нет возможности предотвратить загрузку файлов в сообщениях или на страницах блога.

Почему это проблема?

К сожалению, почти все плагины загружают ресурсы на всех страницах вашего сайта. Это сильно повлияет на скорость загрузки страницы и снизит оценку скорости в таких инструментах, как Google PageSpeed ​​Insights. Вы увидите ошибки, подобные приведенным ниже, как возможности, когда вы протестируете URL-адрес страницы в PageSpeed ​​Insights.


Ошибка PageSpeed ​​для неиспользуемых CSS и JS

Хотя инструмент говорит, что это не повлияет напрямую на оценку производительности, это оказывает огромное влияние на время загрузки. Кроме того, некоторые хостинговые компании взимают плату в зависимости от использования полосы пропускания.

Загрузка ненужных файлов CSS / скриптов на ваш сайт многократно увеличит использование полосы пропускания. Следовательно, необходимо идентифицировать неиспользуемые CSS и JavaScript и удалить их из загрузки на всех страницах.

Как определить неиспользуемые CSS и JavaScript?

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

  • Сначала очистите кеширование и отключите плагин кеширования на своем сайте. Теперь перейдите в инструмент Google PageSpeed ​​Insights и проверьте показатель скорости.
  • Щелкните сообщения «Удалить неиспользуемый JavaScript» и «Удалить неиспользуемый CSS», чтобы развернуть их. Google покажет все URL-адреса, которые можно удалить со страницы.

Просмотр неиспользуемых ресурсов в PageSpeed
  • Внешний код — Как видно на скриншоте выше, «pagad2.googlesyndication.com» принадлежит Google AdSense. Вы не можете удалить неиспользуемые CSS и JavaScript со сторонних веб-сайтов. Эти скрипты загружаются на ваш сайт с помощью плагинов для рекламы, аналитики, встраивания видео YouTube или социальных сетей. Итак, вы должны понимать, что эти внешние ресурсы будут влиять на скорость вашей страницы, и вы не сможете их контролировать, если не решите их удалить. Прочтите статью AdSense против скорости страницы, чтобы понять, что реклама убивает скорость вашей страницы.
  • Файлы плагинов и тем — мы объясним, как их удалить в следующем разделе.
  • Встроенный CSS и скрипты — они не отображаются в инструменте PageSpeed. Вы должны вручную идентифицировать и удалять их со своего сайта. Если плагин вставляет встроенный CSS / скрипт, отключите файлы плагина. Помните, что есть большая проблема с тяжелыми темами, в которых используется style.css с тысячами строк. Вам необходимо вручную удалить код внутри файла style.css, чтобы уменьшить размер.

Таким образом, неиспользуемые CSS и JavaScript легко удалить, если они загружены как отдельные файлы. Загрузка огромного файла style.css или встроенного CSS не может быть удалена, если вы вручную не просмотрите их и не удалите неиспользуемые коды. В качестве альтернативы вам может потребоваться найти легкую тему или плагин, чтобы избавиться от проблемы.

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

Установите плагин Asset CleanUp

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

  • Войдите в панель администратора WordPress и перейдите в раздел «Плагины> Добавить новый».
  • Введите «очистка ресурсов» в поле поиска и найдите плагин «Очистка активов: ускорение загрузки страниц».
Установить и активировать плагин
  • Нажмите кнопку «Установить сейчас», а затем активируйте плагин.
  • После активации плагина рекомендуем прочитать представленную документацию. Это необходимо для правильного использования плагина.
Прочтите руководства по началу работы
Прочтите руководства по началу работы

Настройки плагина

Плагин имеет множество настроек, которые мы не будем объяснять в этой статье. Если вы используете на своем сайте плагин кеширования, такой как WP Rocket, убедитесь, что не используете никаких других функций, кроме отключения неиспользуемых скриптов и CSS. Перейдите в меню «Очистка активов> Настройки», а затем на вкладку «Настройки использования плагина». Здесь вы можете выбрать способ просмотра и отключить неиспользуемые CSS / скрипты на ваших страницах.

  • Управляйте в Личном кабинете — включите эту опцию. Это поможет вам проанализировать страницу из редактора сообщений на панели администратора.
Включить управление на панели инструментов
Включить управление на панели инструментов
  • Управление во Front-end — если вы хотите анализировать страницу из внешнего браузера, включите эту опцию. В противном случае вы можете отключить это. Помните, что внешний анализ может выполняться только зарегистрированным пользователем с правами администратора. Пользователи, посещающие ваш сайт, не пострадают во время вашей проверки.
Включение или отключение управления во внешнем интерфейсе
Включение или отключение управления во внешнем интерфейсе
  • Макет списка активов — щелкните раскрывающийся список и выберите «Все стили и сценарии> Сгруппированы по расположению (темы, плагины, основные и внешние)». Это поможет вам просматривать файлы ресурсов, сгруппированные в разные категории.
Установить макет просмотра
Установить макет просмотра
  • Скрыть основной файл WordPress из списка ресурсов? — включите эту опцию, чтобы не испортить основные файлы WordPress.

Теперь перейдите на вкладку «Тестовый режим» и включите опцию «Включить тестовый режим». Это поможет вам убедиться, что сайт не работает после отключения скриптов и CSS, прежде чем сделать его общедоступным.

Включить тестовый режим
Включить тестовый режим

Нажмите «Обновить все настройки» внизу, чтобы применить изменения.

Удалите неиспользуемые CSS и JavaScript

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

  • Отключение скриптов и CSS из редактора — Отредактируйте любое существующее сообщение, чтобы перейти в редактор сообщений. Прокрутите вниз, чтобы просмотреть мета-поля из плагина Asset CleanUp. Просмотрите все CSS и скрипты, загруженные на этой странице, и отключите ресурсы, которые вам не нужны.
  • Отключение скриптов и CSS из Frontend — Если вы включили опцию «Управление во внешнем интерфейсе», откройте любое сообщение в интерфейсе браузера. Помните, что вы должны войти в свою административную панель WordPress на другой вкладке браузера. Внизу страницы вы увидите похожие мета-поля, отключающие ресурсы, загруженные на страницу.

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

Просмотр загруженных ресурсов в группе
Просмотр загруженных ресурсов в группе

Разверните каждую группу и просмотрите сведения о файлах, загруженных вашими плагинами и темами. Для каждого файла CSS и JS у вас есть несколько вариантов, как показано на рисунке ниже.

Отключить или включить CSS и JS
Отключить или включить CSS и JS
  • Выгрузите ресурс на страницу.
  • Отключить файл на всем сайте
  • Отключить для всех сообщений (он продолжит загружаться на страницах и пользовательских типах сообщений).
  • Некоторые другие опции, такие как использование RegEx, доступны только в профессиональной версии плагина.

После отключения файлов обновите свое сообщение, чтобы изменения вступили в силу на сайте.

Просмотр отключенных файлов и удаление тестового режима

  • Перейдите в раздел «Очистка активов> Массовые изменения».
  • Перейдите на вкладку «Сообщения, страницы и пользовательские типы сообщений» и выберите «Опубликовать» из раскрывающегося списка.
  • Здесь вы можете просмотреть все отключенные файлы на вашем сайте.
  • Установите флажок «Удалить массовое правило» и нажмите кнопку «Применить изменения» внизу, чтобы снова включить загрузку файла.
  • Кроме того, вы можете редактировать любые сообщения в редакторе сообщений и изменять поведение загрузки файлов.
Просмотр и удаление массовых файлов
Просмотр и удаление массовых файлов

Проверьте свой сайт и, если все в порядке, вернитесь на страницу настроек и отключите параметр «Тестовый режим». Это сделает изменения доступными для всех пользователей, посещающих ваш сайт. Точно так же вы можете отключить файлы CSS и JS на пользовательских типах сообщений, страницах и страницах продуктов, отредактировав их. Проверьте свои страницы с помощью инструмента Google PageSpeed ​​Insights, чтобы увидеть, удалены ли ошибки.

Заключительные слова

Как объяснялось, плагин поможет вам только отключить загрузку файлов CSS и JS из плагинов и тем. Вы должны избегать использования сторонних кодов и удалить ненужные коды внутри основного файла style.css. Мы рекомендуем использовать дочернюю тему для обновления таблицы стилей, чтобы вы не потеряли изменения при обновлении темы.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *