Удаление лишнего из CSS с помощью Grunt и Uncss • WP Best

Какова задача

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

Сайт wp-best использует тему, построенную на технологии bootstrap. И один из стилевых файлов, который она подключает, называется ‘bootstrap.min.css‘, размер которого > 100кб.

Короткая справка.
При скорости в 1Mbps время загрузки файла размером составит 100 кб составит 0,5 мс-1 с.
Много это или мало, решать вам.

Но стоит учитывать, что даже доли секунд важны при ранжировании сайта поисковиками.
Следует помнить, что не у всех пользователей или во всех местах быстрый интернет. Время загрузки 100кб при скорости 128kbps составит целых 6 секунд! И это кроме основного контента и других файлов. Кто будет столько ждать?

Размер страницы важный фактор. Хорошим вариантом СЕО оптимизированной страницы можно считать размер < 300кб. Очевидно, здесь каждые килобайты на счету.

Это был краткий экскурс. А теперь пошаговая инструкция.

Удаление лишнего из CSS с помощью Grunt и uncss

Подготовка

Вам нужно создать тестовую версию сайта. Не рекомендую проводить эту работу на живом сайте!

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

  • С помощью плагина Duplicator, или вручную перенесите и установите сайт локально.

Всё просто до этого момента.
Дальше предполагается, что вы уверенный пользователь компьютера, можете устанавливать программы, запускать команды из командной строки.
Я провожу все действия в ОС Линукс.

Пошаговый процесс запуска задачи uncss в вашей инсталляции WordPress

  • Установите Nodejs, требование для работы менеджера задач Grunt

Для этого создайте файл ‘package.json‘ в корневой папке вашего сайта со следующим содержанием:

{
"name": "example-project",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1"
}
}

  • Перейдите в корневую папку вашего сайта, там где лежит файл ‘package.json‘, и запустите команду: npm install

После того как команда завершится успешно, в проекте появится папка ‘node_modules

Также вам надо установить grunt-cli, чтобы можно было работать с ним из консоли.
npm install -g grunt-cli

Создаем папку ‘mu-plugins‘ в папке ‘/wp-content‘, и сохраняем туда файл ‘grunt-sitemap.php‘.

npm install grunt-exec
npm install grunt-uncss --save-dev

В файле нужно изменить несколько строк.

Вот пример, что получается в моём случае.

module.exports = function(grunt) {

// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),

exec: {
get_grunt_sitemap: {
command: 'curl --silent --output sitemap.json //localhost:8080/wordpress/?show_sitemap'
}
},

uncss: {
dist: {
options: {
ignore : [],
stylesheets : ['wp-content/themes/beyond-magazine/css/bootstrap.min.css'],
ignoreSheets : [],
urls : [], //Overwritten in load_sitemap_and_uncss task
},
files: {
'wp-content/themes/beyond-magazine/css/bootstrap.clean.min.css': ['**/*.php']
}
}
}

});

// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-exec');
grunt.loadNpmTasks('grunt-uncss');

// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('load_sitemap_json', function() {
var sitemap_urls = grunt.file.readJSON('./sitemap.json');
// grunt.config.set('uncss.dist.options.urls', sitemap_urls);
grunt.config.set('uncss.dist.files', {'wp-content/themes/beyond-magazine/css/bootstrap.clean.min.css': [sitemap_urls]});
});

grunt.registerTask('deploy', ['exec:get_grunt_sitemap','load_sitemap_json','uncss:dist']);
};
  • Далее просто запускаем grunt deploy в терминале.

Результат, полученный мной, на скриншоте:
Uncss Bootstrap WordPress

Меня он радует, потому что уменьшение размера со 100кб до 10кб, это довольно ощутимо.

Конечно, полученный файл нужно протестировать. Скрипт не работает идеально. Возможно, придется перенести некоторые правила вручную.
Но по существу, всё должно работать замечательно.

Удачи в экспериментах и оставляйте ваши коментарии.

Подписаться
Уведомление о
guest
1 Комментарий
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
lacoste
2 лет назад

День добрый. Возникает ошибка Warning: Destination (./build/clean.style.css) not written because src files were empty. Use —force to continue.
Как решить?))

1
0
Оставьте комментарий.x
()
x
Пролистать наверх