Add Per-Page CSS (Free Mode)

← Back to all Easy Critical CSS docs

Free mode lets you add Critical CSS and Secondary CSS to individual pages using Manual mode.

This is useful for pages with unique layouts or when you want to fully optimize a specific page without connecting an API key.

Easy Critical CSS guides you through generating the CSS and adding it directly to the page.

Step 1: Open the free generator

  1. Edit the page you want to optimize.
  2. Open the Easy Critical CSS panel in the editor sidebar.
  3. Make sure Critical CSS Mode is set to Manual.
  4. Click Get Generated Critical CSS.

This will take you to the free generator on CriticalCSS.net with your page URL and email already filled in.

Note: The Get Generated Critical CSS button will not appear on draft or private pages.

WordPress editor showing the Easy Critical CSS sidebar with Manual mode selected and the “Get Generated Critical CSS” button visible
The Get Generated Critical CSS button appears when Manual mode is enabled

Step 2: Generate the CSS

  1. Confirm the page URL and email address.
  2. Submit the form.
  3. Wait for the email with your results.
  4. Copy both the Critical CSS and the Secondary CSS.
Screenshot of the CriticalCSS.net free generator with a page URL entered
Submit the form and wait for the email with your generated CSS

Step 3: Add the CSS to the page

  1. Paste the Critical CSS into the Manual Critical CSS field.
  2. Paste the Secondary CSS into the Manual Secondary CSS field.
  3. Click Update or Publish.

The page will now use the CSS you added here instead of the global default CSS.

Screenshot of per-page Critical CSS settings in Manual mode
Per-page Critical CSS settings in Manual mode

Optional: Always Loaded CSS Files

The Always Loaded CSS Files field lets you force specific stylesheets to load on this page.

This is optional and usually only needed if a required stylesheet does not load automatically.

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

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

This setting overrides the global Always Loaded CSS Files setting for this page.

When to use per-page CSS

  • Pages with custom templates or unique layouts
  • Landing pages or product pages
  • Pages where you want to remove unused CSS rules

Per-page CSS is the only way to use Secondary CSS in free mode, which is where the biggest performance gains usually come from.

← Back to all Easy Critical CSS docs Next step: Connect the API for automatic generation