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

 

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

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

Для 25 долларов короткий год он предлагает мощный инструмент, в который постоянно вносятся усовершенствования.

Я уже протестировал его на WordPress 5.8 и 5.9-RC, и пока что ничего не сломалось. Хотя я уже держал под контролем неиспользуемый CSS с помощью Менеджер сценариев этого плагина, просто активация этой опции экономит по крайней мере пару запросов и несколько Кб.

зачем удалять неиспользуемый CSS?

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


Обычные предупреждения в PageSpeed"Удалить неиспользуемый CSS" или"Уменьшить неиспользуемое содержимое CSS" обычно появляются, когда CSS, загруженный плагином или шаблоном, не нужен или не используется на конкретной странице

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

Иногда это также может привести к появлению предупреждений"Remove resources that block rendering".

Помимо получения лучшего результата PageSpeed, удаление неиспользуемого CSS оказывает значительное влияние на уменьшение времени, которое проходит с момента начала загрузки страницы до появления любой части ее содержимого на экране(FCP), времени, которое требуется для загрузки основного содержимого веб-страницы и его полной готовности для пользователя(LCP) и времени с момента начала загрузки страницы до ее полной интерактивности(TTI). Короче говоря, вы знаете, что важная часть истории Показатели Core Web.

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

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

Другой способ найти неиспользуемый CSS - использовать Chrome DevTools. Откройте инспектор в Chrome (Ctrl+Shift-I), нажмите Shitft+Control+P, введите "Coverage" и там Вы найдете неиспользуемые байты как для CSS, так и для JS. В красном цвете - неиспользованные, а в синем/зеленом - использованные.

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

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

Самый простой способ устранить предупреждения PageSpeed - это активировать функцию"Удалить неиспользуемый CSS" в Perfmatters, которая делает все это автоматически. Они утверждают, что протестировали его на сотнях URL (с различными шаблонами и конфигурациями) и сообщают о таких результатах:

Среднее снижение FCP на 15,20%.
Среднее снижение LCP на 19,66%.
Среднее снижение TTI на 14,95%.

Перед активацией

История Perfmatters рекомендует, чтобы перед включением этой опции Вы удалили любую существующую предварительную загрузку CSS, которая была настроена в Perfmatters (за исключением локальных таблиц стилей шрифты Google) и НЕ объединять CSS.

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

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

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

После активации Вы найдете три варианта:

1- Задержка (по умолчанию и рекомендуется).

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


2- Async

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


3- Удалить

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

После включения, страницы и сообщения будут вести себя по-другому.

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


Все используемые CSS, генерируемые Perfmatters, будут храниться локально в этом пути:

/wp-content/cache/perfmatters/tudomain.com/css/

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

Вот как выглядит CSS, сгенерированный Perfmatters, для страниц, постов, категорий, тегов, поиска, домашней страницы или 404s.

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

В поле"Excluded Stylesheets" Вы можете исключить определенные таблицы стилей из функции "Remove unused CSS", добавив полный URL источника(loquesea.css), или добавив отдельную часть URL источника. Формат: один на строку.

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

В следующем поле"Excluded Selectors" Вы можете исключить определенные CSS (селекторы) из функции "Remove unused CSS", добавив id элемента, имя класса и т.д. (#id, .class). Форматирование: по одному на строку.

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

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

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


Вы можете исключить отдельный пост, страницу или пользовательский тип поста из использования функции Clear Unused CSS. В редакторе, с правой стороны, снимите галочку с пункта"Unused CSS"

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


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

add_filter(‘perfmatters_remove_unused_css’, function($boolean) {
if(is_page()) {
return false;
}
return $boolean;
});

Perfmatters

Подписка по электронной почте

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