CSS Stats Analyzer

Analyze CSS on web pages: unique colors, font families, media queries, CSS variables, and total CSS size.

What does CSS Stats Analyzer do?

This actor analyzes CSS usage on web pages. It parses both inline <style> blocks and external stylesheets to extract unique colors, font families, media queries, CSS custom properties (variables), and @import statements. It reports the total CSS size and provides a breakdown of design system patterns.

The actor fetches each page, collects all CSS sources (inline and external), parses them, and returns structured statistics about design tokens, complexity, and size. Use it for design system audits, performance optimization, or competitive analysis.

Use cases

• Design system auditing -- identify color and font inconsistencies that indicate design drift across a site or set of pages
• Performance optimization -- find oversized or redundant CSS that inflates page weight and slows loading
• Competitive analysis -- compare CSS complexity, color palettes, and font choices across competing websites
• Migration planning -- catalog CSS patterns, variables, and media queries before redesigning a site
• Code quality monitoring -- track CSS variable adoption and media query usage over time to measure refactoring progress

Why use CSS Stats Analyzer?

• Deep CSS parsing -- analyzes both inline style blocks and external stylesheets, including cross-origin CSS files
• Structured output -- get clean JSON with counts for colors, fonts, media queries, variables, and imports
• Total CSS size -- reports combined CSS weight in kilobytes to identify performance bottlenecks
• Batch processing -- scan multiple URLs in a single run to compare CSS metrics across pages or sites
• API access -- integrate CSS analysis into design system monitoring or CI/CD quality gates
• Pay-per-event pricing -- only pay per page analyzed with no monthly fees

Input parameters

Parameter	Type	Required	Default	Description
urls	array	Yes	--	List of web page URLs to analyze CSS on. Each URL is loaded and all inline and external stylesheets are parsed.

Example input

{
    "urls": [
        "https://www.google.com",
        "https://www.github.com"
    ]
}

Output fields

Each URL produces one record with the following fields:

Field	Description
url	The original URL provided in the input
title	The page title
externalStylesheets	Number of external CSS files linked from the page
inlineStyleBlocks	Number of inline <style> blocks in the HTML
totalCssSizeKb	Combined size of all CSS in kilobytes
colorCount	Number of unique color values found across all CSS
fontFamilyCount	Number of unique font-family values declared
mediaQueryCount	Number of media query breakpoints found
cssVariableCount	Number of CSS custom properties (variables) defined
importStatements	Number of @import rules found
error	Error message if analysis failed, null otherwise
analyzedAt	ISO 8601 timestamp of the analysis

Output example

{
    "url": "https://www.github.com",
    "title": "GitHub",
    "externalStylesheets": 3,
    "inlineStyleBlocks": 5,
    "totalCssSizeKb": 245.3,
    "colorCount": 42,
    "fontFamilyCount": 4,
    "mediaQueryCount": 12,
    "cssVariableCount": 85,
    "importStatements": 0,
    "error": null,
    "analyzedAt": "2026-03-01T12:00:00.000Z"
}

How much does it cost to analyze CSS stats?

CSS Stats Analyzer uses Apify's pay-per-event pricing. You only pay for what you use.

Event	Price	Description
Start	$0.035	One-time per run
URL analyzed	$0.002	Per page analyzed (includes fetching external stylesheets)

Cost examples:

• 10 pages: $0.035 + 10 x $0.002 = $0.055
• 100 pages: $0.035 + 100 x $0.002 = $0.235
• 500 pages: $0.035 + 500 x $0.002 = $1.035

How to analyze CSS on a website

1. Go to the CSS Stats Analyzer page on Apify Store.
2. Click Try for free to open the actor in Apify Console.
3. Enter the URLs you want to analyze in the urls input field.
4. Click Start to begin the CSS analysis.
5. Once the run finishes, download your results as JSON, CSV, or Excel from the Dataset tab.

Using the Apify API

You can start CSS Stats Analyzer programmatically using the Apify API. Replace YOUR_TOKEN with your Apify API token.

Node.js

import { ApifyClient } from 'apify-client';

const client = new ApifyClient({ token: 'YOUR_TOKEN' });
const run = await client.actor('automation-lab/css-stats-analyzer').call({
    urls: ['https://www.github.com', 'https://www.google.com'],
});
const { items } = await client.dataset(run.defaultDatasetId).listItems();
console.log(items);

Python

