Як і чому ви повинні инлайнить критичний CSS

31

Від автора: на світанку інтернету веб-сайти в основному показували тільки текстову інформацію. Повільно, але вірно швидкість з’єднання зростала, і поступово користувачі могли завантажувати зображення і відео високої якості досить швидко. Зараз сайти не просто дають необхідну інформацію у текстовому вигляді, сайти стали складніше. З’явилися CSS і JS-фреймворки, плагіни і т. д. Завантаження всіх цих додаткових файлів займає певний час.

Більш швидкий сайт забезпечує кращий користувальницький досвід, що може сильно вплинути на його успіх. Як розробникам підвищити продуктивність? Розробники можуть використовувати один метод, який сильно підвищить продуктивність. Можна инлайнить критичний CSS, а решті завантажувати асинхронно. У цій статті ми пройдемося по всіх етапах і допоможемо вам підвищити продуктивність вашого сайту.

Що таке критичний CSS?

До критичного CSS відноситься той код, який відповідає за стилі видимій частині сторінки сайту при завантаженні. До контенту видимої частини відноситься контент, який користувач бачить самим першим після завантаження. Це може бути меню та інші елементи. Вкрай важливо правильно застосувати стилі і як можна швидше промалювати цю частину сторінки.

Тут варто також зазначити, що користувачі можуть заходити на ваш сайт через безліч пристроїв з різними дозволами екрану. Так що сам контент видимої частини екрану нічого не вирішує. Щоб вирішити цю проблему, до критичного CSS коду потрібно віднести також стилі базового макета і шрифтів.

В сучасних практиках по розробці часто рекомендують инлайнить критичний CSS. Такий код вставляється на сторінку наступним чином:

An Optimized Web Page
(Минифицированный критичний CSS повинен бути тут)
(Your markup)

Чому инлайнить стилі обов’язково?

Якщо ви зайдете на Google PageSpeed Insights і проаналізуєте одну з сторінок вашого сайту, вам може вискочити попередження про оптимізацію вставки CSS за допомогою вбудовування критичних стилів і асинхронної завантаження інших стилів.

Браузер не стане малювати видиму частину сторінки, поки не завантажить всі файли CSS, з чим можуть виникнути проблеми, якщо файлів багато.

Не у всіх ваших користувачів буде швидке з’єднання, і вони не будуть чекати, поки завантажаться бібліотеки, CSS і JS. Якщо вони не зможуть отримати той контент, за яким прийшли, це буде дуже погано. Навіть у користувачів з швидким з’єднанням може загубитися мережу, наприклад, при проїзді по тунелю. Перебуваючи в тунелі, у користувачів буде доступ до основного вмісту у тому випадку, якщо критичний CSS вбудований в розмітку, а всі інші файли завантажуються тільки після відображення основного вмісту.

На зображенні нижче показана різниця між звичайною і оптимізованої сторінкою. З скріншота видно, що оптимізована сторінка відображає контент на 0.5 секунди раніше. Різниця буде більш помітною, коли буде підключено багато додаткових бібліотек.

Чи потрібно вам инлайнить критичний CSS?

Все залежить від ситуації. Якщо ви не використовуєте важкі фреймворки або бібліотеки, а файли CSS важать мало, то вам не потрібно вбудовувати стилі.

Якщо ж ви працюєте з фреймворком типу Bootstrap, можливо, ви не скористаєтесь усіма можливостями цього фреймворку. В такому випадку можна вирізати критичний CSS файлів фреймворку, а сам Bootstrap завантажувати асинхронно. Це має значно підвищити швидкість завантаження сайту.

Инлайновые стилі можна кешувати, в той час як HTML часто не кешують. В цьому криється різниця. Пам’ятайте про це, коли робите оновлення! Крім того, вбудовані стилі збільшують вагу сторінки при кожній її завантаженні. Приміром, якщо на кожній сторінці сайту є додатково 30Кб инлайновых стилів, то перегляд 10 сторінок одним користувачем обійдеться вам в 300 кб. Може здатися, що все не так погано, проте в деяких частинах світу передача даних дуже дорога (а також на деяких 3G/4G тарифах). Переконайтеся, щоб стилі, які ви хочете вбудувати в розмітку, дійсно були критичні для сторінок, щоб ви не инлайнили все підряд.

Як знайти критичний CSS

Шукати критичний CSS самому досить складно і нудно. На щастя, є спеціальні інструменти, які прискорять цей процес.

З допомогою Grunt

Якщо ви знайомі з Grunt, то там є плагін, який спрощує цей процес — grunt-critical. Якщо ви більше любите Gulp або npm, дивіться розділи нижче. Спочатку необхідно встановити плагін за допомогою команди:

npm install grunt-critical —save-dev

Також необхідно створити файл Gruntfile.js. У ньому буде зберігатися весь код з налаштуваннями плагіна, в тому числі дозволи екрану і шлях до файлу. Приклад:

