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

Большинство современных сайтов созданы на CMS. Причём, обычно системы управления включают в себя несколько шаблонов, с различными вариантами расположения блоков, с разными цветовыми схемами и с разным набором элементов. Разумеется, для всех этих элементов прописываются стили. Также, стили есть у плагинов. В итоге, получается набор стилей как минимум на полмегабайта, и штук 10 ссылок на разные файлы стилей, и это ещё в лучшем случае. А всё это безусловно влечёт за собой большое количество лишних запросов к серверу и получение лишних килобайтов данных. А чем больше запросов килобайтов - тем больше время загрузки сайта. А чем дольше загружается Ваш сайт - тем больше недовольства у Ваших пользователей. Ведь никто не любит ждать. А если пользователь заходит с мобильного устройства и имеет нестабильное соединение - так это вообще отличный шанс потерять пользователя, который через пару секунд ожидания просто закроет Ваш сайт и перейдёт к более быстрому сайту Вашего конкурента.

Для решения этой задачи есть несколько способов. Они делятся на 2 категории:

1. получение желаемого результата с помощью различных онлайн-сервисов (например, этот, или этот и других). Данный способ не имеет никаких настроек и может быть полезен для лендингов. Когда же на сайте много страниц и они разные по внешнему виду, этот вариант вряд ли будет нам полезен. Ведь нам нужен один файл стилей, который в итоге будет подходить одновременно под все страницы нашего сайта;
2. работа вручную, через программные платформы (например, Node.js) и консоль. Мы пойдём именно по данному пути, поскольку только в нём есть возможность гибкой настройки и получения идеального результата конкретно под наш проект. Если Вы никогда ранее не работали с консолью - попробуйте. Это прекрасно :)

Итак, как удалить все неиспользуемые стили на сайте

Перед началом работы небольшой комментарий. Вы можете выполнять данные действия как на своём сервере, так и в своей операционной системе (например, Windows). Результат будет один, количество затраченного времени - приблизительно также.

Для работы нам понадобится установленный Node.js. Установка проста, не требует специальных знаний, поэтому не будет рассматривать её в данном материале.

Итак, поехали!

❶Вручную копируем все стили в один файл. Для этого открываем исходный код страницы (CTRL+U), ищем стили (проходимся поиском по странице, ища теги со стилями, используя для поиска атрибут stylesheet) (он есть у каждого тега link, который ведёт на файл со стилями). Открываем в новом окне ссылку, указанной в атрибуте href данного тега, копируем код, вставляем в отдельный файл. Назовём его all_style.css.

Если у Вас любая популярная CMS, то часть стилей будет прописана прямо внутри страницы, чаще всего в области <head>. Копируем и эти стили, если они есть.

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

Для проверки файла стилей я обычно использую сервис autoprefixer. Он и все ошибки покажет, и автопрефиксами дополнит. Также много и других сервисов для валидации стилей (например, вот ещё один: w3.org); выбирайте любой, на Ваше усмотрение.

Кроме этого, нам нужно проверить, чтобы нигде не было указано @import, иначе во время выполнения скрипта возникнет ошибка.

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

❷Создаём папку. В неё помещаем наш файл со всеми стилями сайта. Кстати, обратите внимание на его размер. После окончания работ Вы сравните размер файла до оптимизации с размером файла после оптимизации. И сможете увидеть, сколько килобайт (а то и мегабайт) Вы сэкономили для Вашего проекта.

❸Затем нам нужно создать файл package.json и указать там те пакеты, которые мы будем использовать для работы.

Для наших целей вполне подойдёт следующая конфигурация:

{
  "name": "your_name",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-debug": "^4.0.0",
    "gulp-postcss": "^8.0.0"
  },
  "dependencies": {
    "gulp-clean-css": "^4.0.0",
    "gulp-uncss": "^1.0.6",
    "postcss-uncss": "^0.16.1"
  }
}

❹Затем нам нужно запустить консоль в этой папке. Если Вы используете Windows - нажмите Shift и, удерживая её, нажмите в пустом месте данной папки правую кнопку мыши. И выбирайте - "Открыть окно команд". Если Вы работаете в UNIX-подобных системах, думаю, Вам не нужно объяснять, как открыть терминал и оказаться в нужной папке :)

Убедитесь, что у Вас уставлен Node.js и актуальная версия менеджера пакетов NPM. Для этого введите команду

npm -v

Если Вы увидите номер версии, то всё ОK. Продолжаем работу. Выполняем команду:

