CSS size checker. Per-stylesheet breakdown.
Enter a URL. We pull PSI's CSS-resource subset and list every stylesheet with byte size, first-party vs third-party split, and render-blocking flag.
Enter a URL. We pull Google PSI's network-requests audit (stylesheet subset), split first-party vs third-party CSS, and surface the byte budget verdict.
Sources used
- Google PSI v5 API — network-requests audit source
- web.dev unused CSS rules — purge strategies
- web.dev extract critical CSS
- PurgeCSS — unused-class purge tool
URL is sent only to Google PSI. Digital Heroes does not log queries.
Privacy: URL is sent only to Google PSI.
Most CSS bytes are unused.
The most common CSS-weight bug is shipping the entire utility framework without purging unused classes. Tailwind CSS in JIT mode handles this automatically (10-30KB ship typical). Bootstrap full-bundle ships 200KB+ for sites that use 10% of the framework. The checker above shows total CSS, first-party vs third-party split, render-blocking flag per file — surfacing the cleanup target. PurgeCSS at build time typically delivers 60-80% reduction on framework-built sites.
Three CSS-budget reduction patterns. PurgeCSS / JIT-mode Tailwind for unused-class elimination. Critical CSS extraction — inline above-the-fold styles, async-load the rest via rel=preload media-print swap. Audit Google Fonts CSS — every font weight + style adds 30-50KB; trim to the 2-3 weights actually used.
Tools in the same cluster: JavaScript Size Checker for the JS-only deep dive. Render Blocking Checker for the critical-path CSS view. Page Weight Analyzer for the full byte breakdown.
Five answers.
What's a healthy CSS budget in 2026?
Total CSS under 150KB compressed is the practical mobile budget for fast-feeling sites. Above 250KB, render-blocking CSS starts degrading LCP visibly. Above 500KB, the unused-CSS audit on Lighthouse will fail and Performance score drops 5-10 points. Tailwind CSS (with JIT mode) commonly ships 10-30KB. Bootstrap full-bundle ships 200KB+. Custom design systems usually settle at 80-180KB. The biggest waste is unused CSS shipped from utility frameworks without purge configuration.
First-party vs third-party CSS?
First-party CSS is your own stylesheets — typically your design system + utility framework + per-page styles. Third-party CSS comes from chat widgets (Intercom, Drift), embedded video players (YouTube, Vimeo), payment widgets (Stripe Elements), font services (Google Fonts CSS file), and third-party analytics (Hotjar). Third-party CSS commonly adds 40-100KB of unauditable weight; the checker above splits the views so you know which to optimize yourself vs which need vendor conversations.
How do I cut CSS without breaking design?
Four reduction patterns. One, purge unused CSS — Tailwind's JIT mode handles this automatically; for Bootstrap/Bulma, run PurgeCSS at build time (typical 60-80% reduction). Two, inline critical CSS — extract above-the-fold styles, inline in head, async-load the rest via rel=preload media-print swap. Three, code-split CSS by route — only ship per-route stylesheets. Four, audit Google Fonts — every font weight + style adds 30-50KB; trim to 2-3 weights typically used (400 + 700 + occasional italic).
Render-blocking CSS — what is it?
Synchronous link rel=stylesheet tags in the head block initial render until the CSS is fetched + parsed. Each blocking stylesheet adds round-trip latency to LCP and FCP. The fix is the rel=preload media-print pattern: load CSS as media=print so it doesn't block render, then onload swap to media=all. The dedicated Render Blocking Checker tool covers this in depth — this CSS Size Checker focuses on the byte-size view.
Does this tool save my data?
The URL is sent only to Google's public PageSpeed Insights API. Nothing is logged on Digital Heroes servers.
CSS over 200KB?
Our web development engagements ship PurgeCSS / Tailwind JIT, critical-CSS extraction, and Google Fonts trimming — typically 50-70% CSS reduction with no design impact.
Published · Last updated .