удалить неиспользуемый код css wordpress

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

Возможно, вы столкнулись с предупреждением «Удалить неиспользуемый CSS» при анализе сайта с помощью Google PageSpeed ​​Insights.

Использование WordPress означает работу с несколькими файлами style.css и JavaScript не только из выбранной темы, но также и из плагинов. Использование темы на сайте, которая предназначена для предоставления нескольких макетов и различных элементов HTML, таких как:

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

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

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

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

Этот метод полезен для сайтов HTML и сайтов без динамических элементов.

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

Пошаговый процесс удаления неиспользуемого CSS:

Инструменты для поиска неиспользуемого кода CSS

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

PurifyCSS

Это бесплатный инструмент, который удаляет неиспользуемый CSS из файлов HTML, JavaScript, PHP и CSS. Для работы очистителя потребуется файлы с исходным кодом HTML, а также файл с кодом CSS, который может иметь несколько экземпляров. В нашем случае основная часть нашего CSS находится в файле style.css, который поставляется с темой WordPress.

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

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

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

UnCSS Online

Unused CSS online — это бесплатный онлайн-инструмент, который генерирует минимизированную версию используемого CSS.

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

UnusedCSS

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

PurgeCSS

PurgeCSS работает аналогично PurifyCSS, но он более сложный. Он удаляет неиспользуемый CSS с помощью сравнения строк. Одна из вещей, которые вам могут не понравиться — это то, что вы должны вручную добавлять файлы CSS, не указанные в путях, поэтому может быть довольно сложно, если ваш сайт использует некоторые плагины, такие как HTML Forms.

Например, Beaver Builder является одним из наиболее часто используемых конструкторов веб-сайтов WordPress. Но у него есть одна проблема — он накапливает много ненужных файлов CSS и JavaScript, которые сайт не использует. Этот вид CSS-файла создает дополнительные запросы к серверу и, как следствие, увеличивает время загрузки страницы. Их много, но вот список некоторых распространенных:

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

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

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

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

Вы можете выгружать неиспользуемые ресурсы (CSS и JS) с определенных страниц, используя плагин Asset CleanUp. Этот плагин доступен бесплатно в хранилище плагинов WordPress. И вы можете использовать Asset CleanUp для удаления неиспользуемых CSS-файлов из WordPress.

Current Version: 1.3.8.4

Last Updated: 23.09.2021

Пошаговая процедура для выгрузки неиспользованного CSS (и JS) в WordPress:

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

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

1. Расщепление кода

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

Есть несколько способов взглянуть на разделение кода, вы можете: разделить код на основе URL-маршрутов, поэтому вам не нужно загружать код для страницы 2 на странице 1. Или вы можете разделить большой код style.css на несколько файлов и внедрить необходимые файлы на соответствующих страницах.

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

2. CSS, который вставляется с помощью плагинов

Может быть, это лень разработчика, или, может быть, это недостаток знаний, но иногда с помощью плагинов некоторые нежелательные файлы CSS и JavaScript внедряются в страницы, которые могут не требовать их. Хорошим показательным примером является плагин Contact Form 7. Он внедряет файлы CSS и JavaScript во все страницы, содержат ли эти страницы контактную форму или нет.

3. Динамические элементы (JS Inserted CSS)

Рассмотрим сценарий, в котором JavaScript используется для запуска динамического элемента страницы, такого как поле поиска, всплывающие уведомления и т. д. В этом случае JS может содержать классы CSS и другие теги HTML, которые используются для динамических элементов.

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

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

Вывод

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

Источник

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

Обновлено: 16 июня 2020

Возможно, вы столкнулись с предупреждением «Удалить неиспользуемый CSS» при анализе сайта с помощью Google PageSpeed ​​Insights.

Использование WordPress означает работу с несколькими файлами style.css и JavaScript не только из выбранной темы, но также и из плагинов. Использование темы на сайте, которая предназначена для предоставления нескольких макетов и различных элементов HTML, таких как:

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

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