from apify_client import ApifyClient

client = ApifyClient('YOUR_TOKEN')
run = client.actor('automation-lab/css-stats-analyzer').call(run_input={
    'urls': ['https://www.github.com', 'https://www.google.com'],
})
items = client.dataset(run['defaultDatasetId']).list_items().items
print(items)

cURL

curl "https://api.apify.com/v2/acts/automation-lab~css-stats-analyzer/runs" \
  -X POST \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -d '{"urls": ["https://www.github.com", "https://www.google.com"]}'

Use with AI agents via MCP

CSS Stats Analyzer is available as a tool for AI assistants via the Model Context Protocol (MCP).

Setup for Claude Code

$claude mcp add --transport http apify "https://mcp.apify.com"

Setup for Claude Desktop, Cursor, or VS Code

{
    "mcpServers": {
        "apify": {
            "url": "https://mcp.apify.com"
        }
    }
}

Example prompts

• "Analyze CSS complexity for this website"
• "Get CSS statistics for our homepage"

Learn more in the Apify MCP documentation.

Integrations

Connect CSS Stats Analyzer with other tools using Apify integrations. Export results to Google Sheets for design system dashboards, send Slack alerts when CSS size exceeds a threshold, trigger Make or Zapier workflows for automated design reports, push data to n8n for custom analytics pipelines, or configure webhooks to track CSS metrics after every deployment.

Tips and best practices

• Track totalCssSizeKb over time by scheduling regular runs to detect CSS bloat before it impacts page performance.
• Compare colorCount across pages to identify color inconsistencies that suggest design system drift or missing design tokens.
• Monitor cssVariableCount as an indicator of design system adoption -- higher counts typically mean better design token usage.
• Check importStatements because @import in CSS blocks parallel loading and can significantly hurt performance.
• Combine with Font Detector to get a complete picture of typography including both CSS font-family declarations and actual web font loading.

Legality

This tool analyzes publicly accessible web content. Automated analysis of public web resources is standard practice in SEO and web development. Always respect robots.txt directives and rate limits when analyzing third-party websites. For personal data processing, ensure compliance with applicable privacy regulations.

FAQ

Does this actor fetch external stylesheets from other domains? Yes. The actor fetches and parses all linked stylesheets, including those served from CDNs or third-party domains. The per-page cost is slightly higher ($0.002) to account for the additional fetching.

What counts as a unique color? Each distinct color value in CSS is counted separately. For example, #000, black, and rgb(0,0,0) may be counted as separate colors because they appear as different values in the source CSS.

Can I use this to compare CSS across competitors? Yes. Run the actor with URLs from multiple competing sites and compare the output metrics (color count, font families, CSS size, variable count) side by side in the dataset results or exported to a spreadsheet.

Does the actor analyze CSS from JavaScript-injected stylesheets? The actor collects CSS from inline <style> blocks and <link> stylesheet references found in the HTML. Stylesheets injected purely via JavaScript at runtime may not be captured, but CSS loaded through standard link tags on CDNs is always included.

What is a good CSS size for a web page? As a rough benchmark, under 100 KB of total CSS is considered lightweight, 100-300 KB is typical for modern websites, and over 500 KB suggests optimization opportunities. Use totalCssSizeKb to identify pages that may benefit from CSS pruning or splitting.

The totalCssSizeKb seems too low for a page I know has lots of CSS. Why? The actor collects CSS from inline <style> blocks and <link> stylesheet references found in the HTML source. Stylesheets dynamically injected via JavaScript at runtime may not be captured. Also, some CDNs serve different CSS based on user-agent or require specific request headers that the actor may not replicate.

External stylesheets from a CDN are not being parsed. What can I do? If external stylesheets are served with CORS restrictions or require authentication, the actor may not be able to fetch them. The page's CSS metrics will only reflect the stylesheets that were successfully retrieved. Check the externalStylesheets count against what you expect to identify any gaps.

Other SEO tools

• Cloaking Detector -- Detect SEO cloaking on web pages.
• Broken Link Checker -- Find broken links across your website.
• Canonical URL Checker -- Verify canonical tags on your pages.
• SEO Title Checker -- Check title tags for SEO best practices.
• Heading Structure Checker -- Audit heading hierarchy on web pages.
• Content Readability Checker -- Analyze readability scores for your content.
• Cookie Scanner -- Scan cookies for GDPR compliance.