SDC Critical CSS

SDC Critical CSS inlines the stylesheets needed to paint the top of the page into a <style> element in the document head, and removes exactly those files from Drupal's CSS aggregate. Rules are delivered once. Works with CSS aggregation on or off. With aggregation on, inlined files are removed from the aggregate so rules are not sent twice.

There is no Node or npm build. You select global CSS files and all Single-Directory Components above the fold in the UI. The module reads those files at request time.

Features

• Zero-build. No Gulp/critical pipeline. Configuration is at /admin/config/development/sdc-critical-css.
• Works without SDC. Tick only the global stylesheets needed for the first paint (base, variables, layout, header). Component inlining is extra capacity when the default theme uses Single-Directory Components.
• Native SDC. Detects component CSS from the page asset list (not from a hardcoded bundle map). Enable components and set visual order; the first N attached components are inlined.
• Page builders. Anything that attaches CSS through Drupal's asset system is visible to the module, including Layout Builder and Paragraphs. Experience Builder / Canvas is expected to work the same way when it attaches SDC libraries normally.
• Editorial overlays. Inlining is skipped on the admin theme, AJAX/dialog responses, _admin_route, _hide_admin_toolbar, and iframe documents (Sec-Fetch-Dest: iframe), so preview UIs are not left with stripped CSS and no inline styles.

Remaining CSS

This module does not load the remaining stylesheets asynchronously. After inlining, leftover CSS is still a normal render-blocking <link rel="stylesheet">. That is safe. For async delivery of the remainder, use a companion such as Non-critical CSS (noncritical_css) when it is available. Do not enable an async-CSS module unless critical CSS is already inlined.

Fonts

Include @font-face rules for above-the-fold type in the global critical CSS selection. Preload the .woff2 files used in the first paint from the theme, not from this module.

Requirements

• Drupal 10 or 11
• The site default (front-end) theme; the admin theme is never processed
• CSS aggregation recommended (system.performance: css.preprocess: true)

Similar projects

• Critical CSS — inlines pre-generated theme files (often from a build step) and can load the rest asynchronously.
• Critical CSS UI — stores CSS fragments as entities and matches them to page context.