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

Вы хотите удалить неиспользуемый CSS в WordPress и сделать свой сайт быстрее?

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

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

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

 h1 { text-align: center; color: red; }

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

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

Ниже приводится краткое изложение этих методов.

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

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

Что такое неиспользуемый CSS в WordPress и почему это происходит?

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

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

Темы WordPress должны использовать файл styles.css в качестве основной таблицы стилей, хотя темы обычно используют дополнительные таблицы стилей для шрифтов, обложек тем и других элементов дизайна. Многие правила CSS, содержащиеся в файлах CSS темы, требуются только в определенных ситуациях. Несмотря на это, эти файлы CSS обычно загружаются на каждую страницу вашего сайта.

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

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

Как насчет критического CSS?

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

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

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

Быстрый способ обнаружить неиспользуемый CSS на странице — ввести его URL-адрес в инструмент отчета о производительности, такой как GTmetrix, Google PageSpeed ​​Insights или Pingdom Website Speed ​​Test. В отчете будут выделены неиспользуемые CSS и рекомендовано удалить или отложить неиспользуемые правила.

Современные браузеры предоставляют инструменты разработчика, которые помогут вам проанализировать дизайн и код веб-сайта. Параметры разработчика в Google Chrome называются Chrome DevTools, и его вкладку «Покрытие» можно использовать для поиска неиспользуемого кода Javascript и CSS. Это быстрый и эффективный способ найти файлы CSS, в которых много неиспользуемых правил.

Чтобы загрузить Chrome DevTools, все, что вам нужно сделать, это щелкнуть правой кнопкой мыши страницу и выбрать «Проверить» . Затем вы можете щелкнуть вкладку «Покрытие», чтобы увидеть URL-адрес каждого файла и указать, является ли файл Javascript, CSS или и тем, и другим. Справа вы можете увидеть общий размер файла в байтах и ​​общее количество неиспользованных байтов. На панели визуализации неиспользуемый код отображается красным цветом, а требуемый код — сине-зеленым цветом. Это кратко изложено на нижней панели, но если вы щелкнете по определенному файлу, вы увидите неиспользуемые правила CSS, выделенные красным цветом на панели выше.

Посетите страницу «Покрытие для разработчиков Chrome» для получения дополнительной информации о том, как работает вкладка «Покрытие».

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

• Инструмент JitBit Unused CSS — бесплатный сервис, который сканирует каждую страницу вашего веб-сайта и выделяет селекторы CSS, которые нигде не используются.
• PurifyCSS Online — полезный бесплатный инструмент, который выделяет неиспользуемый код и предоставляет вам чистые CSS-файлы.
• UnusedCSS — сервис премиум-класса, который сканирует URL-адреса страниц и предоставляет более чистые файлы CSS без лишнего кода (цена начинается от 25 долларов в месяц).

Хотя такие инструменты, как Chrome DevTools и PurifyCSS Online, могут быть полезны для просмотра неиспользуемых правил CSS на веб-сайтах, они не всегда практичны при решении проблемы неиспользуемого CSS на такой динамической платформе, как WordPress.

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

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

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

WP Rocket — одно из самых популярных решений для повышения производительности WordPress на рынке. Лицензия на WP Rocket доступна за 49 долларов в год.

В плагине есть инструмент, который может удалить весь неиспользуемый CSS с вашего сайта одним нажатием кнопки. В фоновом режиме WP Rocket просматривает все таблицы стилей и скрипты на каждой странице и сопоставляет правила CSS с селекторами CSS, которые находятся в коде HTML. Этот процесс выполняется извне на серверах WP Rocket, поэтому убедитесь, что ваш плагин безопасности WordPress внес в белый список IP-адрес их сервера.

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

Рекомендуем прочитать: Как очистить базу данных WordPress

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

Perfmatters — это решение для оптимизации, которое я использую на своем веб-сайте для удаления неиспользуемого кода CSS. Это премиальный плагин WordPress, который доступен всего за 24,95 доллара в год.

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

Я обнаружил, что этот плагин очень эффективен при работе с плохо оптимизированными плагинами WordPress. Возьмем, к примеру, джетпак. Даже если вы не используете какие-либо модули Jetpack для внешнего интерфейса вашего веб-сайта, он все равно будет загружать файл CSS размером 85,1 КБ на каждой странице вашего веб-сайта. Как вы можете видеть ниже, Perfmatters позволяет мне остановить загрузку этого ненужного файла CSS.

Удаление неиспользуемого CSS в WordPress с помощью Asset CleanUp

Отличная альтернатива Perfmatters — Asset CleanUp. Плагин можно использовать бесплатно, хотя доступна премиум-версия за 42,08 евро, которая открывает множество дополнительных функций.

Менеджер CSS и Javascript Asset CleanUp позволяет предварительно загружать файлы и отключать файлы на определенных страницах вашего веб-сайта. Исключения могут быть сделаны для зарегистрированных пользователей.

Если вы перейдете на Asset CleanUp Pro, вы получите больший контроль над тем, какие области вашего веб-сайта загружают файлы CSS и Javascript, и сможете добавлять дополнительные исключения для размера экрана и регулярных выражений.

Удаление неиспользуемых файлов CSS с помощью RapidLoad

Autoptimize — эффективный плагин WordPress для оптимизации, который позволяет объединять, минимизировать и кэшировать файлы CSS, Javascript и HTML. Плагин RapidLoad Power-Up для WordPress еще больше расширяет Autoptimize, помогая вам удалить неиспользуемый CSS в WordPress.

Как и инструмент оптимизации CSS WP Rocket, RapidLoad Power-Up сокращает время загрузки страницы, исследуя, какие правила CSS действительно необходимы.

Как следует из названия, плагин использует службу RapidLoad для уменьшения размера файлов CSS. Поэтому вам нужно будет зарегистрироваться в службе RapidLoad, чтобы использовать RapidLoad Power-Up. Ежемесячные планы доступны для RapidLoad за 5,83 доллара в месяц.

Последние мысли

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

Чтобы увидеть, сколько неиспользуемого CSS-кода находится на вашем собственном веб-сайте, я рекомендую выполнить некоторые тесты с помощью инструмента для создания отчетов о производительности, такого как GTmetrix, Google PageSpeed ​​Insights или Pingdom Website Speed ​​Test. Инструменты разработчика, такие как Chrome DevTools и PurifyCSS Online, также можно использовать, чтобы увидеть, сколько лишнего веса CSS добавляет страницам.

К счастью, мы можем удалить неиспользуемый CSS в WordPress, используя ряд решений для повышения производительности WordPress. Если вы предпочитаете автоматизировать процесс, я рекомендую использовать WP Rocket или RapidLoad Power-Up. Те из вас, кто имеет более практический подход к обслуживанию WordPress, предпочтут Perfmatters и Asset CleanUp, поскольку эти плагины дают вам полный контроль над тем, какие области вашего сайта загружаются в файлы CSS и Javascript.

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

Рекомендуем прочитать: Как отложить синтаксический анализ javascript в WordPress

Удачи.

Кевин