Remove unused CSS: a shorter copy of each stylesheet from your own scan
Remove unused CSS replaces each stylesheet that your visitors load with a shorter copy, made from what your pages really use. Nothing is removed by itself: you start a scan, and Baza Helper asks your own pages which rules they use. The option is in Baza Helper > Cache & Optimization, in Baza Helper Pro only (paid plans). The free version and the version in the WordPress.org directory do not have it. It is off by default.
Turn it on and scan the site
- Open Baza Helper > Cache & Optimization and find Remove unused CSS.
- Tick Remove unused CSS and save.
- Press Scan the site. Keep the tab open until the scan ends. The line above the buttons shows how many pages were scanned and how much the stylesheets shrank.
- Open your site in a window where you are not logged in and check the key pages, the menu, forms and sliders.
What the scan does
Only an administrator can start it. The scan opens, one after another in a hidden frame, the home page, the pages you add under More pages to scan, two recent pages of every public post type and the busiest term of every public taxonomy, up to 40 addresses. Each page is opened at 1440 and at 390 pixels wide.
A script in each frame scrolls the page, then goes through the stylesheets of your own site and asks the page, for every rule, whether an element for that selector exists. The answers of all pages are joined: a rule stays when at least one page used it. For each stylesheet Baza Helper saves a shorter copy in the folder uploads/baza-helper-cache/rucss/.
The scan runs in the browser of the administrator, on your own site. No outside service is used.
What visitors get
While the option is on, visitors who are not logged in get the shorter copy instead of the original stylesheet. Logged-in users and previews still get the original. A stylesheet that has no copy, for example after its version number changed, loads whole.
What is always kept
- Rules that name a state, such as is-, has-, active, open or show.
- Rules with hover, focus, active and pseudo-elements: they are checked by their base element. A selector that cannot be tested is kept.
- @font-face and @keyframes.
- @media, @supports, @container and @layer blocks, as long as something inside them is kept.
- Everything you list under Rules that are never removed, and every stylesheet you list under Stylesheets that stay whole.
Settings
- Remove unused CSS: the switch. Each stylesheet is replaced by a shorter copy once a scan has been done.
- More pages to scan: addresses of pages that look different from the rest, such as a landing page or a shop page. One per line, for example /pricing/.
- Rules that are never removed: one part of a selector per line, for example .modal or .swiper.
- Stylesheets that stay whole: one part of a stylesheet address per line, for example /plugins/some-plugin/.
Scan again after a change
Scan again after you change the theme, a plugin or the design. A stylesheet whose version number (?ver=) changed has no copy and loads whole until the next scan. Forget the scan removes the copies and the record and brings back all the full stylesheets at once.
Limits
- Only what was not found on the scanned pages is removed. Rules for pages that were not scanned, and for states that a script turns on after a visitor acts, can be lost. Add the page to More pages to scan, or the selector to Rules that are never removed.
- The saving depends on your theme and plugins, so there is no fixed number. Check the page after the scan.
- It does not replace Critical CSS, which is a separate Pro tool for the first screen.
