BASIC

Production

Two simple toggles to make your site faster. That’s it!

Location: Settings → Production tab

Disable Dev Mode

This toggle only affects the frontend.

Page builder editors (Gutenberg/FSE, Elementor, Bricks, Oxygen, Oxygen 6, Builderius) always keep the compiler and autocomplete available, whatever this toggle says. Every save in a builder still scans the post and regenerates output.css automatically. "Disable Dev Mode" decides only whether a logged-in visitor also gets the live compiler on the frontend pages of your site.

Development Mode (Toggle OFF – Default)

✅ **What you get:**
  • Live preview on the frontend for logged-in users
  • Classes update instantly across all open tabs
⚠️ **The tradeoff:**
  • Loads extra scripts (950KB for the compiler + sync features) on the frontend for logged-in users
  • Slower page loads while logged in
**Use this while:** Building your site, designing pages, testing styles

Production Mode (Toggle ON)

✅ **What you get:**
  • Only your compiled CSS loads on the frontend (typically 10-30KB)
  • 30-100x smaller page weight
  • Much faster page loads, even while logged in
❌ **What you lose:**
  • No live preview or real-time sync on the frontend while logged in
Autocomplete and live preview inside page builder editors keep working exactly the same either way. **Use this when:** Your site is live and you rarely change styles

How to Switch

  1. Go to Settings → Production
  2. Toggle “Disable Dev Mode” on or off
  3. Save
  4. Refresh your site

That’s it! No rebuild, no complicated setup.

Inline Compiled CSS

Another simple toggle for faster loading.

External File (Toggle OFF – Default)

Your CSS loads as a separate file:

✅ **Good:**
  • Browser caches it (useful if CSS changes frequently)
❌ **Bad:**
  • Extra HTTP request
  • Can cause page flicker while CSS loads
```markup ```

Inline in HTML (Toggle ON)

Your CSS loads inside the HTML:

<style>
  /* Your CSS here (10-30KB) */
</style>
✅ **Good:**
  • No extra HTTP request
  • No page flicker – CSS loads instantly
  • Perfect for small files (10-20KB is nothing!)
  • Faster initial page load
❌ **Bad:**
  • No browser caching (but with only 10-20KB, who cares?)

Which Settings Should I Use?

While Building Your Site

Disable Dev Mode: OFF
Inline CSS: ON

You need live preview on the frontend while you work. Inline CSS prevents page flicker and is fast since Tailwind CSS is only 10-20KB.

Live Site (Still Editing Sometimes)

Disable Dev Mode: OFF
Inline CSS: ON

Keep frontend live preview, get instant CSS load with no flicker.

Live Site (Rarely Change Styles)

Disable Dev Mode: ON
Inline CSS: ON

Maximum speed. Inline is better for small CSS files – no extra HTTP request, no page flicker.

Quick Questions

Q: Will my site break if I turn on Production Mode? No! Your CSS is always compiled and ready.

Q: Can I switch back and forth? Yes! Toggle as many times as you want.

Q: Which is faster? Production Mode is always faster – it loads way less JavaScript on the frontend.

Q: Can I use autocomplete in Production Mode? Yes. Autocomplete and live preview inside page builder editors always work, whatever this toggle says. Production Mode only turns off the live compiler on frontend pages for logged-in users.

Q: Should I use Inline CSS? Yes! For small CSS files (10-20KB), inline is faster – no extra HTTP request, no page flicker. External files only make sense if your CSS is huge or changes constantly.

Q: How big is my CSS file? Check /uploads/winden/blog/production-2/output.css – usually 10-30KB.

Q: Will my page cache serve stale CSS after I save? No. When output.css changes, Winden clears the full-page cache of common cache plugins (WP Rocket, LiteSpeed Cache, W3 Total Cache, WP Super Cache, SiteGround Optimizer, and others) for the whole site, so visitors get the new styles immediately. Turn this off with the winden_purge_page_cache filter, or hook your own logic into the winden_after_css_saved action.