← Back to all Easy Critical CSS docs
After connecting your API key, Auto mode allows Easy Critical CSS to generate Critical CSS automatically. Most sites can keep the default settings, but this page explains what each Auto mode setting does.
Critical CSS Mode (Auto vs Manual)
Auto mode uses the CriticalCSS.net API to generate Critical CSS for your pages and archives. Manual mode requires you to paste your own Critical CSS.
- Go to Settings > Easy Critical CSS.
- Under Critical CSS Mode, select Auto (Requires API).
- Click Save Changes (if available on your screen).
If you do not see Auto mode ready, click Refresh in the status box. You can also click Details for more information.
Secondary CSS Behavior
After Critical CSS is generated, Easy Critical CSS can also generate Secondary CSS (the remaining CSS). This setting controls whether Secondary CSS is stripped down to only what is used.
- Strip unused CSS rules: Recommended for most sites. This typically provides the biggest performance gains.
- Keep all remaining CSS rules: More conservative. Useful if you notice missing styles after enabling stripped Secondary CSS.
Show Advanced Settings
Most sites do not need Advanced Settings. If you are troubleshooting missing styles or want more control, click Show Advanced Settings.
Advanced Settings
These settings provide fine-grained control over Critical CSS generation. Only change these if you have a specific reason.
Forced Critical CSS Selectors
Add selectors that should always be included in Critical CSS, even if they are not detected during generation. Use one selector per line.
You can also use regex patterns by placing them between slashes.
Example: \.my-plugin-id-\d+/ (matches .my-plugin-id-1, .my-plugin-id-42, etc.)
Forced Secondary CSS Selectors
Add selectors that should always be included in stripped Secondary CSS, even if they would normally be removed. Use one selector per line.
You can also use regex patterns by placing them between slashes.
Example: \.my-plugin-id-\d+/ (matches .my-plugin-id-1, .my-plugin-id-42, etc.)
Include Common Secondary Selectors
Some CSS selectors are commonly added later by JavaScript (after the first page load). Keeping this option enabled helps include those selectors in Secondary CSS.
Exclude CSS Files from Critical CSS
Exclude specific stylesheets from Critical CSS generation.
Any stylesheet listed here will be ignored when generating Critical CSS and will continue to load normally on the page.
This is useful if a CSS file must always be fully loaded or causes visual issues when partially inlined.
Add one URL or partial match per line.
Example: https://example.com/style.css or my-plugin.css
Ignore Cross-Domain CSS
When enabled, Easy Critical CSS ignores stylesheets loaded from external domains during Critical CSS generation.
This is useful for avoiding third-party or CDN-hosted styles that should remain fully loaded and are not suitable for Critical CSS.
Uncheck this option only if you need externally hosted stylesheets to be included during generation.
Serve Critical CSS from Files
When enabled, Critical CSS can be served from static files instead of the database. Most users can keep the default.
Regenerate Critical CSS When
These checkboxes control when Easy Critical CSS automatically regenerates Critical CSS, for example when a post is updated or when a plugin is updated. Most users can keep the defaults.
Cloudflare Email, API Key, Zone ID
Easy Critical CSS can automatically clear Cloudflare cache when new Critical CSS is generated.
If you use Cloudflare, you can configure your credentials on the Cloudflare setup page.
If you do not use Cloudflare, you can leave these fields blank.
Debug Mode
Enable Debug Mode only when requested by support. This helps generate additional debugging information.
Save Changes and reset actions
After changing any settings, click Save Changes. The buttons in the Reset and Delete sections are destructive and are best avoided unless you are intentionally starting over.