Как удалить неиспользуемые CSS и JS в WordPress (очень просто)
Наличие большого количества неиспользуемого CSS может замедлить работу вашего сайта. Если вы протестируете свой веб-сайт с помощью Google PageSpeed Insights, вы можете получить предупреждение об удалении неиспользуемого CSS. Есть простой способ сделать это без программирования и техники.
Наличие большого количества неиспользуемых CSS и JS на вашем сайте может ухудшить время его загрузки. Если вы проверите скорость загрузки своего сайта с помощью таких инструментов , как Google PageSpeed Insight , вы можете получить предупреждение о необходимости удалить неиспользуемые CSS-стили.
К счастью, есть очень простой способ сделать это. Вам не нужно обладать какими-либо специальными техническими знаниями, чтобы удалить неиспользуемые CSS и JS с вашего сайта WordPress.
Это стало возможным благодаря замечательному плагину Asset CleanUp: Page Speed Booster . С этим плагином удаление неиспользуемого CSS-кода осуществляется простым нажатием нескольких кнопок. В качестве альтернативы, если вы готовы потратить несколько долларов в год, в WP Rocket есть кнопка удаления неиспользуемого CSS-кода — просто активируйте её, и плагин автоматически удалит весь неиспользуемый CSS.
Ознакомьтесь: Топ-7 управляемых хостингов WordPress в Google Cloud
Что такое неиспользуемый CSS?
Неиспользуемый CSS — это файл CSS, который присутствует на странице, но в большинстве случаев не требуется для загрузки страницы. Когда посетитель открывает веб-сайт, браузер обычно должен загрузить, проанализировать и обработать все внешние таблицы стилей на посещенной странице, прежде чем он сможет отобразить содержимое страницы для посетителя. Если на такой странице существует какой-либо CSS, который не используется на странице, браузер будет тратить на это свое время.
Классическим примером этого является большинство используемых плагинов контактных форм. Эти плагины, хотя в основном используются только на странице «Свяжитесь с нами», загружают свой CSS по всему веб-сайту. Неважно, если это домашняя страница, где она не используется, CSS загрузится.
Если слишком много CSS, которые не нужны, но загружаются и замедляют время чтения и отображения страницы браузером, это может стать проблемой.
Помимо плагинов, разработчики тем пишут в style.css много чего, что в большинстве случаев не нужно. Но независимо от того, нужны они или нет, они загружаются всякий раз, когда загружается ваш сайт!
Один неиспользуемый CSS может не быть проблемой, но большое количество неиспользуемых CSS может повлиять на время загрузки вашего сайта.
Посмотрите: Топ-10 самых быстрых и лучших тем для WordPress
Как определить неиспользуемый CSS
Найти неиспользуемые CSS и JS очень просто. Есть два подхода, которые я рекомендую.
Одним из них является анализ вашего сайта с помощью Google PageSpeed Insight. Проверьте, есть ли на вашем сайте проблема с удалением неиспользуемых CSS. Нажмите на нее, и вы сможете определить компонент вашего сайта, отвечающий за это.
Вы можете видеть сверху, что записан один случай неиспользованного CSS. Я могу увидеть плагин и расположение неиспользуемого CSS, посмотрев на это.
Второй вариант – получить более подробный анализ. Вы можете добиться этого с помощью инструментов Chrome Dev.
В браузере Chrome откройте инструменты разработчика, затем перейдите в раздел «Покрытие кода». После этого нажмите кнопку «Обновить» в области покрытия кода. Подробное руководство по этому вопросу можно найти в инструментах разработчика Google.
Другой вариант — использовать jitbit для поиска неиспользуемых CSS-селекторов . Также можно использовать PurifyCSS для поиска неиспользуемых CSS-стилей.
Как удалить неиспользуемый CSS
Выполните следующие действия, чтобы удалить неиспользуемый CSS из WordPress:
1. Установите очистку активов
Перейдите к плагину, затем добавьте новый. Затем вы вводите «Asset CleanUp» в поле поиска на странице «Добавить новый плагин». Установите и активируйте плагин.
2. Перейдите в настройки плагина
Чтобы получить доступ к настройкам плагина, на панели инструментов WordPress нажмите «Настройки», затем нажмите «Очистка активов».
3. Выгрузите ненужные CSS и JS
В настройках плагина вам, возможно, придется признать, что вы знаете, как плагин работает под краном для удаления жира, прежде чем начать.
Чтобы выгрузить CSS и JS, нажмите «Менеджер CSS и JSS». Оттуда вы можете удалить любые CSS и JS, которые вам не нужны. Вы можете удалить его только для главной страницы, для всего сайта или для определенного URL-адреса. Вы также можете удалить для сообщений, страниц или категорий.
Примером является выгрузка любой контактной формы из загрузки для всего сайта, кроме страницы контактов.
Не торопитесь и избавьтесь от всех CSS и JS, которые, как вы знаете, не нужны. Убедитесь, что вы протестировали свой сайт после того, как закончите, чтобы убедиться, что все в порядке.
Удалите неиспользуемые плагины CSS WordPress.
Вот несколько плагинов, которые вы можете использовать для удаления неиспользуемого CSS в WordpPress:
1. Очистка ресурсов: ускорение страницы
Asset CleanUp: Page Speed Booster упрощает удаление неиспользуемых CSS и JS-файлов в WordPress даже для начинающих. Все, что вам нужно сделать, это деактивировать определенный CSS-код, который не требуется для конкретной страницы.
Вы также можете отключить только для отдельных сообщений. В премиум-версии вы можете деактивировать неиспользуемые CSS/JS с помощью плагинов.
Этот плагин представляет собой полный плагин производительности со многими другими опциями для ускорения WordPress. Удаление неиспользуемых CSS/JS — это только часть этого.
В этом посте я использовал этот плагин с руководством.
2. WP Rocket
WP Rocket — это плагин номер один для повышения производительности WordPress. Если вы новичок, то есть, если у вас нет опыта или вы не чувствуете себя комфортно в WordPress, то WP Rocket — это самый простой способ удалить неиспользуемый CSS.
Вам необходимо приобрести плагин, как только вы это сделаете, вы можете загрузить его из своей учетной записи или проверить свою электронную почту на наличие ссылки для скачивания.
Установите плагин через Панель инструментов>Плагины>Добавить новый>Загрузить.
Просто перейдите к настройкам WP Rocket и нажмите на вкладку «Оптимизация файлов». Затем прокрутите вниз, и вы увидите «Удалить неиспользуемый CSS», установите флажок, сохраните и очистите кеш.
3. Perfmatters
Perfmatters — это платный плагин, разработанный Брайаном Джексоном и его братом Бреттом Джексоном. Этот плагин позволяет очень легко удалять неиспользуемый CSS-код.
Во-первых, вам необходимо приобрести плагин. Затем установите его. Активировать лицензию. Когда вы перейдете к настройкам, включите диспетчер сценариев.
Просто зайдите на любую страницу или публикацию на своем сайте, вы увидите значок диспетчера скриптов в меню панели инструментов, нажмите на него. Вы сможете удалить неиспользуемые CSS и JS со страницы или глобально.
Этот плагин является плагином производительности, поставляется со многими другими опциями для ускорения WordPress. Удаление неиспользуемых CSS/JS является частью этого.
4. CSS-JS-менеджер
Менеджер CSS и JS позволяет удалять CSS или JS-код непосредственно с мобильных и настольных устройств. Выбор зависит от ваших целей.
Этот плагин также может откладывать загрузку файлов CSS или JS.
Заключение
Если у вас много неиспользуемых CSS и JS, вы заметите значительное улучшение показателей скорости и производительности.
Удалить весь неиспользуемый CSS может быть невозможно, но его количество можно свести к минимуму. Я использую Asset CleanUp для удаления неиспользуемого CSS для TargetTrend.
Помните, оптимизация важна, но не стоит слишком зацикливаться на ней, если, конечно, вы не хотите, чтобы ваш сайт выглядел как самый быстрый сайт в мире.
Читайте также:
Как устранить ресурсы, блокирующие рендеринг, в WordPress
Статьи по теме
