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

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

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

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

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

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


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

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

  1. Critical CSS
  2. Critical
  3. Penthouse

И если с первыми двумя у меня как-то не задалось, 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 это делать не запрещает.
Поделиться публикацией
Комментарии 8
    +1
    А где научная работа, поиск решения, открытие?
    Просто «используйте это»?
    )':
      +1
      А мне просто плевать на глупые подсказки этого PageSpeed Insights. :)

      А так да, решение интересное. :)
        0
        Не знаю, как это влияет на ранжирование в Google или поведение посетителей, но на оплату от клиента это влияет напрямую!
        +3

        решение пригодно для статических сайтов, так ведь?

          0
          К сожалению, это всё не слишком подходит для динамических сайтов, на том же React, например.
            0
            Я правильно понимаю, что нужный CSS будет сгенерирован и вставлен только в один файл (index.html)? Как быть со всеми остальными?
              0
              Правильно! В моем случае я просто скопировал данный код для каждой страницы, но для больших проектов придется придумать более изощренное решение.
              0
              Проведя ряд экспериментов с разными утилитами для «abovethefold css» я выяснил, что все они не справляются со скрытыми элементами.
              Так если у вас вверху страницы сложное меню с картинками, утилиты добавят их. Хотя на самом деле для отображения они не нужны.
              То же часто бывает и с формами заказов например.

              Поэтому для себя выбрал все таки вручную. Ну, почти вручную — postcss-critical-css

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

              Самое читаемое