Этот метод полезен для сайтов HTML и сайтов без динамических элементов.

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

Пошаговый процесс удаления неиспользуемого CSS:

Инструменты для поиска неиспользуемого кода CSS

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

PurifyCSS

Это бесплатный инструмент, который удаляет неиспользуемый CSS из файлов HTML, JavaScript, PHP и CSS. Для работы очистителя потребуется файлы с исходным кодом HTML, а также файл с кодом CSS, который может иметь несколько экземпляров. В нашем случае основная часть нашего CSS находится в файле style.css, который поставляется с темой WordPress.

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

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

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

UnCSS Online

Unused CSS online — это бесплатный онлайн-инструмент, который генерирует минимизированную версию используемого CSS.

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

UnusedCSS

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

PurgeCSS

PurgeCSS работает аналогично PurifyCSS, но он более сложный. Он удаляет неиспользуемый CSS с помощью сравнения строк. Одна из вещей, которые вам могут не понравиться — это то, что вы должны вручную добавлять файлы CSS, не указанные в путях, поэтому может быть довольно сложно, если ваш сайт использует некоторые плагины, такие как HTML Forms.

Например, Beaver Builder является одним из наиболее часто используемых конструкторов веб-сайтов WordPress. Но у него есть одна проблема — он накапливает много ненужных файлов CSS и JavaScript, которые сайт не использует. Этот вид CSS-файла создает дополнительные запросы к серверу и, как следствие, увеличивает время загрузки страницы. Их много, но вот список некоторых распространенных:

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

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

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

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

Вы можете выгружать неиспользуемые ресурсы (CSS и JS) с определенных страниц, используя плагин Asset CleanUp. Этот плагин доступен бесплатно в хранилище плагинов WordPress. И вы можете использовать Asset CleanUp для удаления неиспользуемых CSS-файлов из WordPress.

Версия: 1.3.6.4

Обновление: 2 недели назад

Требуемая версия WordPress: 4.5 или выше

Совместим вплоть до: 5.4.2

Активные установки: 70 000+

Пошаговая процедура для выгрузки неиспользованного CSS (и JS) в WordPress:

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

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

1. Расщепление кода

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

Есть несколько способов взглянуть на разделение кода, вы можете: разделить код на основе URL-маршрутов, поэтому вам не нужно загружать код для страницы 2 на странице 1. Или вы можете разделить большой код style.css на несколько файлов и внедрить необходимые файлы на соответствующих страницах.

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

2. CSS, который вставляется с помощью плагинов

Может быть, это лень разработчика, или, может быть, это недостаток знаний, но иногда с помощью плагинов некоторые нежелательные файлы CSS и JavaScript внедряются в страницы, которые могут не требовать их. Хорошим показательным примером является плагин Contact Form 7. Он внедряет файлы CSS и JavaScript во все страницы, содержат ли эти страницы контактную форму или нет.

3. Динамические элементы (JS Inserted CSS)

Рассмотрим сценарий, в котором JavaScript используется для запуска динамического элемента страницы, такого как поле поиска, всплывающие уведомления и т. д. В этом случае JS может содержать классы CSS и другие теги HTML, которые используются для динамических элементов.

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

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

Вывод

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

Источник

Как вы избавляетесь от неиспользуемого CSS-кода? Часть 1

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

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

Зачем избавляться от неиспользуемого CSS?

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

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

Предположим, вы загружаете 100 Кб CSS. Я бы сказал, что это много. (В тот момент, когда я это пишу, на сайте css-tricks.com используется около 23 Кб CSS. Здесь имеется довольно много страниц и шаблонов. При этом я ничего особого не делал для того, чтобы уменьшить размер CSS.) Тут у вас возникает подозрение, что некую часть из этого объёма кода вы не используете. А, может быть, вы находите некие доказательства этого. Я тут вижу причину бить тревогу. Если у вас имеется JPG-файл объёмом в 100 Кб, который можно сжать до 20 Кб, обработав его неким инструментом, то это замечательно, и это стоит сделать. Но если нечто подобное сделать с CSS, то подобное гораздо важнее. Дело в том, что CSS загружается в начале загрузки страницы и является ресурсом, блокирующим рендеринг. JPG-файлы такими ресурсами не являются.

