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?

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

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)

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.

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.