Как удалить неиспользуемый CSS, чтобы уменьшить CSS-файлы

От автора: не секрет, что более компактные сайты работают быстрее, чем раздутые. Не позволяйте ненужным стилям CSS тормозить ваши веб-проекты; используйте инструменты и методы, описанные ниже, чтобы уменьшить CSS и улучшить общую производительность веб-сайта.

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

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

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

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

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

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

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

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

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

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

1. UnusedCSS

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

2. PurifyCSS

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

3. PurgeCSS

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

4. UnCSS

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

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

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

Предостережения относительно удаления неиспользуемого CSS

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

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

Теперь давайте рассмотрим, как мы можем использовать один из перечисленных выше инструментов, чтобы очистить таблицы стилей. В этом руководстве Дина Хьюма, объясняется, как настроить Node.js, Grunt, UnCSS и еще один плагин под названием CSSmin на машине под Windows, чтобы автоматически удалять неиспользованный CSS.

1. Установите Node.js

Загрузите последнюю версию с сайта Node.js и следуйте инструкциям по установке.

2. Установите Grunt

Откройте Node.js и введите в командной строке следующее:

npm install -g grunt-cli

Grunt будет загружен и установлен автоматически.

3. Откройте папку проекта.

Используя командную строку Node.js, перейдите в папку, содержащую файлы, которые вы хотите просканировать с помощью UnCSS. Вы можете сделать это, введя путь к файлу. Например:

cd C:TestProject

4. Установите UnCSS и CSSMin

Введите в командной строке Node.js следующее:

npm install grunt-uncss grunt-contrib-cssmin --save-dev

UnCSS и пакет CSSMin будут установлены в указанной папке проекта.

5. Создайте файл Grunt.js

Создайте в корневой директории проекта файл JavaScript. gruntfile.js действует как файл конфигурации для таких плагинов, как UnCSS. Введите этот код в командную строку Node.js:

module.exports = function (grunt) { grunt.initConfig({ uncss: { dist: { files: [ { src: 'index.html', dest: 'cleancss/tidy.css' } ] } }, cssmin: { dist: { files: [ { src: 'cleancss/tidy.css', dest: 'cleancss/tidy.css' } ] } } }); // Загрузка плагинов grunt.loadNpmTasks('grunt-uncss'); grunt.loadNpmTasks('grunt-contrib-cssmin'); // Задачи по умолчанию. grunt.registerTask('default', ['uncss', 'cssmin']); };

В приведенных выше инструкциях указывается, чтобы UnCSS просканировал файл index.html на предмет неиспользуемого CSS и создал обрезанный файл CSS внутри папки с именем cleancss. Плагин CSSmin минимизирует новый файл CSS, который по умолчанию будет называться tidy.css. Последние несколько строк особенно важны, поскольку они загружают и регистрируют оба плагина.

6. Запустите Grunt

Наконец, вам нужно вернуться в папку исходного файла и запустить Grunt следующим образом:

cd C:TestProject>grunt

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

Заключение

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

Автор: Cody Arsenault

Источник: https://www.keycdn.com/

Редакция: Команда webformyself.