В старые добрые времена мы с Google PageSpeed Insights были на короткой ноге. Я — клепал дешевые шаблоны, Google — ставил высокую оценку за скорость их загрузки. Однако со временем многое поменялось, и хоть я по-прежнему клепаю дешевые шаблоны, Google начал вставлять мне палки в колеса.
Я думаю многие видели следующие комментарии в отчетах Google PageSpeed Insights:
- Сократите CSS (HTML, JavaScript)
- Используйте кеш браузера
- Включите сжатие
- Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы
И если с первыми тремя пунктами проблем, как правило, не возникает, последний пункт меня поставил в тупик.
Автоматическая генерация критического CSS
В интернете накопилось уже достаточно информации на эту тему. В двух словах Google заявляет, что мне следует отложить загрузку стилей, которые не влияют на отображение верхней части моей страницы, которая попадает в окно просмотра (viewport) сразу после загрузки страницы, а необходимые стили вставить непосредственно в код html.
Вручную выделять нужные стили я посчитал задачей невыполнимой, поэтому занялся поиском средства автоматизировать этот процесс. На сегодняшний день я нашел только три инструмента, созданных с целью генерации необходимых стилей:
И если с первыми двумя у меня как-то не задалось, Penthouse оказался именно тем инструментом, который я искал. Поскольку для сборки проектов я использую Gulp, ниже будет представлен код для gulpfile.js.
1. Устанавливаем необходимые модули:
$ npm install --save-dev penthouse
$ npm install --save-dev gulp-inject-string
2. Открываем gulpfile.js и подключаем их:
var penthouse = require('penthouse');
var inject = require('gulp-inject-string'); // необходим для вставки стилей непосредственно в код html
3. Далее необходимо указать путь к вашей странице и стилям:
gulp.task('penthouse', function () {
penthouse({
url: 'src/index.html', // страница вашего сайта
css: 'src/css/styles.css', // файл со стилями
width: 1280,
height: 800
}, function (err, criticalCss) {
gulp.src('src/index.html')
.pipe(inject.after('<!-- Critical CSS -->', 'n<style>n' + criticalCss + 'n</style>'))
.pipe(gulp.dest('dist'))
});
});
В данном примере стили будут вставлены непосредственно после комментария Critical CSS в файл index.html.
Готово! Теперь Google PageSpeed Insights перестанет ругаться на этот пункт, и переместит его во вкладку «Выполненные правила».
Как подключить остальные файлы со стилями?
Многие советуют подключать их асинхронно с помощью JavaScript, однако для себя я нашел довольно простой выход — подключить их в конце кода html перед закрывающимся тэгом body, но перед JavaScript. Кто-то скажет, что выносить элементы с аттрибутом rel за пределы head невалидно, однако HTML5.0 с октября канул в лету, а спецификация WHATWG это делать не запрещает.
Автор: Deka87