Как удалить неиспользуемый CSS в WordPress (2 простых метода)

Каждая установленная вами тема и плагин могут добавить ненужный CSS на ваш сайт WordPress. Это может привести к замедлению времени загрузки. Как правило, эти таблицы стилей не нужны для отображения содержимого на странице, но они все еще присутствуют в коде. Поэтому вы можете искать простой способ удалить неиспользуемый CSS в WordPress.

К счастью, этот процесс проще, чем вы думаете. 🌞 После того, как вы определили ненужный код на своем сайте, вы можете использовать плагин, чтобы удалить его и повысить скорость вашего сайта.

Почему вы должны удалить неиспользуемый CSS

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

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

На самом деле, неиспользованный CSS может привести к плохой оценке самого большого содержания (LCP) в Core Web Vitals:

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

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

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

Как определить неиспользуемый CSS на вашем сайте

Хорошая новость заключается в том, что определить неиспользуемый CSS на вашем сайте несложно. Вы можете начать с запуска теста производительности на Статистика PageSpeed. Все, что вам нужно сделать, это ввести свой URL-адрес и нажать на Анализировать:

Кредит изображения: pagespeed.web.dev

После того, как тест будет готов, перейдите к Возможности раздел и ищите Уменьшить неиспользуемый CSS вкладка Если вы нажмете на него, вы увидите больше информации об этом коде:

Он также покажет вам, какие файлы CSS и плагины влияют на время загрузки:

Оранжевый квадрат для Удалить неиспользуемый CSS означает «Нуждается в улучшении», а красный треугольник обозначает очень плохой результат. Если вы не видите этот раздел в результатах тестирования, это означает, что на вашем сайте нет серьезных проблем с CSS (или, по крайней мере, на конкретной странице, которую вы тестировали — вы можете протестировать другие страницы, чтобы убедиться,).

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

Если PageSpeed ​​Insights пометил неиспользуемый CSS на вашем сайте, вы можете удалить его, чтобы оптимизировать производительность вашего сайта.

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

Способ 1: удалить неиспользуемый CSS с помощью Debloat

Как мы уже говорили, «неиспользуемый» CSS не обязателен. Поэтому удаление этих файлов никак не повлияет на дизайн ваших веб-страниц.

Однако, если вы случайно удалите неправильный код, вы можете сломать свой сайт. Итак, если вы не знакомы с кодированием, вы, вероятно, захотите использовать плагин для удаления неиспользуемого CSS.

Имея это в виду, мы рекомендуем Debloat для удаления неиспользуемого кода CSS. Это бесплатный плагин для оптимизации, который также может помочь вам улучшить ваши основные веб-жизненные показатели за счет задержки ресурсов, блокирующих рендеринг, минимизации кода и многого другого.

Для начала вам необходимо установить и активировать плагин на вашем сайте. Затем перейдите к Настройки > Деблоат: оптимизация и выберите Вкладка «Оптимизация CSS»:

Вверху вы увидите сообщение с советом использовать плагин кэширования, если вы планируете удалить неиспользуемый CSS. Если вас это интересует, вы можете попробовать бесплатный инструмент, такой как W3 Total Cache или WP-Optimize.

Затем прокрутите страницу вниз и поставьте галочку напротив Удалить неиспользуемый CSS:

Это покажет несколько других вариантов. Однако, если вам неудобно работать с кодом, не волнуйтесь, вам нужно будет выбрать только несколько настроек.

Вы захотите установить флажки для Включить для плагинов CSS и Включить для темы CSS:

Затем прокрутите вниз до Удалить CSS вкл. и выберите поле для Все страницы:

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

Обратите внимание, что этот метод не является точным на 100%, и некоторый неиспользуемый код может не работать. Тем не менее, если вы запустите еще один тест скорости после включения этих настроек, вы должны увидеть значительное улучшение производительности вашего сайта.

Если вы хотите использовать более мощный плагин, вы можете изучить WP Ракета. Этот премиальный инструмент поставляется с функциями оптимизации, включая кэширование страниц и браузера, сжатие GZIP, минимизацию кода и отложенную загрузку. Он также может удалить неиспользуемый CSS с вашего сайта.

Способ 2. Удалите неиспользуемый CSS с помощью Asset CleanUp.

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

Однако вы, возможно, ищете метод, который дает вам больше контроля над тем, какие файлы удалить, а какие оставить. В таком случае вам лучше подойдет Asset CleanUp. Этот плагин позволяет вам выбирать и удалять ненужные файлы CSS на постраничной основе.

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

Шаг 1. Установите плагин Asset CleanUp и включите тестовый режим.

Если вы все еще хотите попробовать этот метод, установите Asset CleanUp на свой сайт. Затем перейдите к Очистка активов > Настройки. После этого выберите Режим тестирования из бокового меню и используйте тумблер, чтобы включить эту функцию:

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

Шаг 2. Выгрузите неиспользуемые файлы CSS на каждой странице.

Теперь нажмите на CSS- и JS-менеджер вкладка Здесь вы можете удалить любые ненужные файлы с вашего сайта, начиная с главной страницы:

Если вы прокрутите вниз, вы увидите список всех загруженных файлов на этой странице:

