Question 1

What is critical CSS?

Accepted Answer

Critical CSS is the styles needed to render content above the fold (first screen). They are inlined directly into the <head> of the page so the browser can start rendering immediately without waiting for full CSS files to load.

Question 2

How to extract critical CSS for a Bitrix site?

Accepted Answer

For automatic extraction, use the 'critical' tool (Node.js). It analyzes the page, determines used styles for given viewport sizes, and generates a critical CSS file. You can also extract manually via Coverage in Chrome DevTools.

Question 3

How to integrate inline CSS into a Bitrix template?

Accepted Answer

In the template's header.php, add code using file_get_contents to read the critical.css file and output it inside a <style> tag. The remaining CSS files are loaded asynchronously via rel='preload' with switching to 'stylesheet'.

Question 4

What automation tools for critical CSS exist?

Accepted Answer

Key tools: critical (Node.js), PurgeCSS for removing unused rules, Penthouse, and Puppeteer scripts for CI/CD generation. For Bitrix, you can also use the OnEndBufferContent event for post-processing HTML.

Question 5

How to verify that critical CSS works?

Accepted Answer

Open Chrome DevTools → Coverage (Shift+Ctrl+P → Coverage) and check the percentage of unused CSS on the first screen. Also look at Lighthouse's 'Reduce unused CSS' metric and FCP. Target FCP is under 1.5 s for mobile.

Optimizing Critical CSS for 1C-Bitrix: A Step-by-Step Guide

Our competencies: