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