Загальні відомості про критичний CSS

18

Від автора: інтернет на даний момент все ще не досить швидкий, і існує всього кілька простих способів прискорення веб-сайтів. Одним з таких способів є вбудовування критичного CSS коду тег head на всіх сторінках вашого сайту. Але як же це зробити, якщо на вашому сайті сотні сторінок або навіть гірше, сотні різних шаблонів? Ви не можете робити це вручну. Dean Hume показав досить простий спосіб вирішення цієї проблеми. Якщо ви вже досвідчений розробник, все, що описано в статті може здатися очевидним і зрозумілим, але це, безумовно, хороший приклад для ваших клієнтів і початківців розробників.

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

Якщо мені потрібно швидко підвищити продуктивність сторінок, перший інструмент, який я використовую, це PageSpeedInsights. Цей інструмент може бути корисний при структуруванні сторінок і пошуку областей, які необхідно прискорити. Необхідно просто вбити URL сторінки, яку хочете протестувати, і інструментарій запропонує вам список поліпшень.

Якщо ви хоч раз тестували свій сайт за допомогою даного сервісу ви повинні були стикатися з наступною пропозицією щодо прискорення сторінки.

Загальні відомості про критичний CSS

CSS і JavaScript блокують рендеринг сторінок

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

«Жодна з частин першої половини сторінки не може бути отрисована, поки такі ресурси не будуть повністю завантажені. Спробуйте завантажувати їх пізніше або асинхронну завантаження, також можна вбудувати критичну частину цих ресурсів безпосередньо у HTML.»

На щастя, рішення даної проблеми легше, ніж здається! Відповідь криється в тому, як саме завантажується CSS і JavaScript.

Що з себе являє критичний CSS?

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

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

Шлях критичної візуалізації являє собою ті кроки, які браузер виконує для відтворення сторінки. Ми хочемо знайти мінімальний набір блокуючого CSS або критичний CSS код, необхідний для моментальної завантаження сторінки перед користувачами. До критичних ресурсів відноситься будь-який ресурс, який може заблокувати моментальну завантаження сторінки. Основна ідея полягає в тому, що сайт повинен забезпечити перше подання або подання верхньої половини сторінки) користувачам в перших відправлених TCP пакетах. Для того щоб ви зрозуміли, як це працює, погляньте на зображення нижче.

Загальні відомості про критичний CSS

Критичний CSS це мінімальний набір блокуючого CSS коду необхідного для відтворення вкрай значущою першої половини сайту

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

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

У цій статті я покажу вам, як прискорити рендеринг сторінок за допомогою критичного CSS коду, а також познайомлю з сервісом, який допоможе автоматизувати цей процес.

Критичний CSS в дії

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

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

Наступний Код показує, як це приблизно буде виглядати в HTML коді.

/* инлайновый критичний CSS */
loadCSS(не-критичний.css’);
…body

У коді вище критичний CSS вбудовується між тегами style. Потім за допомогою функції loadCSS(); ми асинхронно завантажуємо залишився некритичний CSS. Це дуже важливо, так як, по суті, ми розвантажуємо громіздкий (некритичний) CSS код і завантажуємо його у фоновому режимі.

На перший погляд може здатися, що працювати з таким кодом буде суцільним кошмаром. Чому б вам не прописати цей код вручну на кожній сторінці? Тим не менш, є і хороша новина – весь процес можна автоматизувати. Я пропущу сайт через інструмент Critical. Інструментарій являє собою пакет розробки Node.js і створений Addy Osmani. З його допомогою можна автоматично отримувати і надавати критичний CSS в HTML-код сторінки.

Для автоматизації процесів ми будемо використовувати цей інструмент у поєднанні з Grunt, таск менеджером JavaScript. На випадок якщо ви жодного разу не використовували Grunt, на сайті є деталізована документація, а також різноманітні поради з налаштування вашого проекту. Я вже писав про цьому чудовому інструменті.

Приступимо до справи

Почнемо з запуску консолі Node.js і установки адреси сайту. Встановіть інтерфейс командного рядка Grunt, набравши наступну команду в консолі:

npminstall-g grunt-cli

Це дозволить прописати grunt команду в системний шлях, дозволяючи запускатися з будь-директорії. Потім встановіть таск менеджер Grunt з допомогою команди:

npminstallgrunt—save-dev

Встановіть плагін grunt-critical.

npm install grunt-critical —save-dev

Потім вам необхідно створити файли Grunt, в якому будуть міститися конфігурації для вашого проекту. Мій виглядає, як код нижче.

module.exports=function(grunt){
grunt.initConfig({
critical:{
dist:{
options:{
base:’./’
},
// вихідний
src:’page.html’,
// кінцевий файл
dest:’result.html’
}
}
});
// Завантаження плагінів
grunt.loadNpmTasks(‘grunt-critical’);
// задачипоумолчанию.
grunt.registerTask(‘default’,[‘critical’]);
};

У наведеному вище коді я налаштував Critical плагін таким чином, щоб він дивився на page.html. Плагін обробить CSS код сторінки і визначить його критичну частину. На останньому етапі плагін вмонтує критичний код в HTML і оновить файл. Запустіть плагін командою grunt з консолі.

Загальні відомості про критичний CSS

Автоматизація за допомогою Grunt

Для перевірки роботи плагіна необхідно відкрити файл result.html у ньому буде міститися вбудований критичний CSS код, а решту буде завантажуватися асинхронно. Тепер ваша сторінка готова!

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

