⚡ Критичний CSS: що це, як згенерувати та прискорити завантаження сайту
Сайт вантажиться 3 секунди, і відвідувач іде. Ви відкриваєте Google PageSpeed Insights, а там червоний діагноз: «Усуньте CSS, що блокує рендеринг». Знайомо? За даними HTTP Archive за 2025 рік, медіанна сторінка тягне 7 зовнішніх таблиць стилів, а середня вага CSS перевалила за 120 КБ. Кожен файл у <head>, шлагбаум між користувачем і контентом.
Річ не у «важкому» CSS. Браузер не покаже жодного пікселя, доки не завантажить і не розбере ВСІ стилі. Навіть ті, що відповідають за футер на 4000-му пікселі. Рішення, Critical CSS: техніка, яка вирізає з повного набору стилів лише те, що потрібно для видимої області екрана, і вбудовує це прямо в <head>. Решта CSS вантажиться асинхронно й нікого не затримує.
Ми впровадили critical CSS в усі проєкти на techblog і зібрали робочий робочий процес: від ручної генерації за 30 секунд до повної автоматизації через Gulp і WordPress-плагіни. Нижче, покрокове керівництво без води.
💡 Швидкий огляд:
- Зрозуміти механіку блокування рендерингу та чому браузер чекає на CSS, навіть коли HTML уже готовий
- Вибрати інструмент під задачу: безплатний онлайн-генератор за 10 секунд, Penthouse для npm-проєктів або зв'язку WP Rocket / Autoptimize для WordPress
- Налаштувати Gulp-воркфлоу для автоматичної перегенерації critical CSS під час кожного деплою
- Обійти типові граблі: FOUC, JS-контент, проблеми з медіа-запитами
Що таке критичний CSS і чому браузер гальмує
Браузер будує дві структури: DOM з HTML і CSSOM зі стилів. Поки CSSOM не готовий, рендеринг стоїть на паузі. Це і є блокуючий CSS, сторінка залишається порожньою, доки не завантажаться всі таблиці стилів із <head>.
Google PageSpeed Insights діагностує проблему прямо:
Ваша сторінка має 3 блокуючі CSS-ресурси. Це спричиняє затримку під час відображення. Жоден елемент верхньої частини сторінки не може бути відрендерений, доки не завантажаться наступні ресурси.
Термін «above the fold» прийшов із газет. У вебі це видима область до прокручування: ~600 px на десктопі, ~900 px на ноутбуці, ~400 px на смартфоні. Більшість розробників орієнтуються на безпечні 1300 px ширини та 900 px висоти.
Критичний CSS, мінімальний набір стилів для рендерингу саме цієї області. Сітка, навігація, шрифти, верхній блок. Решта відкладається й вантажиться асинхронно: сторінка з'являється одразу, а доверстується в міру підвантаження.
Цифри відчутні. За даними Google, вбудовування критичного CSS скорочує First Contentful Paint на 0,5-1,2 секунди на мобільних пристроях. Для e-commerce це прямо впливає на конверсію: дослідження Portent показало, що сайт із FCP менше 1 секунди конвертує в 3 рази краще, ніж сайт із FCP у 3 секунди.
Інструменти генерації: від безплатного онлайн до комерційного API
Згенерувати критичний CSS вручну неможливо, потрібен інструмент, який відрендерить сторінку в headless-браузері й витягне лише задіяні стилі. Ось три робочих варіанти.
Інструмент | Тип | Вартість | Автоматизація | Для кого |
|---|---|---|---|---|
Critical Path CSS Generator | Онлайн | Безплатно | Ні | Одиничні сторінки, старт |
Penthouse | npm-пакет | Безплатно | Так, через Gulp/скрипти | Розробники, batch-обробка |
criticalcss.com | SaaS | Від $10/міс | Так, API + WordPress | Продакшен, великі сайти |
Critical Path CSS Generator: онлайн, за 10 секунд
Critical Path CSS Generator Йонаса Олссона, безплатний інструмент, з якого варто почати. Інтерфейс елементарний: вставляєте URL сторінки, вставляєте ПОВНИЙ CSS (хоч 200 КБ мініфікованого), натискаєте кнопку, отримуєте набір стилів для above-the-fold.
Плюс: нульовий поріг входу. Не потрібні Node.js, npm, скрипти. Мінус: суто ручна робота. Кожну сторінку обробляєте окремо, у разі зміни стилів повторюєте заново. Для сайту з 5 сторінок годиться, для 50, уже біль.
Творець генератора пізніше запустив комерційний сервіс criticalcss.com, еволюцію тієї самої ідеї з автооновленням, валідацією скриншотами та API для batch-обробки.
Penthouse: консольний генератор під Gulp
Penthouse (2680+ зірок на GitHub), npm-пакет від того ж автора. Під капотом Puppeteer і headless-Chromium: відкриває сторінку, визначає used CSS для заданого viewport і викидає решту.
Встановлення:
1 npm install --save-dev penthouse
Мінімальний виклик із Node-скрипту:
1 const penthouse = require('penthouse'); 2 const fs = require('fs'); 3 4 penthouse({ 5 url: 'https://example.com', 6 cssString: fs.readFileSync('./style.css', 'utf8'), 7 width: 1300, 8 height: 900 9 }).then(criticalCss => { 10 fs.writeFileSync('./critical.css', criticalCss); 11 });
Ширина 1300 і висота 900, емпірично безпечні значення. Медіа-запити, ширші за критичний viewport, за замовчуванням вирізаються. Якщо потрібно зберегти, прапорець keepLargerMediaQueries: true.
Важливий нюанс: Penthouse запускається з вимкненим JavaScript. Якщо контент above-the-fold генерується JS-фреймворком, HTML до гідратації порожній, Penthouse не знайде стилів. Рішення: серверний рендеринг (SSR) або параметр forceInclude із селекторами для примусового збереження.
WP Rocket і Autoptimize: два плагіни для WordPress
Якщо сайт на WordPress, ручна генерація critical CSS, зайвий головний біль. Сторінок багато, шаблони множаться, стилі змінюються. Два плагіни закривають задачу повністю.
WP Rocket, преміум-плагін (€59/рік за 1 сайт, €119 за 3, €299 за 50). Вбудована опція «Remove Unused CSS» сама генерує критичний CSS для кожної сторінки, вбудовує в <head>, а решту CSS завантажує асинхронно. Дві галочки, і рекомендація «Eliminate render-blocking resources» закрита. Бонус: вбудований хаб Rocket Insights на базі GTmetrix показує метрики прямо з адмінки WordPress.
Autoptimize, безплатний плагін з опцією «Inline and Defer CSS». Базова версія генерує ОДИН файл критичного CSS на весь сайт, на практиці це не працює (різні сторінки, різний above-the-fold). Рішення: інтеграція з сервісом criticalcss.com (план WordPress, від $10/міс). Плагін автоматично запитує критичний CSS через API, вбудовує та оновлює при змінах.
Для більшості користувачів WordPress зв'язка WP Rocket або Autoptimize + criticalcss.com закриває питання повністю. Далі, матеріал для тих, хто пише кастомні сайти.
Ручний воркфлоу: генерація, вставка, перевірка
Якщо верстаєте сайт без CMS, процес вкладається в чотири кроки.
Крок 1. Скопіюйте ВЕСЬ CSS. Зберіть усі стилі сайту в ОДИН файл. Якщо пишете на Sass, скомпілюйте. Якщо фреймворк на кшталт Bootstrap або Tailwind, увімкніть його CSS повністю. Не гадайте, що «мабуть не потрібно», генератор сам розбереться.
Крок 2. Згенеруйте критичний CSS через онлайн-генератор або Penthouse. На виході, мініфікований блок стилів, який відповідає лише за above-the-fold.
Крок 3. Вставте критичний CSS у <style> всередині <head>. Це принципово: інлайн-стилі не створюють додаткових HTTP-запитів і обробляються браузером негайно. Результат виглядає приблизно так:
1 <!DOCTYPE html> 2 <html lang="ru"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <style>@charset "UTF-8";*,*::before,*::after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15}body{margin:0;font-family:'Inter',Helvetica,Arial,sans-serif;font-size:1rem;line-height:1.5;color:#222;background:#fff}nav{display:block}.container{max-width:1200px;margin:0 auto;padding:0 20px}</style> 7 <title>Заголовок страницы</title> 8 </head>
Крок 4. Винесіть зовнішні CSS і JS із <head> у низ сторінки, перед закриваючим </body>. Так, <link rel="stylesheet"> у футері технічно невалідний за специфікацією, але на практиці працює в усіх браузерах і вирішує проблему блокування. Альтернатива, loadCSS від Filament Group для асинхронного завантаження стилів без перенесення у футер.
Фінал, перевірка через Google PageSpeed Insights. Рекомендація «Eliminate render-blocking resources» зникла? Ви все зробили правильно.
Gulp + Penthouse: автоматизація для проєкту без WordPress
Кожна зміна стилю потребує перегенерації critical CSS. Робити це вручну, убивчо нудно. Gulp автоматизує процес.
Наш продакшен-воркфлоу:
1 // gulpfile.js 2 const gulp = require('gulp'); 3 const penthouse = require('penthouse'); 4 const fs = require('fs'); 5 const urlList = require('./criticalcss-pagelist.json'); 6 7 gulp.task('criticalcss', function () { 8 urlList.urls.forEach(function (item) { 9 penthouse({ 10 url: item.link, 11 css: './css/style.min.css', 12 width: 1300, 13 height: 900, 14 keepLargerMediaQueries: false, 15 renderWaitTime: 100, 16 timeout: 30000 17 }).then(function (criticalCss) { 18 fs.writeFileSync(item.output, criticalCss); 19 console.log('✓ Critical CSS сгенерирован: ' + item.link); 20 }).catch(function (err) { 21 console.error('✗ Ошибка для ' + item.link + ': ' + err.message); 22 }); 23 }); 24 });
Файл criticalcss-pagelist.json зі списком URL і вихідних файлів:
1 { 2 "urls": [ 3 { "link": "https://example.com", "output": "./critical/home.php" }, 4 { "link": "https://example.com/about", "output": "./critical/about.php" }, 5 { "link": "https://example.com/contact", "output": "./critical/contact.php" } 6 ] 7 }
Вивід пишемо в PHP-файли, вони обгортають CSS і вставляються через include у <head> відповідного шаблону. Адаптуйте під свій стек: пишіть у .css, вставляйте через серверний include, як завгодно.
Запуск: gulp criticalcss, і всі сторінки оброблені за один прохід. Вішаєте задачу в CI/CD під час деплою, і critical CSS завжди актуальний.
З якими проблемами ви зіткнетеся
Critical CSS, техніка не без гострих кутів. Ось що ми виловили на практиці.
Flash of unstyled content (FOUC). Критичний CSS не покрив якийсь елемент, користувач бачить смикання стилів при повному завантаженні. Причина: контент винесено за межі viewport через absolute або transform, і генератор його не врахував. Лікування: прапорець forceInclude із селектором проблемного елемента.
JS-генерований контент. Майже всі генератори (Penthouse, онлайн-інструмент) запускаються з вимкненим JavaScript. Якщо лендинг зібрано на React, Vue або Angular, а серверного рендерингу немає, HTML порожній, і генератору нема чого аналізувати. Єдине надійне рішення: увімкнути SSR на рівні фреймворку. Альтернатива, вручну описати селектори через forceInclude, але це крихко.
Медіа-запити. Типово Penthouse вирізає правила, чиї min-width ширші за заданий viewport. Якщо не вказати keepLargerMediaQueries: true, десктопні стилі загубляться, на широкому екрані сайт «поїде». Завжди перевіряйте результат на реальних роздільних здатностях.
Кешування. Згенерували critical CSS, задеплоїли, за тиждень змінили стиль шапки, а в <head> лежить стара версія. Без автоматизації в CI/CD ви забуватимете перегенеровувати. Gulp-таск під час деплою вирішує проблему повністю.
⁉️🤔 Часті запитання
Чи обов’язково використовувати Critical CSS на кожному сайті?
Ні, не на кожному. Якщо у сайту один CSS-файл розміром 20 КБ і FCP уже менше секунди, вигода буде непомітною. Але якщо в
<head>висить 3-4 таблиці стилів загальною вагою під 100 КБ, critical CSS дасть вимірний приріст. Для лендингу з пари сторінок вистачить онлайн-генератора за 10 хвилин. Для магазину на WordPress, WP Rocket із парою галочок. Орієнтуйтеся на PageSpeed Insights: якщо рекомендація «Eliminate render-blocking resources» у топі, робіть.
Чи можна просто перенести всі <link> у футер і не паритися?
Формально ні, специфікація HTML вимагає
<link rel="stylesheet">лише в<head>. На практиці браузери рендерять сторінку і з<link>у футері, але ви отримуєте спалах нестилізованого контенту (FOUC) до завантаження стилів. Для сайту-візитівки припустимо, для комерційного проєкту, ні. Правильний шлях: critical CSS у<head>інлайном, асинхронне завантаження решти черезloadCSSабоmedia="print"зonload="this.media='all'". Перенесення у футер — це милиця, яка працює ціною візуального смикання.
Що змінилося з появою HTTP/3 та Early Hints?
HTTP/3 і 103 Early Hints дозволяють браузеру почати завантаження критичних ресурсів до отримання повної відповіді сервера. Це скорочує затримку, але не скасовує блокування рендерингу: стилі все одно мають завантажитися й розпарситися. Early Hints і critical CSS працюють у парі, а не замість одне одного: Early Hints прискорює доставку, critical CSS, момент першого рендеру. Дві техніки підсилюють одна одну.
Чому Penthouse не оновлювався 4 роки, він ще актуальний?
Останній реліз Penthouse (v2.3.3) вийшов у 2022 році, але пакет залишається робочим: під капотом Puppeteer і Chromium, які стабільні. Критична функціональність, генерація used CSS для заданого viewport, не потребує частих оновлень. Альтернатива, Critical від Addy Osmani (12 000+ зірок), який оновлюється активніше й теж інтегрується з Gulp/Grunt.
Як бути з динамічними сторінками, де контент залежить від користувача?
Для сторінок із персоналізацією (особистий кабінет, кошик, дашборд) критичний CSS генерується не для конкретного користувача, а для загальної структури: шапка, сайдбар, сітка. Динамічний контент потрапляє в асинхронну частину. Якщо без стилів для користувацького блоку above-the-fold ламається, додайте відповідні селектори через
forceInclude. Генеруйте critical CSS на основі загальної структури сторінки, а персоналізовані блоки залишайте в асинхронному завантаженні зforceIncludeдля критично важливих.
Чи варто впроваджувати Critical CSS на вашому проєкті
Якщо сайт завантажує більше одного CSS-файлу в <head>, critical CSS дасть вимірний приріст швидкості. Для лендингу з трьох сторінок вистачить онлайн-генератора за 10 хвилин. Для блогу або магазину на WordPress, дві галочки в WP Rocket. Для кастомного проєкту, година на налаштування Gulp і Penthouse окупається при першому ж деплої.
Поріг входу нижчий, ніж здається. Візьміть безкоштовний онлайн-генератор, скопіюйте CSS своєї сторінки, вставте, і через 30 секунд побачите результат. А коли захочете автоматизації, повертайтеся до розділу з Gulp-воркфлоу: він закриє питання повністю. Прискорення завантаження вдвічі за пару годин роботи — це угода, від якої важко відмовитися.
Професійна команда авторів та редакторів, що спеціалізуються на створенні якісного контенту.