Что значит неиспользуемые стили?

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

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

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

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

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

• Откройте инструменты разработчика(Ctrl + Shift + I)
• Откройте командное меню(Ctrl + Shift + P)
• Введите «Coverage» и нажмите кнопку записи
• Выберите CSS файл на вкладке «Coverage», он будет открыт в окне выше.

Любой CSS, который находится рядом со сплошной зеленой линией, означает, что код был выполнен. Сплошной красный означает, что он не выполняется. Когда строка кода красная и зеленая – выполняется некоторый код из строки.

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

Сервисы для удаления неиспользуемых стилей

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

1. UnusedCSS

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

2. PurifyCSS

PurifyCSS – это бесплатный инструмент, который удаляет неиспользуемые CSS из ваших HTML, PHP, JavaScript и CSS файлов, прежде чем вы опубликуете их. С другой стороны, вам необходимо вручную указать, какие файлы необходимо сканировать(по одному), что делает процесс несколько утомительным. Вместо того, чтобы изменять исходные файлы, PurifyCSS создаёт новый файл с оптимизированным CSS. Поскольку PurifyCSS не работает с живыми веб-сайтами, вам необходимо использовать его на этапе разработки.

3. PurgeCSS

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

4. UnCSS

UnCSS более точный инструмент, чем PurgeCSS, так как он смотрит на реальные веб-страницы, а не на отдельные файлы стилей, но он медленнее и имеет больше ручных настроек. UnCSS наиболее полезен при использовании с другими инструментами. Например, вы можете объединить UnCSS с Grunt и Node.js для автоматизации удаления неиспользуемого CSS.

Альтернативные методы удаления

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

Небольшое предупреждение

Инструменты, обсуждаемые в этой статье, не идеальны. Есть много разных способов определения селекторов CSS; однако сопоставить селекторы с элементами в DOM может быть непросто, если у вас есть элементы, которые зависят от API или сторонних скриптов. Если вы хотите попробовать удалить неиспользуемый CSS вручную, вам нужно быть очень осторожным, чтобы случайно не нанести вред вашему проекту, удалив что-то важное. Тем не менее, вы должны знать свой веб-сайт лучше, чем кто-либо другой, и функция аудита DevTools может дать ценную информацию, которая поможет вам создать "более правильный" CSS с самого начала.

Резюме

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

Источник: https://www.keycdn.com/blog/remove-unused-css

CSSПереводПроизводительность

16.03.2019