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


27-01-2020
Денис Л.
Оптимизация
6
731
Как удалить неиспользуемые стили 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>, в футере. Проверьте, чтобы остались только те, которые получились у нас с Вами в результате минимизации.

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

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

Подписывайтесь на группу в ВКонтакте, вступайте в сообщество на Facebook, чтобы всегда быть в курсе актуальных выпусков
Web development blog!

Читайте также:

Автоматическая адаптация <iframe> на сайте

Скорость загрузки сайта и как её увеличить

Запуск скриптов JavaScript и стилей CSS только на определённых страницах сайта