Оптимізація критичного CSS для 1С-Бітрікс
Наша команда має 5+ років досвіду в оптимізації Бітрікс-сайтів, виконано понад 50 проєктів. Типова картина: Бітрікс-сайт підключає три-чотири CSS-файли сумарною вагою 300–600 КБ. Браузер блокує рендер до завантаження всього CSS — це називається render-blocking resource. В результаті First Contentful Paint (FCP) сягає 3–5 с на мобільному з'єднанні навіть при кеші. Ми вирішуємо цю проблему виділенням критичного CSS (стилі першого екрану) і inline-вбудовуванням. Інлайн критичного CSS знижує FCP в 3 рази швидше, ніж звичайне завантаження — це підтверджує практика. Оцініть свій проєкт: зв'яжіться з нами для консультації.
Чому в Бітріксі виникає render-blocking CSS?
Бітрікс формує список CSS-файлів через CMain::AddCSS() і виводить їх у <head> як <link rel="stylesheet">. Усі файли блокують рендер. Вбудований комбайнер (/bitrix/cache/css/) об'єднує CSS, але не відокремлює критичний від некритичного. Компоненти на кшталт bitrix:catalog.section додають власні стилі через $APPLICATION->SetAdditionalCSS(). Усе це потрапляє в blocking-шлях. У підсумку навіть при кеші перший екран відтворюється із затримкою. Для покращення продуктивності сайту необхідна оптимізація CSS, зокрема прискорення Critical Rendering Path.
Що таке критичний CSS на практиці?
Критичний CSS — стилі, необхідні для контенту вище лінії згину без додаткових запитів. Для Бітрікс-сайту це: скидання (box-sizing, базові відступи), сітка шапки та першого блоку, типографіка H1–H2, навігаційне меню, стилі hero-банеру. Решта — картки товарів, корзина, фільтри, футер — завантажуємо асинхронно. Інлайн критичного CSS скорочує FCP на 40–60%, що підтверджує вимірювання Google на Web.dev (https://web.dev/extract-critical-css/). CSSOM та рендер-блокуючі ресурси — ключові концепції для розуміння.
Техніка інлайнінгу критичного CSS
Крок 1: Вилучення критичних стилів
Використовуємо утиліту critical (Node.js):
npm install -g critical critical https://example.com --width=1300 --height=900 \ --css=public/bitrix/templates/main/template_styles.css \ --inline \ --output=critical.css Для мобільного viewport додаємо другий прогін з параметрами --width=375 --height=812. Об'єднаний результат — файл 15–40 КБ.
Крок 2: Інтеграція в шаблон Бітрікс
У header.php шаблону:
<?php $criticalCss = file_get_contents(__DIR__ . '/critical.css'); ?> <style><?= $criticalCss ?></style> <link rel="preload" href="/local/templates/main/template_styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href="/local/templates/main/template_styles.css"> </noscript> rel="preload" as="style" з перемиканням через onload — стандартний патерн LoadCSS. <noscript> — фолбек для браузерів без JavaScript.
Крок 3: Робота з CSS-комбайнером Бітрікс
Якщо ввімкнено комбайнер (BX_COMPOSITE_BUFFER_ON_CSS), він перехоплює вивід <link>. Потрібно або вимкнути його для контрольованих файлів:
define('BX_COMPOSITE_BUFFER_ON_CSS', false); Або через подію OnEndBufferContent замінити блокуючі <link> на асинхронні.
PurgeCSS і PostCSS: скорочення CSS на 60–80%
На проєктах з Gulp або Webpack додаємо:
const purgecss = require('@fullhuman/postcss-purgecss'); postcss([ purgecss({ content: ['./local/templates/**/*.php', './local/components/**/*.php'], defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [] }) ]) PurgeCSS аналізує PHP-шаблони та видаляє невикористані правила. На Bootstrap/Foundation-темах CSS стискається з 250 КБ до 30–60 КБ — це в 2-3 рази краще за стандартний комбайнер Бітрікс. Інлайн критичного CSS у поєднанні з PurgeCSS дає найкращий результат — за даними MDN (https://developer.mozilla.org/en-US/docs/Learn/Performance/CSS), FCP знижується в середньому на 1–2 с.
Кейс: корпоративний портал на Бітрікс24 (наш клієнт)
Один з наших клієнтів — корпоративний портал на Бітрікс24 з ~300 співробітниками: головна сторінка підключала 7 CSS-файлів (480 КБ). FCP у Lighthouse (Desktop, Fast 3G) — 4,2 с. Задача — довести до 1,5 с без зміни шаблону. Наш інженер зі стажем понад 5 років виконав:
- Запуск
criticalдля головної, розділу новин і документів — три різні набори критичного CSS. - У
header.phpдодана логіка визначення типу сторінки та підключення відповідного inline-CSS. - Решта CSS-файлів переведена на
preload+ асинхронне підключення. - PurgeCSS прибрав ~60% невикористаних правил з
template_styles.css.
Результат: FCP — 1,3 с, сумарна вага CSS «вище згину» — 18 КБ inline, решта 90 КБ асинхронно після відтворення. Економія на трафіку — до 2000$ на рік. Для порівняння: без оптимізації FCP становив 4,2 с — тобто прискорення в 3 рази.
Як автоматизувати оновлення критичного CSS?
Критичний CSS потребує оновлення при кожній зміні дизайну. Вбудовуємо в деплой:
#!/bin/bash node ./scripts/generate-critical.js php artisan cache:clear Скрипт generate-critical.js (Puppeteer) генерує критичний CSS для списку ключових сторінок і записує файли в папку шаблону.
Діагностика ефективності
У Chrome DevTools → Coverage (Shift+Ctrl+P → Coverage) видно відсоток невикористаного CSS. Показник >70% на першому екрані — сигнал до оптимізації. У Lighthouse метрика «Reduce unused CSS» показує потенційну економію в КБ. Гарантуємо: після нашої оптимізації невикористаний CSS скорочується до 10–15%. Network waterfall показує зменшення render-blocking ресурсів. Для оцінки продуктивності використовуйте також LCP та CLS — важливі Web Vitals.
Що входить у послугу «під ключ»
| Компонент | Деталі | Вартість |
|---|---|---|
| Аудит поточного CSS | Перевірка Coverage, визначення render-blocking файлів | 1500 грн |
| Вилучення критичного CSS | Для 3–5 типових сторінок з різними viewport | 2000 грн |
| Інтеграція в шаблон | Інлайн у header.php, асинхронне завантаження решти | 1500 грн |
| PurgeCSS (опціонально) | Налаштування в пайплайні, видалення невикористаних правил | 2000 грн |
| Тестування | Перевірка FCP, LCP, CLS на реальних пристроях | 1000 грн |
| Документація | Інструкція з оновлення критичного CSS при змінах | 500 грн |
Строки та вартість пакетів
| Масштаб | Склад | Строк | Ціна |
|---|---|---|---|
| Базовий | Ручне виділення CSS + інлайн у header.php | 2–3 дні | 5000 грн |
| Середній | Автоматизація через critical + async link + деплой | 4–6 днів | 10000 грн |
| Повний | PurgeCSS у збірці, кілька наборів critical CSS під різні типи сторінок, CI-інтеграція | 7–10 днів | 20000 грн |
Економія на трафіку для типових проєктів — до 2000$ на рік, що робить інвестицію вигідною.
Приклад коду для генерації критичного CSS через Puppeteer
const puppeteer = require('puppeteer'); const critical = require('critical'); async function generateCritical(url, cssPath, outputPath) { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(url, { waitUntil: 'networkidle0' }); const css = await critical.generate({ inline: false, css: [cssPath], width: 1300, height: 900, }); require('fs').writeFileSync(outputPath, css); await browser.close(); } Замовте оптимізацію критичного CSS для вашого Бітрікс-сайту. Наші сертифіковані спеціалісти (досвід 5+ років, 50+ проєктів) доведуть FCP до 1,5 с. Отримайте консультацію — напишіть нам!