Set Global CSS (Free Mode)

← Back to all Easy Critical CSS docs

---

Manual mode, which is the free mode, lets you add your own Critical CSS for your whole site. In this guide you will generate Default Critical CSS using the free generator and then paste it into the Easy Critical CSS settings.

---

Step 1: Generate Default Critical CSS

1. Go to the free generator at CriticalCSS.net.
2. Enter the URL of a page that uses your most common layout. For most sites this is a recent blog post or article page.
3. Submit the form and wait for the email with your results.
4. When the email arrives, copy the Critical CSS from the results. For Default CSS you only need the Critical CSS. You will use Secondary CSS later for specific pages if needed.

---

Step 2: Add Default Critical CSS in WordPress

1. In your WordPress admin, go to Settings > Easy Critical CSS.
2. Paste the Critical CSS you copied into the Default Critical CSS field.
3. Click Save Changes.

Default Critical CSS will be used on any page that does not have its own page specific CSS set. If a page has its own Critical CSS, that page specific CSS takes priority over the Default value.

Optional: Always Loaded CSS Files (Advanced Setting)

The Always Loaded CSS Files field lets you force specific CSS files to load on all pages, even when you are using Manual Critical CSS and Manual Secondary CSS. This is optional and usually only needed in special cases.

Enter one file URL or a partial match per line. For example:

.my-plugin-styles.css
theme-slider.css
/wp-content/plugins/example-plugin/

Only use this if a CSS file must always load on your site and the free generator removed styles that are required for something to work correctly.

Note: Auto mode (with a paid API key) lets you force specific selectors to stay in Critical or Secondary CSS, which usually removes the need to manually force CSS files to load.

---

How Secondary CSS works in free mode

In free mode, Secondary CSS is only used on individual pages. The Default settings never include Secondary CSS so that your layouts stay fully correct across every page, even when templates vary.

If you want to use Secondary CSS, you will generate Critical and Secondary CSS for a specific URL, then paste both into that page. This is covered in the next guide.

---