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

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

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

• Полная ширина
• Левая боковая панель
• Правая боковая панель
• Пользовательские типы записей
• таблицы
• Поисковая строка
• формы
• Навигационные меню.

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

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

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

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

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

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

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

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

1. Выберите один из инструментов, упомянутых ниже.
2. Создайте используемый и неиспользованный CSS для вашего сайта.
3. Удалите неиспользуемый CSS из файлов стилей вручную.
4. Сохранить изменения.
5. Протестируйте свой сайт снова, чтобы увидеть изменения.

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

Можно вручную удалить неиспользуемый CSS с помощью браузера Google Chrome. На вкладке DevTools есть инструмент, который обнаруживает и позволяет увидеть, какой код выполняется на странице, а какой код не используется. Откройте инструменты разработчика Chrome комбинацией клавишей Ctrl + Shift + I на Windows (Command + Shift + I на Mac). После Ctrl + Shift + P, затем введите «Coverage» и нажмите «Show coverage». Выберите файл CSS на вкладке «Coverage», который откроется на вкладке «Sources». Код 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-файла создает дополнительные запросы к серверу и, как следствие, увеличивает время загрузки страницы. Их много, но вот список некоторых распространенных:

• Imageloaded — используется для проверки загрузки всех изображений.
• jQuery waypoints — используется для выявления элементов во время прокрутки сайта (вам это не нужно, если на вашем сайте нет такой опции).
• jQuery FitVids — если на вашем сайте нет видео, оно вам не нужно.
• Magnific popup — используется для лайтбокса, но многим веб-сайтам это не нужно.

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

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

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

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

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

Asset CleanUp: Page Speed Booster

Author(s): Gabe Livan

Current Version: 1.3.9.3

Last Updated: 01.08.2023

wp-asset-clean-up.1.3.9.3.zip

98%Ratings 100 000+Installs WP 4.5+Requires

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

• Установите и активируйте плагин.
• Перейдите в Настройки плагина CSS & JS Manager.
• В CSS & JS Manager вы можете включить «Управление в интерфейсе» для управления файлами из интерфейса для вошедшего в систему пользователя (администратора).
• Если вы включили опцию «Управление в интерфейсе», вы увидите все ресурсы в интерфейсе страницы, когда войдете в свой WordPress. В противном случае вам нужно будет отредактировать запись или страницу, чтобы увидеть загрузку ресурсов на определенной странице.
• Теперь перейдите на страницу, на которой вы хотите выгрузить css или JS.
• Внизу страницы вы увидите все ресурсы (файлы CSS, JS), загружаемые на этой странице.
• Отсюда вы можете выгрузить файл CSS (или любой другой ресурс) с определенной страницы.
• И, наконец, нажмите кнопку «Обновить», чтобы сохранить изменения.
• Теперь протестируйте свой сайт с помощью инструмента быстрого тестирования, чтобы увидеть изменения.

Почему неиспользуемый 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. Но вы все равно можете работать над этим, чтобы минимизировать разницу. Если вам нужна помощь, попросите кого-нибудь с большим опытом или доверьтесь тому, кто сделает это вместо вас. Удачи!

style.css?ver=6.3.1 как убрать?

Ответ: Найти место, где задается версия стилей в файле function.php темы похожую на wp_enqueue_style( 'themename-style', get_stylesheet_uri(), array(), _S_VERSION );. Затем удалить _S_VERSION. Или вставить следущий код в functions.php для удления версии из css и js файлов.