TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

1 711

Легкие темы, такие как Astra, GeneratePress и Genesis, намного меньше загружают CSS и скрипты на сайте. Это помогает удалить неиспользуемые ошибки CSS и JavaScript в инструменте Google PageSpeed ​​Insights и резко повысить показатель скорости. Однако 99% коммерческих тем WordPress сочетают в себе множество функций и загружают тяжелые скрипты и CSS. Независимо от того, используете ли вы легкую или тяжелую тему, вам все равно понадобится множество функций через плагин. При объединении темы и плагинов общая оценка скорости будет влиять на каждый исходный файл на сайте. В этой статье мы объясним, как удалить неиспользуемые CSS и JavaScript в WordPress, чтобы улучшить оценку Google PageSpeed ​​Insights.

По теме: Прочтите более 400 бесплатных руководств по WordPress.

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

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

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

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

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

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

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

Хотя инструмент говорит, что это не повлияет напрямую на оценку производительности, это оказывает огромное влияние на время загрузки. На данный момент 30% баллов приходится на время блокировки, а неиспользованные ресурсы CSS / JS и блокировки рендеринга опускают балл до самого низа. Кроме того, некоторые хостинговые компании взимают плату в зависимости от использования полосы пропускания. Загрузка ненужных файлов CSS / скриптов на ваш сайт многократно увеличит использование полосы пропускания. Поэтому необходимо определить неиспользуемые CSS и JavaScript и удалить их из загрузки на всех страницах.

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

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

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

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

Просмотр неиспользуемых ресурсов в PageSpeed

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

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

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

Есть два способа удалить неиспользуемые файлы CSS и JS при загрузке страницы в браузере. Первый вариант – использовать плагины премиум-класса, такие как WP Rocket, а второй вариант – использовать бесплатный плагин. Мы подробно объясним оба метода, чтобы вы могли проверить и выбрать для себя простой.

Удалите неиспользуемый CSS с помощью WP Rocket

WP Rocket – самый популярный плагин кеширования для WordPress, который предлагает супер простой пользовательский интерфейс. Чтобы сократить время загрузки страницы, вам необходимо приобрести плагин и обновить его до последней версии (выше 3.9).

  • Перейдите в меню «Настройки> WP Rocket» в панели администратора WordPress.
  • Щелкните вкладку «Оптимизация файлов» и прокрутите вниз до раздела «Файлы CSS».
  • Включите опцию «Неиспользуемый CSS (бета)» и подтвердите опцию «Активировать удаление неиспользуемого CSS» в предупреждающем сообщении.

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

Удалите неиспользуемый CSS в WP Rocket

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

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

Удаление неиспользуемого CSS завершено

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

Удалите неиспользуемый JavaScript с помощью WP Rocket

В отличие от CSS, удаление JS с помощью плагина WP Rocket невозможно. Однако вы можете включить параметры «Загрузить отложенный JavaScript» и «Отложить выполнение JavaScript» в разделе «Оптимизация файлов> Файлы JavaScript». Это приведет к задержке как внутреннего, так и внешнего кода и устранит проблемы с блокировкой рендеринга JavaScript.

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

Отложить выполнение JavaScript

Убедитесь, что ваш сайт работает нормально после включения этих параметров.

Использование плагина Asset CleanUp для удаления неиспользуемых CSS и JavaScript

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

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

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

Установить и активировать плагин

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

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

Прочтите руководства по началу работы

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

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

  • Управлять в Личном кабинете – включите эту опцию. Это поможет вам проанализировать страницу из редактора сообщений на панели администратора.

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

Включить управление на панели инструментов

  • Управление во внешнем интерфейсе – если вы хотите анализировать страницу из внешнего браузера, включите эту опцию. В противном случае вы можете отключить это. Помните, что интерфейсный анализ может выполняться только зарегистрированным пользователем с правами администратора. Пользователи, посещающие ваш сайт, не пострадают во время вашей проверки.

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

Включение или отключение управления во внешнем интерфейсе

  • Макет списка ресурсов – щелкните раскрывающийся список и выберите «Все стили и сценарии> Сгруппированы по местоположению (темы, плагины, основные и внешние)». Это поможет вам просматривать файлы ресурсов, сгруппированные в разные категории.

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

Установить макет просмотра

  • Скрыть основной файл WordPress из списка ресурсов? – включите эту опцию, чтобы не испортить основные файлы WordPress.

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

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

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

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

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

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

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

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

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

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

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

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

Отключить или включить CSS и JS

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

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

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

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

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

Просмотр и удаление массовых файлов

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

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

Мы надеемся, что эта статья будет полезна для удаления неиспользуемых файлов CSS и JavaScript с вашего сайта и улучшения показателей Google PageSpeed. Мы рекомендуем использовать WP Rocket, так как легко удалить CSS и отложить внешний JS несколькими щелчками мыши. Если вы используете бесплатный плагин Asset Cleanup, он поможет вам только отключить загрузку файлов CSS и JS из плагинов и тем. Вы должны избегать использования сторонних кодов и вручную удалять ненужные коды внутри основного файла style.css. При ручном редактировании файлов убедитесь, что вы используете дочернюю тему для обновления таблицы стилей, чтобы вы не потеряли изменения при обновлении темы.

Источник записи: www.webnots.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее