Add Per-Page CSS (Free Mode)

← Back to all Easy Critical CSS docs

---

Free mode works through Manual mode, which lets you add Critical and Secondary CSS on a page by page basis. This is helpful when some pages use different layouts from the rest of your site, and it is also the only way to use Secondary CSS without an API key because the global Default settings only support Critical CSS. This keeps your overall site styling correct while still allowing full optimization on individual pages.

---

Step 1: Generate Critical and Secondary CSS for the page

1. Go to the free generator at CriticalCSS.net.
2. Enter the full URL of the page you want to optimize.
3. Submit the form and wait for the email with your results.
4. Copy both the Critical CSS and the Secondary CSS from the email.

---

Step 2: Add Critical and Secondary CSS to the page

1. Edit the page in the WordPress editor.
2. Open the Easy Critical CSS panel in the sidebar.
3. Paste your Critical CSS into the Manual Critical CSS field.
4. Paste your Secondary CSS into the Manual Secondary CSS field.
5. Click Update or Publish to save the changes.

When Manual mode is selected and Critical CSS is activated, the page will use the Manual Critical CSS and Manual Secondary CSS that you entered here. These values take priority over the Default Critical CSS that you set in the global settings.

Optional: Always Loaded CSS Files

The Always Loaded CSS Files field lets you force specific CSS files to load on this page, even when you are using Manual Critical CSS and Manual Secondary CSS. This is optional and usually only needed in special cases. This will override the global setting.

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 is required for a feature on the page and it did not load automatically after applying Critical and Secondary CSS.

---

When to use per page CSS

• Pages that use a custom template or unique layout
• Product or landing pages that look very different from your main posts
• Any page where you want to use Secondary CSS and remove unused CSS rules

Default Critical CSS helps with first paint, but the biggest performance gains come from Secondary CSS. Since Secondary CSS is only available per page in Manual mode, you will use per page CSS for any page you want fully optimized.

---