Если на вашем сайте WordPress используется платная тема WordPress или популярная тема из официального репозитория тем WordPress, велика вероятность того, что тема разрабатывается для различных сценариев использования. И вы можете использовать только небольшой набор всех функций, доступных в теме.
В этом случае ваш сайт загружает много неиспользуемого CSS, который не требуется для стилизации страниц вашего сайта. Например, используемая вами тема WordPress может иметь стили и для страниц WooCommerce, но если вы ведете только блог на своем сайте WordPress, то вы не используете CSS, включенный для страниц WooCommerce на своем сайте и, таким образом, обслуживаете неиспользуемые. CSS для пользователей.
Если вы тестировали свой веб-сайт с помощью инструмента Google Pagespeed, вы, вероятно, уже знаете, что на вашем сайте есть неиспользуемые проблемы CSS. В этом руководстве мы покажем вам, как сначала проверить неиспользуемый CSS, а затем использовать бесплатный инструмент для удаления неиспользуемого CSS с вашего сайта WordPress.
Как проверить неиспользуемый CSS
Google Chrome DevTools (тот, который вы видите, когда нажимаете опцию «Проверить» в контекстном меню) имеет функцию покрытия на вкладке «Источники». Вы можете использовать опцию Coverage, чтобы найти неиспользуемые CSS и JS, загружаемые вашим сайтом.
- Откройте свой сайт в Chrome на рабочем столе.
- Щелкните правой кнопкой мыши пустое место на вашем сайте и выберите Осмотреть из контекстного меню.
- Нажать на Источники вкладка, нажмите Ctrl + Shift + P чтобы открыть командное окно, введите покрытие и выберите Начать анализ покрытия и перезагрузить страницу из доступных команд.
- На вкладке «Покрытие» щелкните значок URL-фильтр поле и введите здесь корневой домен вашего сайта, чтобы отображались только внутренние файлы CSS / JS.
└ Проверьте Неиспользованные байты столбец, чтобы увидеть процент данных, загружаемых в файл CSS / JS из вашей темы.
- Щелкните файл CSS, чтобы просмотреть неиспользуемый CSS (отмеченный красными полосами), загруженный вашим сайтом. CSS, который используется на текущей странице, будет показан с зелеными полосами.
После того как вы проанализировали весь неиспользуемый CSS, загружаемый на ваш сайт, пора его удалить. Есть несколько бесплатных инструментов для удаления неиспользуемого CSS с веб-страниц. Ниже представлен один из популярных инструментов, который я тестировал и использовал в своих проектах.
Используйте PurifyCSS Online для удаления неиспользуемого CSS
Обычно в WordPress можно найти плагин практически для всего. Но для удаления неиспользуемого CSS, к сожалению, нет ни одного плагина. Поэтому мы будем использовать ручные инструменты, не относящиеся к Wordpress, чтобы удалить неиспользуемый CSS с вашего сайта.
PurifyCSS - самый удобный инструмент, не предназначенный для разработчиков вы можете найти способ справиться с неиспользуемым CSS. Инструмент имеет простой пользовательский интерфейс, позволяющий пользователям указывать либо URL-адрес веб-сайта, либо код HTML и CSS. Для WordPress мы будем использовать параметр URL и предоставлять ссылки на все типы страниц вашего сайта, чтобы инструмент мог получать CSS от всех и оптимизировать для неиспользуемого CSS.
Вот краткий список страниц, которые следует добавить в инструмент:
- URL домашней страницы
- Несколько URL-адресов страниц сообщений из каждой категории на вашем сайте
└ Это необходимо для того, чтобы CSS был включен во все элементы сообщения.
- Контакты, О нас, Конфиденциальность и всевозможные разные страницы, которые могут быть на вашем сайте.
- Страница архива, страница поиска, страницы авторов
- Страницы с произвольным типом сообщений
Горячий совет: Создайте сообщение / страницу с `` функциями '' со всеми элементами темы, которые вы используете или можете использовать в будущем, такими как таблица, галерея изображений, код, предварительные, упорядоченные списки, неупорядоченные списки, формы, вкладки, аккордеоны, блоки Гутенберга, которые вы обычно используете , и т.д.
Используйте этот URL-адрес публикации «features» в инструменте PurifyCSS Online, чтобы убедиться, что CSS для часто используемых элементов включен.
Ударь Очистить CSS после того, как вы добавили все соответствующие типы URL-адресов со своего сайта в инструмент PurifyCSS Online.
Скопируйте новый CSS, созданный инструментом, и используйте его на своем сайте. Убедись, что ты сделайте резервную копию исходного style.css и другие файлы CSS в вашей теме перед заменой нового CSS, созданного PurifyCSS.
Подсказка: Вы можете использовать встроенный редактор тем WordPress для редактирования файлов CSS вашей темы или использовать программу FTP / SFTP для подключения к серверу и удобного редактирования файлов с помощью редактора Блокнота.