Чтобы удалить файл CSS, вам просто нужно использовать тумблер для Выгрузить на этой странице:

Asset CleanUp сообщит вам, есть ли какие-либо «дочерние» файлы, которые зависят от этого файла и на которые может повлиять его удаление. Вы можете установить флажок для Игнорировать правило зависимости и оставить «детей» загруженными для поддержания этих файлов.

Имейте в виду, что если вы не уверены, какие файлы CSS удалить, вы можете обратиться к своим результатам в PageSpeed ​​Insights. Вы увидите URL этих файлов под Уменьшить неиспользуемый CSS раздел:

Затем вы можете найти их в Asset CleanUp. Если вы перейдете к Страницы на вкладке вы можете найти определенную страницу на своем сайте и просмотреть файлы CSS, которые на ней загружены:

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

Шаг 3. Протестируйте свой сайт

Наконец, мы рекомендуем вам тестировать свой сайт после каждого удаления файла, чтобы убедиться, что он работает правильно. Помните, что вам нужно войти в свою панель администратора WordPress, чтобы увидеть эти изменения. Если вы заходите на сайт как посетитель (т. е. пользователь, вышедший из системы), вы не сможете обнаружить какие-либо проблемы на своей странице, поскольку у вас включен тестовый режим.

Также важно отметить, что пока у вас включен тестовый режим, вы не увидите никаких улучшений в PageSpeed ​​Insights. В результатах по-прежнему будут отображаться неиспользуемые файлы CSS.

Как только вы убедитесь, что удаленные файлы не повлияли на ваш сайт, вы можете продолжить и отключить тестовый режим. Затем запустите тест скорости в PageSpeed ​​Insights. На этом этапе удаленные файлы CSS не должны появляться в результатах.

Премиальные плагины WordPress для удаления неиспользуемого CSS

Хотя оба вышеупомянутых инструмента бесплатны, вы также можете найти несколько действительно простых плагинов WordPress для удаления неиспользуемого CSS, если вы готовы платить.

Два лучших варианта это WP Ракета (от $59) и FlyingPress (от 60 долларов).

С WP Rocket вы получаете функцию удаления неиспользуемого CSS одним щелчком мыши, которая сканирует весь ваш сайт и удаляет неиспользуемый CSS постранично.

FlyingPress также предлагает аналогичное удаление неиспользуемого CSS одним щелчком мыши с возможностью загрузки неиспользуемого CSS более оптимальным способом или его полного удаления.

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

Еще несколько советов, которые помогут уменьшить неиспользуемый CSS

После того, как вы удалили неиспользуемый CSS на своем сайте (или, по крайней мере, большую его часть), вы захотите избежать добавления ненужного кода в будущем. На этом фронте есть несколько вещей, которые вы можете сделать, чтобы ваш сайт работал бесперебойно.

Во-первых, вы должны убедиться, что используете облегченную тему. Вообще говоря, легкая тема WordPress — это быстрая тема WordPress. Проще говоря, ваша тема должна содержать минимум кода и быть оптимизирована для Core Web Vitals.

Например, наша тема Neve отдает приоритет скорости и производительности. Фактически, при установке WordPress по умолчанию эта тема загружается менее чем за 1 секунду и имеет размер файла 28 КБ:

Точно так же вы захотите выбрать легкие плагины для своего сайта. Вы можете найти легкий тег при просмотре плагинов:

Кредит изображения: wordpress.org

Мы рекомендуем вам запустить тест скорости после установки нового плагина. Таким образом, вы можете проверить, содержит ли он неиспользуемый CSS.

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

Таким образом, если есть какие-либо плагины, которые вам больше не нужны, рассмотрите возможность их удаления. Обратите внимание, что их деактивации может быть недостаточно — они все еще могут загружать ненужный код и занимать место в вашей базе данных. Поэтому важно, чтобы вы полностью удалили их со своего сайта.

Удалите неиспользуемый CSS с вашего сайта уже сегодня 🚀

Неиспользуемый CSS может негативно сказаться на производительности вашего сайта. Этот код не требуется для отображения содержимого вашей страницы, но он по-прежнему загружается, что приводит к увеличению времени загрузки и низкой оценке LCP.

Удалив его со своего сайта, вы можете повысить производительность Core Web Vitals и улучшить взаимодействие с пользователем.

Напомним, вот как удалить неиспользуемый CSS в WordPress:

1. Используйте плагин, например Деблоат для автоматизации задачи. 🔌
2. Используйте такой инструмент, как Очистка активов удалить ненужный код вручную. 🔨

😎 Чтобы узнать о других способах улучшения показателей Core Web Vitals вашего сайта, вы также можете прочитать наши руководства о том, как 👉 ускорить отрисовку с наибольшим содержанием и как уменьшить кумулятивное смещение макета.

У вас есть вопросы о том, как удалить неиспользуемый CSS в WordPress? Дайте нам знать в комментариях ниже!

Бесплатное руководство

4 основных шага к ускорению
Ваш сайт WordPress

Следуйте простым шагам из нашей мини-серии из 4 частей.
и сократить время загрузки на 50-80%. 🚀