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 це робити не забороняє.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.