Most WordPress pages download CSS written for every template on the site: homepage heroes, WooCommerce widgets, page-builder sections, and admin-bar leftovers that never appear on the URL the visitor opened. Browsers still parse that weight. Layout can look fine while Time to Interactive and Largest Contentful Paint quietly pay for selectors nobody used. Lightify’s answer is Remove Unused CSS: strip unused CSS selectors per template, then keep the asset-trim story honest with minify for CSS, JavaScript, and HTML.
Lightify is the DaftPlug performance plugin. This post stays on unused CSS as the hero, with minify CSS, JavaScript, and HTML as the supporting trim. Defer and delay scripts are siblings, not the main character (see WordPress defer render-blocking JavaScript when you are ready for that pass). This post does not cover database cleanup, page-cache cart exclusions, speculative loading, or Core Web Vitals dashboards as the focus. Those live elsewhere.
What Lightify actually ships here
Stay inside the real feature set:
- Remove Unused CSS / strip unused CSS selectors per template
- Minify CSS, JavaScript, and HTML so the files you still ship are smaller
- Conservative defaults with aggressive optimizations clearly labeled and easy to toggle off per page (as Lightify documents)
- Sibling tools you will mention only to exclude from this enablement: defer or delay scripts, page cache, speculative loading, database cleanup
This post does not invent undocumented safelist UIs Lightify does not publish, per-plugin CSS “coverage percentages,” Chrome DevTools export workflows as a Lightify feature, or promises that every page-builder animation survives the first toggle without a visual QA pass. The product promise is unused CSS stripped per template, plus minify for CSS, JS, and HTML. Stay there.
Why unused CSS hurts WordPress more than people admit
Themes and builders ship kitchen-sink stylesheets. A block theme, a classic theme with WooCommerce styles, and a page builder can each add large CSS bundles. The homepage may need a fraction of that. Every other template still pays.
Minify alone does not remove dead selectors. Minify shortens names and whitespace. It does not decide that .woo-widget-xyz is irrelevant on a blog post. Unused CSS removal is the cut. Minify is the polish on what remains.
Per-template matters. A global “one purged file for the whole site” approach either breaks rare templates or stays too timid. Lightify’s product framing is unused CSS stripped per template, which matches how WordPress actually renders different URL shapes.
CSS weight is a Core Web Vitals tax even when the design “looks fine.” Visitors do not screenshot your stylesheet. They feel late paint and interaction delay. Removing unused selectors is one of the few wins that shrinks bytes without changing your brand colors.
Aggressive CSS tools have a reputation for breaking layouts. That reputation is earned when teams enable every optimization at once and skip visual QA. The fix is not “never remove unused CSS.” The fix is enable, check key templates, toggle off per page when needed, then minify.
How to strip unused CSS with Lightify in wp-admin
Assume Lightify is installed. If another full caching or asset-optimization stack is already fighting for the same CSS pipeline, deactivate the duplicate layer before you judge Lightify’s results. Lightify’s own guidance is not to run two caching plugins at once for the cache layer. For assets, keep one clear owner of minify and unused CSS.
1. Pick the templates that represent real traffic
Homepage, a long post, a key landing page, a WooCommerce product or shop page if you sell, and one “weird” template (form page, membership gate, or custom page-builder layout). Write those five URLs down. They are your visual QA circuit.
2. Open Lightify and find Remove Unused CSS
In wp-admin, open Lightify. Find Remove Unused CSS (strip unused CSS selectors). Enable it as the hero of this pass. Also confirm minify CSS, JavaScript, and HTML are available in the asset optimization area Lightify exposes. For the first hour, do not also flip defer, delay, speculative loading, database cleanup, and every media toggle. Unused CSS plus minify is enough surface area to learn from.
3. Enable unused CSS, then minify what remains
Order of honesty:
- Turn on Remove Unused CSS.
- Load each QA URL in a logged-out window (or a private window that still uses a normal browser, not a broken preview).
- Check layout: header, nav, hero, cards, forms, footer, mobile breakpoint.
- If a page breaks, use Lightify’s per-page toggle-off path for aggressive optimizations (Lightify documents that aggressive options are easy to toggle off per page).
- Turn on minify for CSS, JavaScript, and HTML once the unused-CSS pass looks stable on your QA set.
Minify is not a substitute for unused CSS. It is the second trim after dead selectors are gone.
4. Keep defer and delay as siblings
Render-blocking JavaScript is a different article. If defer or delay is already on and stable, leave it. If not, do not enable it in the same breath as unused CSS. When you want that pass, use the related defer render-blocking JavaScript guide. Mixing CSS purge bugs with delayed JS bugs creates a support mystery you will not solve before lunch.
5. Smoke-test like a skeptic
- Homepage desktop and mobile widths: nav, hero, CTA buttons, footer.
- Single post: typography, share or comment UI, related cards if present.
- Product or shop template if applicable: price, add to cart, galleries.
- Page-builder landing page: sections that use uncommon classes or animations.
- Hard refresh once after enabling so you are not staring at a stale cached CSS file from another layer.
- If you use a CDN or host cache, purge it after the change so visitors get the new CSS pipeline.
6. Document the enablement
Runbook line: “Lightify Remove Unused CSS enabled on [date], minify CSS/JS/HTML on. QA URLs: [list]. Per-page exceptions: [list]. Defer/delay left [on/off] as sibling. Re-test after theme or builder updates.”
Who this is for
Content sites on heavy themes that ship WooCommerce or builder CSS on posts that never use those components.
WooCommerce stores that need shop templates intact while blog templates stop downloading cart widget CSS they never show.
Agencies inheriting “we installed five optimization plugins” stacks and wanting one clear unused-CSS owner inside the DaftPlug performance plugin.
Anyone chasing Core Web Vitals who already compressed images and still sees large CSS payloads in field or lab traces.
Site owners tired of minify-only plugins that shrink whitespace but leave thousands of unused selectors untouched.
This is less urgent for ultra-minimal custom themes that already ship a tiny hand-written CSS file. Even then, third-party plugin CSS can reintroduce bloat later. Unused CSS remains useful as those plugins accumulate.
What good looks like
- Remove Unused CSS is on and key templates still match the design.
- Unused selectors are stripped per template rather than ignored as “minify will fix it.”
- Minify CSS, JavaScript, and HTML runs on the assets you still serve.
- Broken templates are handled with per-page exceptions, not by abandoning the feature sitewide on day one.
- Defer/delay, page cache, speculative loading, and database cleanup were not required for this win.
- You did not invent safelist syntax Lightify does not document.
- After a theme update, you re-ran the QA circuit before calling the site “still fine.”
If a layout breaks only on one template, prefer a per-page exception and keep unused CSS elsewhere. Global off should be the last resort after you know which page is the offender.
Pitfalls (the ones that bite)
Enabling unused CSS, delay JS, and speculative loading together. Three moving parts, one broken hero button, zero clear cause. Sequence the work.
Judging results while logged in with the admin bar. Admin CSS and admin-only UI can confuse visual QA. Check logged-out.
Forgetting host or CDN cache. You disable unused CSS in Lightify, still see broken CSS, and blame the plugin while the edge is serving yesterday’s file.
Treating minify as unused CSS. If you only minify, dead selectors remain. If you only remove unused CSS and skip minify, you leave compressable bytes on the table. Do both, in that mental order.
Skipping the weird template. The homepage looks perfect. The membership checkout page loses column widths. Always include one awkward URL.
Fighting another optimization plugin for the same stylesheet. Two tools rewriting CSS is how you get FOUC and missing icons. Pick Lightify for this layer or document why something else owns it.
Ignoring mobile. Unused CSS bugs love hamburger menus and sticky bars. Resize before you declare victory.
Practical checklist before you call it done
- Deactivate duplicate asset-optimization or caching stacks that would rewrite the same CSS.
- List five QA URLs across homepage, post, landing, shop (if any), and one awkward template.
- In Lightify, enable Remove Unused CSS.
- Visually QA desktop and mobile on each URL logged-out.
- Add per-page exceptions only where a template truly breaks.
- Enable minify CSS, JavaScript, and HTML.
- Purge host/CDN caches if you use them.
- Leave defer/delay for a sibling pass unless already stable.
- Skip database cleanup and speculative loading for this session.
- Re-test after the next theme or page-builder update.
- Write exceptions and dates in the runbook.
- Only then stack the next Lightify performance feature.
Takeaway
WordPress rarely needs all the CSS it ships. Lightify’s Remove Unused CSS strips unused CSS selectors per template so each URL carries less dead weight. Minify CSS, JavaScript, and HTML tightens what remains. Defer and delay scripts still matter, but they are siblings for another hour, not a substitute for deleting selectors nobody used.
Lightify handles unused CSS and minify inside the same performance plugin that also covers cache, media, and Core Web Vitals monitoring when you need those next. Enable unused CSS once. Walk five real templates. Keep minify on. Treat script deferral as the related follow-up in defer render-blocking JavaScript.
One Pro membership unlocks Lightify plus Progressify, Generatify, Rankify, and Snapshotify. New Pro plugins join existing memberships. Plans differ by site count only (Pro $37.99 for 1 site, Pro Plus $74.99 for 5, Pro Max $138.99 for 100), with a 14-day money-back guarantee. See pricing when your templates should stop shipping CSS for pages they are not.
Strip the unused selectors. Minify what is left. When the layout still holds on mobile and desktop, the stylesheet finally matches the page.