critical: {
dist: {
options: {
base: ‘./’,
dimensions: [{
width: 1300,
height: 900
},
{
width: 500,
height: 900
}]
},
files: [
{src: [‘index.html’], dest: ‘dist/index.html’}
]
}
}

Код вище обробить необхідний файл на предмет критичного коду і вмонтує його в залежності від розміру екрана. Це означає, що ви можете відкривати свій сайт на різних екранах і бути впевненими в тому, що ваші користувачі бачать ту ж саму картинку. Як відомо, мобільні з’єднання 3G і 4G можуть бути досить примхливі в кращому випадку – ось тому цей метод настільки важливий для мобільних користувачів.

Використання Critical в робочому середовищі

Застосування таких сервісів як Critical– відмінний спосіб для автоматизації підбору і вбудовування критичного CSS коду без потреби змінювати підходи щодо проектування сайту. Але як же його застосовувати на реальному проекті? Нічого не потрібно міняти, все робиться так, як я описав вище. Важливо запам’ятати лише те, що необхідно запускати Grunt при будь-яких змінах у файлі CSS.

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

critical: {
dist: {
options: {
base: ‘./’,
dimensions: [{
width: 1300,
height: 900
},
{
width: 500,
height: 900
}]
},
files: [
{src: [‘index.html’], dest: ‘dist/index.html’},
{src: [‘blog.html’], dest: ‘dist/blog.html’}
{src: [‘about.html’], dest: ‘dist/about.html’}
{src: [‘contact.html’], dest: ‘dist/contact.html’}
]
}
}

Також плагін може обробляти всі HTML-файли в папці за допомогою коду нижче:

critical: {
dist: {
options: {
base: ‘./’,
dimensions: [{
width: 1300,
height: 900
},
{
width: 500,
height: 900
}],
src: ‘*.html’,
dest: ‘dist/’
}
}
}

Код вище дає уявлення того, як автоматизацію можна застосувати для вашого сайту.

Тести

Як і завжди, дуже важливо проводити тести при змінах коду. Якщо вам необхідно провести тести, то для цього існують відмінні інструменти. Відкрийте в новій вкладці GooglePageSpeedInsights та скопіюйте URL потрібної сторінки. Зверніть увагу на те, що тепер ваші сторінки не блокуються, а пропозиції щодо прискорення завантаження горять зеленим! І швидше за все ви знайомі з ще одним сервісом WebPagetest.

Загальні відомості про критичний CSS

WebPagetest відмінний спосіб протестувати сторінки на своєчасну рендеринг контенту

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

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

Трохи докладніше

Як і в усіх методах оптимізації, в нашому теж є свої плюси і мінуси. Один з мінусів вбудовування CSS в тіло сторінки це те, що даний код не буде кешуватися. Якщо ми маємо справу з динамічними сторінками, які часто оновлюються, то ми б не хотіли, щоб сторінки кэшировали себе. А це означає, що вбудований CSS кожен раз перезавантажується. Багато вже сказано про вбудовування критичного CSS і асинхронну завантаження решти коду. У будь-якому випадку ми завжди можемо кешувати некритичний CSS код. В залежності від вашого ставлення до цього методу існує маса аргументів як за, так і проти вбудовування CSS в тег. Але для більш глибокого розуміння всієї суті раджу прочитати статтю Hans Christian Reinl Зустрічну заяву: вбудовування CSS в хэдер

Якщо ви використовуєте мережу доставки контенту (CDN), варто пам’ятати, що некритичний код обслуговується від неї окремо. Такий підхід дозволяє працювати з кэшированными ресурсами безпосередньо, зменшуючи час відгуку замість маршрутизації всіх вузлів на шляху до сервера.

Ця методика добре працює зі звичайними веб-сторінками, але вона не завжди застосовна. Якщо у вас є клієнтський JavaScript код генерує HTML? Або якщо ви працюєте над односторінковим сайтом? Вбудовуючи як можна більше CSS коду в хэдер, ви прискорюєте рендеринг сторінок. Якщо ви використовуєте цей метод, важливо зрозуміти його роботу. Мені дуже подобається, як Guy Podjarny міркує на цю тему:

«Незважаючи на всі обмеження, вбудовування коду все ще залишається важливим інструментом в наборі front-end оптимізації. І тому ви просто зобов’язані використовувати даний метод, але не зловживати ним.»

В статті Чому постійне вбудовування коду в тіло сторінки не вирішення проблеми він дає корисні рекомендації, коли слід і не слід вбудовувати CSS код.

Все ще не ідеально

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

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

Додаткові джерела

Якщо ви віддаєте перевагу користуватися іншими додатками, як, наприклад, Gulp, то плагін можна використовувати безпосередньо без завантаження Grunt. Також є корисний урок про те, як оптимізувати домашню сторінку за допомогою Gulp.

Існують інші плагіни для генерації критичного CSS, такі як Penthouse і criticalCSS від Filament Group. Ще я настійно рекомендую прочитати статтю як змусити біса швидко завантажуватися адаптивні сайти з сайту Filament Group для розуміння того, як вони використовують цю техніку для швидкого завантаження сторінок.

Головний редактор Smashing Magazine, Vitaly Friedman написав статтю про те, як його сайт збільшив продуктивність з допомогою цієї методики. На сайті Udacity є безкоштовний корисний курс, якщо ви хочете ближче познайомитися з шляхом критичної візуалізації сторінки. На сайті GoogleDevelopers також повно корисного контенту по темі оптимізація завантаження CSS. Patrick Hamman написав чудову статтю як визначити критичний CSS у своїй колонці Building a FasterWeb.