Анализ ситуации с помощью инструментов разработчика Chrome

Инструменты разработчика Chrome, вкладка Coverage

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

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

Моя первостепенная проблема

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

Неиспользуемые фрагменты CSS

Он думает: «Отлично, удаляю всё лишнее!». Лишнее удаляется, а потом оказывается, что было оно вовсе не лишним, и что его удаление привело к большим проблемам со стилизацией на всём сайте. Вот в чём тут дело: можно быть полностью уверенным в том, что некий CSS-селектор не используется, только если провести изыскания по следующему плану:

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

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

PurifyCSS Online

Я решил попробовать оптимизировать css-tricks.com с помощью ресурса PurifyCSS Online. Ему можно передавать ссылки, а он тут же выдаёт готовый к использованию CSS. Я «скормил» этому сайту css-tricks.com и в моём распоряжении оказался новый CSS-код. Вот что получилось после того, как я этим кодом воспользовался.

Слева — обычный вид css-tricks.com. Справа — результат применения нового, «очищенного» CSS. В этом новом коде недоставало много такого, что нужно для различных страниц сайта

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

Очистка CSS с помощью PurifyCSS как часть процесса сборки проекта

PurifyCSS, вероятно, чаще используется в роли инструмента, применяемого при сборке проекта, чем в роли онлайн-средства для очистки CSS. В документации проекта есть инструкции по его использованию при применении Grunt, Gulp и webpack. Вот, например, обработка файлов по шаблонам:

Такой подход позволяет добиться гораздо большей точности. Материалы сайта, передаваемые на анализ, могут представлять собой список, в который входит каждый шаблон, каждый фрагмент, используемый для построения страниц, каждый JavaScript-файл. Может оказаться так, что подобный список ресурсов непросто поддерживать, но это позволяет учесть всё, что можно учесть. Это, правда, не относится к содержимому страниц, лежащему в неких хранилищах (вроде блог-постов, которые хранятся в базе данных), и к стороннему JavaScript-коду, но, возможно, это в некоторых случаях и неважно, или, может быть, разработчик способен будет как-то учесть CSS-нужды подобных ресурсов.

В документации к конкуренту PurifyCSS PurgeCSS есть предупреждение, касающееся способа обработки ресурсов, используемого PurifyCSS. А именно, речь идёт о том, что PurifyCSS может работать с ресурсами любых типов, а не только с HTML и JavaScript. PurifyCSS в ходе работы анализирует все слова в файлах и сравнивает их с селекторами в CSS-коде. Каждое слово рассматривается как селектор. То есть — множество селекторов может быть ошибочно признано используемыми на сайте. Например, в текстовом наполнении файла, в обычном предложении, может присутствовать слово, соответствующее некоему CSS-селектору.

Об этой особенности PurifyCSS стоит помнить. Этот инструмент ищет CSS-селекторы в материалах сайта, применяя предельно простой алгоритм. Это, с одной стороны, толковая идея, а с другой — это довольно-таки опасно.

Сервис UnusedCSS

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

Я оформил платную подписку на этот сервис и проанализировал с его помощью css-tricks.com. Надо признать, что после того, как я взглянул на результаты, у меня возникло такое ощущение, что выглядят они гораздо точнее, чем то, что мне доводилось видеть раньше.

Анализ css-tricks.com с помощью UnusedCSS. В отчёте говорится о том, что на сайте используется 93% от загружаемого CSS-кода. Мне это кажется близким к истине, так как я вручную написал весь CSS-код для этого сайта

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

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

Уважаемые читатели! Сталкивались ли вы с проблемой наличия неиспользуемого CSS-кода в своих проектах?

Источник