Above-the-Fold CSS — как ускорить загрузку сайта не замедлив разработку

В старые добрые времена мы с Google PageSpeed Insights были на короткой ноге. Я — клепал дешевые шаблоны, Google — ставил высокую оценку за скорость их загрузки. Однако со временем многое поменялось, и хоть я по-прежнему клепаю дешевые шаблоны, Google начал вставлять мне палки в колеса.

Я думаю многие видели следующие комментарии в отчетах Google PageSpeed Insights:

• Сократите CSS (HTML, JavaScript)
• Используйте кеш браузера
• Включите сжатие
• Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

И если с первыми тремя пунктами проблем, как правило, не возникает, последний пункт меня поставил в тупик.

Автоматическая генерация критического CSS

В интернете накопилось уже достаточно информации на эту тему. В двух словах Google заявляет, что мне следует отложить загрузку стилей, которые не влияют на отображение верхней части моей страницы, которая попадает в окно просмотра (viewport) сразу после загрузки страницы, а необходимые стили вставить непосредственно в код html.

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

1. Critical CSS ^[1]
2. Critical ^[2]
3. Penthouse ^[3]

И если с первыми двумя у меня как-то не задалось, 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 ^[4] с октября канул в лету, а спецификация WHATWG ^[5] это делать не запрещает.

Автор: Deka87

Источник ^[6]