Inline CSS Test
The Inline CSS Test reports every inline style attribute on individual elements and the size of every inline <style> block in the <head>. While critical above-the-fold CSS inlined in <head> is a performance pattern, inline style attributes scattered across the markup are a maintenance and caching nightmare — they cannot be cached separately, override your stylesheets unpredictably, and bloat HTML on every page response.
What This Tool Checks
- Count of inline style attributes on individual elements
- Size of inline <style> blocks in <head>
- Critical CSS vs full CSS inlined
- Inline style overrides of external CSS
- !important usage in inline styles
Why It Matters for SEO
Inline style attributes are the worst form of CSS — un-cacheable, hard to maintain, and impossible to theme. They also have the highest specificity short of !important, making them surprise overrides for any stylesheet rule. Inline <style> blocks in <head> for critical above-the-fold CSS are fine and recommended; inline <style> blocks dumping the entire stylesheet defeat caching entirely.
How to Fix It
Audit inline style attributes — most can be replaced with utility classes or component CSS. Limit inline <style> to the critical above-the-fold subset (typically 5-15 KB). Externalise the rest of the CSS into cacheable bundles. Configure your CMS / framework to discourage inline styles in author tools.
How It Works
We parse the page HTML, count every style attribute on rendered elements, and measure the byte size of each inline <style> block. Inline styles overriding external CSS are flagged separately because they make the cascade unpredictable.
Common Mistakes to Avoid
- Hundreds of style="..." attributes from CMS export or copy-paste
- Entire production stylesheet inlined in <style> on every page
- Inline styles overriding theme CSS unpredictably
- Inline !important escalating into specificity wars
- Forgetting that critical CSS inline is good; everything inline is bad
Quick Checklist
- Critical above-the-fold CSS inlined in <head>
- No huge inline <style> blocks (>20 KB)
- Few inline style attributes
- No inline !important escalations
- External CSS bundles cached aggressively