В этом посте вы узнаете, как найти и удалить неиспользуемый CSS на вашем сайте и снизить размер файлов стилей WordPress неиспользуемого кода без каких-либо плагинов.
Почему нужно удалять неиспользуемые CSS?
Тебя бы здесь не было, если бы ты не хотел оптимизировать производительность своей веб-страницы. Ты наверняка прогонял свой сайт через PageSpeed и получил предложение удалить неиспользуемый CSS.
Многие сайты используют множество сторонних библиотек или готовых тем, с большим количеством функций и кода, чтобы покрыть все возможные сценарии, в то время как только небольшая часть из них действительно используется. В итоге ты переносишь мегабайты неиспользуемого CSS (мертвого кода), из-за чего твой сайт загружается очень долго.
Как найти неиспользуемый CSS?
Если вы используете WordPress, к сожалению, нет простого способа найти неиспользуемый CSS, например, просто установив плагин и выполнив некоторые шаги настройки. Хотя в Интернете есть несколько инструментов, которые помогают найти необходимый CSS, отправив свой URL-адрес.
Purifycss.online и unused-css.com, например, просматривает твою веб-страницу и проверяет все файлы CSS, а также инлайн-стили. Но будь осторожен: он удалит все правила CSS, которые не используются на указанной странице, даже если некоторые из них могут использоваться на подстраницах. У тебя есть возможность вставить несколько URL, но если ты управляешь сайтом с сотнями страниц, это может оказаться довольно громоздким. Вставь все стили сюда jonassebastianohlsson.com/criticalpathcssgenerator/ и получишь critical css для всего сайта, этот стиль можно разместить инлайн в шапку сайта.
Как использовать очищенный CSS-код на своем WordPress-сайте
1. Загрузи очищенную таблицу стилей
Теперь, если у тебя уже есть твой очищенный CSS-код, давай скопируем и вставим его в новый файл, назовём его styles.pure.css и загрузим его в папку твоей темы (если ты используешь предварительно созданную тему, надеюсь, ты уже создал дочернюю тему).
Если ты хочешь иметь отдельные CSS-файлы для каждого типа страниц, ты можешь назвать свои файлы styles.front-page.pure.css, styles.pages.pure.css, styles.blog.pure.css, styles.archives.pure.css и т.д.
2. Удали существующие таблицы стилей
Теперь тебе нужно удалить все ссылки на таблицы стилей с твоей веб-страницы. Ты можешь сделать это, выполнив итерацию по всем поставленным в очередь стилям и удалив их. Добавь это в свой файл functions.php:
// set a variable to make it easy to enable and disable the purifycss feature
// while testing, just append this parameter to your url: http://www.yourwebsite.com/?purifytest
$purifyCssEnabled = array_key_exists('purifytest',$_GET);
// when you're done, set the variable to true - you will be able to disable it anytime with just one change
// $purifyCssEnabled = true;
function dequeue_all_styles() {
global $wp_styles;
foreach( $wp_styles->queue as $style ) {
wp_dequeue_style($wp_styles->registered[$style]->handle);
}
}
if ($purifyCssEnabled) {
// this will remove all enqueued styles in head
add_action('wp_print_styles', 'dequeue_all_styles', PHP_INT_MAX - 1);
// if there are any plugins that print styles in body (like Elementor),
// you'll need to remove them as well
add_action('elementor/frontend/after_enqueue_styles', 'dequeue_all_styles',PHP_INT_MAX);
}3. Убедись, что все стили были удалены
Теперь открой URL твоей веб-страницы с параметром ?purifytest, и ты должен увидеть только необработанное содержимое твоей страницы. Открой средство просмотра исходного кода в браузере и убедись, что там не осталось <link rel=»stylesheet» …> и блока <style>…</style>.
4. Удали inline-стили, если таковые есть
К сожалению, в WordPress нет хука для удаления инлайн-стилей, так как они не зачисляются, как ссылки на файл стилей.
Единственная возможность, которая приходит мне в голову (пожалуйста, дай мне знать в комментариях, если есть лучший способ), — это пройтись по HTML, который собирается быть отображенным, и удалить встроенные стили с помощью регулярных выражений. Чтобы перехватить весь HTML, нам нужно сделать обходной путь с буфером вывода.
Добавь это в свой файл functions.php:
/* Remove inline <style> blocks. */
function start_html_buffer() {
// buffer output html
ob_start();
}
function end_html_buffer() {
// get buffered HTML
$wpHTML = ob_get_clean();
// remove <style> blocks using regular expression
$wpHTML = preg_replace("/<style[^>]*>[^<]*</style>/m",'', $wpHTML);
echo $wpHTML;
}
if ($purifyCssEnabled) {
add_action('template_redirect', 'start_html_buffer', 0); // wp hook just before the template is loaded
add_action('wp_footer', 'end_html_buffer', PHP_INT_MAX); // wp hook after wp_footer()
}5. Поставьте в очередь очищенный CSS
function enqueue_pure_styles() {
wp_enqueue_style('pure-styles', get_stylesheet_directory_uri().'/styles.pure.css');
}
if ($purifyCssEnabled) {
// enqueue our purified css file
add_action('wp_print_styles', 'enqueue_pure_styles', PHP_INT_MAX);
}Если решил иметь отдельные файлы CSS для каждого типа страниц, то можно использовать встроенные условия для задания имени файла:
function enqueue_pure_styles() {
$suffix = '';
if (is_front_page()) {
$suffix = '.front-page';
} else if (is_page()) {
$suffix = '.pages';
} else if (is_single()) {
$suffix = '.blog';
} else if (is_archive()) {
$suffix = '.archives';
}
wp_enqueue_style('pure-styles', get_stylesheet_directory_uri().'/styles'.$suffix.'.pure.css');
}6. Протестируйте изменения!
Имей в виду, что ты мог потерять CSS-код, который используется на подстраницах или зависит от какого-то взаимодействия с пользователем, например, модальный диалог, сообщения валидации формы, обратные вызовы AJAX и т.д.
Несколько советов, на что обратить внимание:
- Наведи курсор и нажми на каждый элемент
- Попробуй отправить свои формы с неполными или недействительными данными
- Также тестируй страницы, которые не связаны с твоей главной страницей или через основную навигацию
- Тестируй на разных размерах экрана — не только изменяя размер окна, но и на разных физических устройствах
- Тестируй в разных браузерах!
- Добавь недостающий фрагмент стилей в конец файла.
7. Adjust purified CSS code
Если обнаружил стили, отсутствующие в очищенном коде, сначала убедись, что добавил URL страницы в «дополнительные URL» на purifycss.online.
Если это так, то скопируй соответствующий HTML-код нестилизованного элемента (например, модального всплывающего окна) и добавь его в «пользовательский HTML-код».
Для этого щелкни правой кнопкой мыши на элементе, нажмите «Inspect Element«, затем в представлении элемента щелкните правой кнопкой мыши на теге и нажмите «Copy > Copy outerHTML«.
Затем в purifycss.online вставь код в раздел “Добавить пользовательский HTML-код”.
А затем повтори шаг 1 😉
Бонусный совет: Оптимизация отрисовки первого контентного рисунка (< 2 с) (First Contentful Paint)
Теперь снова проверь свой показатель PageSpeed.
Но есть еще одна вещь, которую можешь оптимизировать. Важен не только показатель PageSpeed, гораздо большее значение имеет воспринимаемая скорость вашего сайта. Если вашему сайту требуется более 2 секунд, чтобы показать первый значимый контент, ваши пользователи будут раздражены и могут уйти еще до того, как страница начнет отображаться.
Даже если неиспользуемый CSS удален, стили все равно могут быть слишком большими. Пока браузер загружает файл CSS, ваша веб-страница остается пустой. На медленных соединениях (мобильные 3G) это может занять больше времени, чем хотелось бы.
Было бы гораздо лучше, если бы браузер мог сразу загрузить CSS, необходимый для отображения первой видимой части страницы. Остальное можно было бы загружать после того, как наиболее важный контент уже будет виден. Эта техника называется Critical Path CSS. По сути, включать стили необходимые для содержимого, как inline-стиль, а остальное загружается асинхронно. Читайте подробнее о том, как найти critical CSS.