module.exports = function(grunt) {
grunt.initConfig({
critical: {
extract: {
options: {
base: ‘./’,
width: 1024,
height: 768,
minify: true
},
src: ‘path/to/initial.html’,
dest: ‘path/to/final.html’
}
}
});
grunt.loadNpmTasks(‘grunt-critical’);
grunt.registerTask(‘default’, [‘critical’]);
};

Ми використовуємо метод grunt.initConfig всередині функції-обгортки, щоб задати всі налаштування. У прикладі я вказав шлях, куди будуть записуватися кінцевий і початковий файли. Також я поставив опцію minify в true. Так я отримаю минифицированную версію критичних стилів. Властивості src вказується шлях до вихідного файлу, з яким ми будемо працювати. Властивості dest вказується шлях до кінцевого файлу, який потрібно зберегти.

Якщо в dest вказаний файл стилів, кінцевий CSS зберігається в окремий файл. Якщо в dest вказаний файл розмітки (HTML, PHP тощо), то CSS вбудовується, а існуючі стилі обертаються в JS функцію для асинхронної завантаження. Для користувачів з відключеним JS додається блок noscript. Також є й інші опції. Повний список можна подивитися в документації. Тепер плагін можна запустити, набравши в консолі grunt: C:\path\to\project>grunt

Якщо вихідний файл був таким:

The Optimizer

All the stuff markup

то тепер він став таким:

The Optimizer
Минифицированный инлайновый CSS
JavaScript для асинхронної завантаження стилів …

All the stuff markup

Як видно, плагін все робить за вас. Якщо тепер прогнати сторінку через PageSpeed, результат повинен стати краще. У багатьох випадках результат змінюється з 86 до 95.

Є і інші плагіни для Grunt, які роблять те ж саме — grunt-criticalcss і grunt-penthose. У цих плагінах необхідно вибирати стилі, з яких потрібно зробити критичний код.

З допомогою npm модулів

Critical – npm пакет, створений Адді Османі, у якому прописаний функціонал плагіна grunt-critical. Використовуючи тільки JS і npm, без Grunt, ви можете витягти і вбудувати критичні стилі сторінки. Для установки пакета необхідно запустити команду:

npm install critical —save-dev

Після установки пакета необхідно створити JS файл в папці проекту і скопіювати в нього наступний код:

var critical = require(‘critical’);
critical.generate({
inline: true,
base: ‘initial/’,
src: ‘homepage.html’,
dest: ‘final/homepage.html’,
width: 1366,
height: 768
});

Ви можете вказати безліч опцій і оптимізувати сторінку. Якщо задати опцію inline в true, буде згенерована HTML-сторінка з вже вбудованими стилями. Якщо ж задати false, буде створений окремий CSS файл. Параметри width і height задають дозвіл екрану. Є багато інших опцій типу минификации инлайновых стилів. Всі опції можна знайти на сторінці документації критичних npm пакетів. Розмітка оптимізованої сторінки буде схожа на сторінку після плагіна для Grunt.

Так само є модуль critical-css. Модуль генерує критичний CSS за наданим URL. Отриманий CSS можна обробити за допомогою колбек функції, так як grunt плагін заснований на цьому пакеті.

З допомогою Gulp

Якщо вам подобається працювати в Gulp, Адді Османі радить використовувати безпосередньо критичний npm модуль. Його приклад на сторінці GitHub:

var critical = require(‘critical’).stream;
// Generate & Inline Critical-path CSS
gulp.task(‘critical’, function () {
return gulp.src(‘dist/*.html’)
.pipe(critical({base: ‘dist/’, inline: true, css: [‘dist/styles/components.css’,’dist/styles/main.css’]}))
.pipe(gulp.dest(‘dist’));
});

У команди Critical також є приклад проекту на Gulp, де можна подивитися всі в дії. Також є плагін gulp-critical-css, який вміє генерувати критичний CSS. Однак цей плагін витягує з стилів селектори певного типу, а не визначає, які стилі застосовані до видимих елементів.

Додаткові ресурси

Також можна скористатися інструментом Critical Path CSS Generator Джонаса Олсона. Вам потрібно всього лише вказати URL сторінки і всі стилі, з яких потрібно зробити критичний CSS. Клікніть на Create Critical Path CSS і отримаєте готовий CSS код.

Висновок

Вибір, потрібно инлайнить критичний CSS, залежить від того, в яких умовах перебуває користувач, а також від структури сайту. Якщо у вас односторінковий сайт, на який не так часто заходять користувачі, це одна справа. Але коли у вас складний сайт з фреймворками і плагінами, вбудовування критичних стилів може істотно підвищити продуктивність.

Єдиний мінус полягає в тому, що инлайновые стилі збільшують вагу сторінок. Цю проблему можна вирішити, якщо використовувати куки і завантажувати критичні стилі тільки при першому відвідуванні, а інші файли стилів завантажувати асинхронно і кешувати їх. Трохи складно, але так ви берете все найкраще від обох методик.

А ви пробували инлайнить CSS в своїх проектах? Наскільки серйозними були покращення? У вас є поради для колег? Пишіть в коментарях.