npm i

Начнут устанавливаться пакеты, указанные в файле package.json. Ждём окончания установки.

Мы почти готовы к началу минимизации. Осталось создать файл gulpfile.js и запустить gulp. Кто ещё не знаком с gulp'ом (здесь есть ещё такие? :)), Gulp - это таск-менеджер для автоматического выполнения часто используемых задач, написанный на JavaScript. Он удобен, прост в освоении и помогает автоматизировать огромное количество рутинных задач.

❺Сохраняем содержимое файлов html. Есть вариант не делать этого и указать ссылки на html-код ниже в виде массива из URL, но я не рекомендую так делать. Дело в том, что нам нужен не исходный код страницы, а финальный код. Вы спросите, чем они отличаются? Объясняю - если на Вашем проекте много JavaScript, то исходный html-код Вашей страницы будет меняться "на лету", в том числе, при построении страницы. Т.е. JavaScript будет менять разметку страницы по мере своего выполнения. Если Вы точно знаете, что JavaScript на Вашем проекте никак не участвует в изменении первоначальной разметки страницы, то можете не выполнять этот пункт и перейти к следующему.

А для тех, кто остался на этом пункте - открываем отладчик браузера (F12), выбираем вкладку Elements, затем щёлкаем правой кнопкой мыши по корневому элементу html, выбираем Copy --> Copy outerHTML. Затем вставляем это всё в отдельный файл, называем его 01.html.

К примеру, 01.html - это содержимое главной страницы нашего сайта. Также нужно создать аналогичные файлы с содержимым других шаблонов страниц. Допустим, у Вас интернет-магазин. Вот сколько страниц с html-кодом у Вас получится:

- главная страница

- страница с любой категорией товаров

- страница с любым конкретным товаром

- страница заказа товара

- страница корзины

- страница с контактами

- страница с описанием Вашего магазина

- ещё какие-то страницы, внешний вид которых имеет индивидуальный внешний вид.

Итого у Вас должно получиться примерно около 10-ти страниц с индивидуальным внешним видом.

Перед следующим шагом у Вас должен быть установлен gulp, глобально. Если не уставлен - используем команду:

npm install gulp -g

❻Создаём файл gulpfile.js. Далее в нём пишем следующее содержимое:

const gulp      = require('gulp'),
      postcss   = require('gulp-postcss'),
      uncss     = require('postcss-uncss'),
      cleanCss  = require('gulp-clean-css');

// здесь пишем название файла, в котором мы разместили стили со всего нашего сайта
const styleFile = 'all_style.css';

gulp.task('default', function() {
    var plugins = [
        uncss({ // ниже перечисляем те страницы, которые у нас получились на пункте 5
            html: ['01.html','02.html','03.html','04.html','05.html','06.html','07.html']
            // если Вы пропустили пункт 5 и решили вписывать URL вместо сохранения html-кода, то вписываем выше URL, через запятую, каждый URL отдельно, в кавычках. Подробнее - здесь
        }),
    ];
    return gulp.src(styleFile)
        .pipe(postcss(plugins))
        .pipe(cleanCss({
            level: 2, // это самый сильный вариант объединения стилей. Подробнее - здесь
            format: 'keep-breaks' // с этим значением итоговые стили будут написаны с переносом каждого правила на новую строчку. Подробнее - здесь
        }))
        .pipe(gulp.dest('dist'));
});

❼Выполняем команду:

gulp

После выполнения данной команды, у Вас появится папка dist, в которой будут лежать минифицированные стили для Вашего сайта. Среди стилей будут только те, которые реально нужны для Вашего проекта. Смотрите на размер файле, радуйтесь!

❽Удаляем вызов стилей внутри Вашей CMS. Это отдельная и достаточно сложная тема. Возможно, рассмотрим её как-нибудь отдельно. В каждой CMS это реализовано по-разному и в разных местах. Пройдитесь по всем файлам сайта через поиск внутри содержимого файлов и ищите имена файлов со стилями. Пройдитесь по базе данных, ищите там. Задача удаления встроенных стилей - намного более обширная, чем кажется. Тем не менее, удалив все старые стили, Вы будете наслаждаться результатом. Удаляйте все старые стили в области <head>, в футере. Проверьте, чтобы остались только те, которые получились у нас с Вами в результате минимизации.

Также, почитайте статью как ускорить и другие параметры, влияющие на скорость загрузки сайта.

Радуемся результату и скорости загрузки сайта!