performance

WM Critical CSS

Inline above-the-fold CSS and defer the rest automatically.

v1.0.3 Included Stable
View plans Talk to an engineer
Free
On all Wordimatic managed plans
$0
No license fees, ever
Auto
Updates maintained by Wordimatic
Open
Available to audit on request

Render-blocking CSS is one of the most reliable ways to tank a Largest Contentful Paint score, and it’s almost universal on WordPress sites running a theme with a large stylesheet. WM Critical CSS solves the problem automatically, with no manual extraction tools and no paid third-party service.

The plugin identifies each distinct template type on your site — front page, singular, archive, category pages — and dispatches a headless renderer to visit each one. The renderer measures the above-the-fold viewport and extracts the precise subset of CSS rules that apply to visible content. That critical subset is stored per template and inlined directly into <head>. The full stylesheet is then loaded asynchronously, so the browser never has to wait for it before painting the first frame.

Regeneration happens automatically when you update your theme or re-activate the plugin, and a WP-CLI command lets you force a fresh extraction any time. The plugin is compatible with every major caching layer — object cache, page cache, and CDN edge caching — because the inlining happens at the PHP template level, before any cache writes.

How it works

Three steps to up and running

1

Template detection

The plugin identifies your distinct WordPress template types (front page, single, archive, category, WooCommerce pages) and queues them for extraction.

2

Headless extraction

A lightweight headless renderer visits each template, measures the above-the-fold viewport, and extracts only the CSS rules that apply to visible content.

3

Inline and defer

Extracted critical CSS is stored per template and inlined in <head>. The full stylesheet is loaded asynchronously, eliminating render-blocking CSS.

Key features

What's included

Headless critical CSS extraction
Per-template CSS storage
Async full-stylesheet loading
WP-CLI regeneration command
Works alongside any caching plugin
Use cases

Who it's for

  • Improve Largest Contentful Paint scores without switching hosting or CDN.
  • Pass Core Web Vitals on theme-heavy sites where a full CSS file is hundreds of KB.
  • Reduce render-blocking resource warnings in PageSpeed Insights automatically.
Requirements

Technical requirements

WordPress6.0+
PHP8.1+
WooCommerceNot required
Changelog

Version history

v1.0.3
2025-03-20
  • — Fixed async stylesheet load on Safari 17
  • — Added support for WooCommerce shop and product templates
v1.0.1
2024-12-05
  • — Initial stable release
  • — Support for 12 default WordPress template types
FAQ

Frequently asked questions

Will it break my site's appearance?

No. The full stylesheet is still loaded — just deferred. Critical CSS ensures above-the-fold content renders instantly with no layout shift.

How often is critical CSS regenerated?

Automatically on theme update or plugin activation. You can also force regeneration via WP-CLI: wp wm-critical-css regenerate.

Does it work with Elementor or Divi?

Yes, with caveats. Page-builder output is supported but we recommend testing on staging first, as builder-injected inline styles can interact with deferral.

Get access

WordPress plugins, maintained by engineers.

Every Wordimatic managed plan includes our full plugin library — no license fees, no manual updates, no compatibility surprises.

View managed plans Contact us