Удаление неиспользуемых стилей CSS вручную и специнструментами

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

Почему CSS код может тормозить страницу?

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

Каждая внешняя таблица стилей загружается из сети. Любое дополнительное сетевое обращение требует времени. Соответственно увеличивается и интервал ожидания от начала загрузки сайта, до возможности с ним взаимодействовать.

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

Что такое CSS простым языком

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

Как только браузер видит заглавие, он обращается к CSS и понимает, что с ним надо делать. К примеру – написать зелёным цветом посредине экрана. Таким образом, благодаря Cascading Style Sheets, пользователь видит страницу в нужном разработчику виде.

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

Если речь идёт о критическом CSS, то наиболее оптимальный подход — встроить его в <head> HTML. Как только HTML загружен, браузер имеет все, что ему нужно для отображения страницы. Больше не нужно делать сетевые запросы.

Выглядит данная связка примерно таким образом:

<!doctype html>

<html>

<head>

<style>

/* Critical CSS here. */

</style>

…

Это уже позволяет оптимизировать рендеринг контента. При этом, существенное влияние данная процедура оказывает далеко не всегда.

Если вы обнаружили CSS который сайт не использует — его стоит удалить. Это гораздо эффективнее. Чтобы пользователь получал максимально быструю загрузку страницы, встройте все рабочие CSS коды в HTML, а с ненужными — попрощайтесь навсегда. К тому же, если вам потребуется внести изменения в таблицу в определённый момент, то это проще сделать, когда они содержатся в порядке.

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

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

В браузере Google Chrome содержится инструмент, позволяющий видеть все коды на странице и определяющий какие из них используются. Для того, чтобы им воспользоваться, достаточно произвести простые действия:

Открыть Chrome DevTools
При помощи «cmd + shift + p» открыть командное меню
Ввести команду «Охват»
Выбрать «Показать охват»
Выбрать файл CSS и файл откроется во вкладке «Источники»

CSS помеченные зелёной чертой — используются, а красной — нет. Если в одном коде присутствует и зелёная и красная строка, данное обозначение свидетельствует, что используется только часть кода.

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

Как удалить неиспользуемые CSS при помощи специальных инструментов

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

UnusedCSS. Удобная в использовании программа. Достаточно просто указать URL-адрес сайта, аудит которого нужно провести и оптимизация произойдёт в автоматическом режиме. UnusedCSS самостоятельно определит и удалит все неиспользуемые CSS коды и покажет сколько места было сэкономлено таким образом. Минусом данной программы является тот факт, что она не работает на этапе тестирования сайта, а может взаимодействовать с ним только после запуска.
PurifyCSS. Бесплатный сервис, который удаляет правила CSS из HTML, PHP, JavaScript и CSS-файлов на этапе тестирования сайта, до его запуска. Неудобство состоит в том, что какие конкретно файлы необходимо сканировать, требуется указать вручную. Программа автоматически не удаляет файлы, а выводит PurifyCSS с необходимыми изменениями. Именно эта опция и не может быть интегрирована в работающий сайт.
PurgeCSS. Сервис автоматически сравнивает контент сайта с CSS-правилами и удаляет те из них, которые не используются. Он имеет удобный и интуитивно понятный интерфейс. Неудобство в использовании программы состоит в необходимости задавать белый список CSS вручную. Если на сайте используются плагины — это может отнять довольно много времени.

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