Critical CSS UI
This module allows you to manage and inline critical CSS directly from the database, attaching CSS fragments to specific page contexts without modifying theme files. It improves website performance by ensuring only the CSS needed for the initial render is injected, which is especially beneficial for dynamic and component-heavy layouts. This system is context-aware, making it ideal for use with Layout Builder, Paragraphs, and custom landing pages.
Introduction
Critical CSS UI allows Drupal sites to manage and inline critical CSS directly from the database. Instead of relying on static theme files, the module lets you attach CSS fragments to specific page contexts (nodes, content types, views, webforms). Only the CSS required for the initial render is injected, improving performance on dynamic and component-heavy layouts.
Why Use Critical CSS UI?
Modern Drupal themes often load large CSS bundles on every page, even when most styles are unused. This slows down initial rendering and hurts Core Web Vitals. The issue becomes more complex when using Layout Builder or Paragraphs, where each page may have unique structures. Static critical CSS files cannot adapt to these dynamic scenarios.
How Critical CSS UI Helps
The module provides a flexible, context-aware system for delivering critical CSS. Each CSS fragment is stored as an entity and injected only when its matching context is rendered. This ensures that every page receives only the CSS it needs for fast loading and smooth rendering.
- Context-aware: Inline only the CSS required for the current page.
- Dynamic: Ideal for Layout Builder, Paragraphs, and custom landing pages.
- Theme-independent: No need to modify theme files or build processes.
- Editor-friendly: UI tabs allow non-developers to manage CSS easily.
- Performance-driven: Improves LCP, FCP, and reduces unused blocking CSS.
Features
- Store critical CSS as entities in the database.
- Attach CSS to contexts such as
node:IDornode:bundle. - Automatic matching priority: exact page → content type → fallback.
- Inline CSS only when the matched context is rendered.
- Load non-critical CSS asynchronously.
- UI integration on nodes, content types, and admin pages.
Use Cases
- Dynamic pages built with Layout Builder or Paragraphs.
- Sites using heavy themes like Bootstrap or Barrio.
- Landing pages requiring per-page CSS optimization.
- Projects aiming to improve Core Web Vitals.
Post-Installation
- Configure the module at
/admin/config/development/performance/critical-css. - Use the “Critical CSS” tab on node edit pages for per-node rules.
- Add bundle-level CSS under Structure → Content types.
- Manage all CSS entities from the admin listing page.
- Clear caches (
drush cr) if changes are not visible.
Similar Projects
The critical_css module focuses on static, theme-based critical CSS generated during build processes. It is ideal for stable, predictable layouts, while Critical CSS UI is designed for dynamic, editor-driven pages.