All tools

Unused CSS Remover

An unused CSS remover deletes the style rules no element on your pages uses, so the browser downloads and parses less CSS before it can show the page. Add your CSS and your pages (paste them, upload files, load URLs or capture a live page), and the tool tests every selector against them. The example below removes 6 unused selectors and shrinks the stylesheet by 42%.

Updated Runs in your browser; nothing is uploadedBlogger guide

Remove unused CSS

Stylesheets (CSS)
Pages (HTML)
Load pages from URLs

Many sites, including Blogger blogs, block other sites from reading them. If a page is blocked, use the capture below.

    Capture a live page (best for Blogger and JavaScript menus)
    1. Drag Capture CSS to your bookmarks bar, or to paste into the browser console (F12).
    2. Open a page of your site, open menus or popups you use, then click the bookmark. It copies the page as shown and its CSS.
    3. Paste here. Repeat for each page type: home, post, static page, label or category page, search.
    JavaScript that adds classes (optional)

    Class names found in these scripts count as used, for menus, sliders and popups that add classes after the page loads.

    Safelist: always keep

    Class, id, tag, @keyframes or font names, separated by spaces. Use /regex/ for patterns.

    1017 B → 590 B (42% smaller) · 368 B gzipped · 6 of 17 selectors removed · 1 page

    Report: removed 6 selectors, 1 @keyframes, 1 @font-face

    Removed selectors (6)

    • .sidebar Stylesheet 1
    • .btn-danger Stylesheet 1
    • .alert-danger Stylesheet 1
    • .modal Stylesheet 1
    • .modal-backdrop Stylesheet 1
    • .sidebar Stylesheet 1

    Removed @keyframes (1)

    • spin Stylesheet 1

    Removed @font-face (1)

    • Old Icons Stylesheet 1

    Advertisement

    How to remove unused CSS

    1. Add your CSS: paste it, upload files, or let the tool load the stylesheets of the pages you add.
    2. Add every type of page your CSS serves: home, article, product, category, search, contact. A rule used only on one page type is removed if that page is missing.
    3. Add what JavaScript changes: capture pages with menus and popups open, add the scripts that add classes, or keep the JavaScript states safelist on.
    4. Check the report, copy or download the cleaned CSS, and test it on a copy of your site before replacing the original.

    Exact or keyword matching?

    Matching modes
    ModeHow it decidesBest for
    ExactBuilds each page like a browser and runs every selector with querySelector. States the page cannot show by itself (:hover, :focus, ::before, :checked) are ignored while matching, so .btn:hover stays whenever .btn exists. Selectors this browser cannot parse are kept.Finished HTML pages and captures. Removes the most.
    KeywordKeeps a selector when every class, id and tag name in it appears anywhere in your pages or scripts, as PurgeCSS does. Structure such as .a > .b is not checked.Templates, PHP or Blogger theme code and pages built by JavaScript. Safest.

    In exact mode, class names that appear in the JavaScript you add also count as used, so styles for states that scripts switch on are kept.

    Tested on Bootstrap 5.3.3

    A test page with a navbar, cards, an alert, a list group, a table, pagination, form controls, buttons and a spinner, cleaned against the full bootstrap.css with the default options. Each result was rendered next to the original at 390 px and 1280 px wide and compared pixel by pixel.

    bootstrap.css, bytes
    VersionSizeGzipSmallerRenders the same
    Original281,04333,308––
    Exact mode34,0316,96387.9%Yes
    Keyword mode35,6027,20387.3%Yes

    Both modes kept the styles Bootstrap's JavaScript switches on for elements that exist on the page, such as .form-control.is-invalid and .navbar-nav .nav-link.show, and removed those for components the page does not have, such as dropdowns and modals.

    What else it removes, and what it never touches

    • Selector lists: in .btn-danger, .alert-danger { … } only the unused names are removed; the rule stays if one is used.
    • @media, @supports and @container blocks are cleaned inside and dropped when nothing is left.
    • @keyframes are removed when no remaining rule names them in animation.
    • @font-face rules are removed when no remaining rule uses that font family, which also stops the browser downloading the font.
    • CSS variables (optional) are removed when nothing reads them with var(), in the CSS, inline styles or scripts you add.
    • Always kept: *, html, body, :root, ::selection, scrollbar styles, @import, @layer order, @property, @page, nested rules and licence comments.

    Advertisement

    Removing unused CSS from a Blogger theme

    1. Back up the theme: Theme → ⋮ → Backup.
    2. Capture each page type with the bookmarklet: home page, a post, a static page, a label page (/search/label/…) and a search result (/search?q=…). Open the mobile menu and any popups before capturing. Blogger blogs block other sites from reading them, so URL loading needs the capture instead.
    3. Use the theme's own CSS: in Edit HTML, copy the CSS inside <b:skin><![CDATA[ … ]]> and paste it as the stylesheet, replacing the captured inline CSS. That keeps Theme Designer variables such as $(body.text.color) instead of their current values.
    4. Turn on the Blogger widgets safelist if you sometimes add gadgets that are not on the captured pages.
    5. Paste back: keep the Variable definitions comment block at the top of <b:skin> exactly as it was, and paste the cleaned CSS below it.

    Blogger also loads its own widget stylesheet. With b:css='false' on the <html> tag it is not loaded, but then every widget needs styles in your theme, so only change it if your theme was built for that.

    WordPress

    Clean your theme or child theme stylesheet, with pages captured for each template (front page, single post, page, archive, search, 404, and WooCommerce pages if you use it). Turn on the WordPress safelist so block-editor classes such as alignwide and has-text-align-center stay. Plugin stylesheets are best handled by a performance plugin's "remove unused CSS" feature, because they change with every plugin update.

    This tool, Chrome Coverage and PurgeCSS

    Ways to find unused CSS
    MethodGives youLimit
    This toolA cleaned stylesheet for many pages at once, with a report and safelists.Only knows the pages and scripts you add.
    Chrome DevTools CoverageUsed and unused bytes for one page as you click through it.Shows unused code but does not write a cleaned file.
    PurgeCSS in a buildAutomatic cleaning on every build of a code project.Needs Node.js and a build step; not for Blogger or theme editors.

    Tip: after replacing your CSS, check "Reduce unused CSS" in PageSpeed Insights. Then minify the result with the CSS Minifier if you chose formatted output.

    Frequently asked questions

    What is unused CSS?

    Unused CSS is any style rule whose selector matches no element on your pages, such as styles for a slider you removed or the parts of a framework like Bootstrap you never use. The browser still downloads and parses it before it can show the page, so unused CSS slows down rendering without changing how anything looks.

    How do I remove unused CSS?

    Paste your CSS and the HTML of your pages into this tool, or load the pages by URL. It tests every selector against the pages, removes the ones that match nothing, and gives you a cleaned stylesheet and a report of what was removed. Test the cleaned CSS on a copy of your site before replacing the original.

    Does removing unused CSS improve Core Web Vitals?

    Usually, yes. CSS blocks rendering, so a smaller stylesheet lets the browser paint sooner, which improves First Contentful Paint and Largest Contentful Paint, especially on mobile. Lighthouse reports it as Reduce unused CSS. The gain is largest when a framework or theme ships far more CSS than a page uses.

    Why did it remove styles for my menu, slider or popup?

    Those classes are often added by JavaScript after the page loads, so they are not in the page HTML. Use the capture bookmarklet after opening the menu or popup, add the JavaScript files that add the classes, turn on the JavaScript states safelist, or add the class names to the safelist yourself.

    What is the difference between exact and keyword matching?

    Exact matching builds each page like a browser and tests every selector on it, so it removes the most CSS but needs every page type you use. Keyword matching keeps a selector whenever its class, id and tag names appear anywhere in your pages or scripts, like PurgeCSS. It keeps more CSS but is safer for templates and sites that build HTML with JavaScript.

    Can I remove unused CSS from a Blogger theme?

    Yes. Capture your home page, a post, a static page, a label page and a search results page with the bookmarklet, then paste the CSS from inside b:skin in your theme as the stylesheet. Keep the Variable definitions comment at the top of b:skin separately, paste it back above the cleaned CSS, and keep a backup of the theme.

    Is my code uploaded?

    No. Pages and stylesheets are compared in your browser, and URLs are fetched by your own browser too. If a site blocks that, the tool may use a read-only proxy that fetches only the public page you asked for, or you can capture the page with the bookmarklet instead.

    What is the difference between unused CSS and critical CSS?

    Removing unused CSS deletes styles no page needs. Critical CSS is the small part of the remaining CSS needed to show the first screen, inlined in the page so it can render before the full stylesheet loads. Remove unused CSS first, then extract critical CSS from what is left.

    Advertisement

    CSS MinifierMinify or beautify CSS HTML Beautifier & MinifierFormat, compress and check HTML JavaScript MinifierMinify, obfuscate or beautify JS