CP
Classpresso
Back to home
We Drink Our Own Coffee

Case Study: classpresso.com

Real results from using Classpresso to optimize our own website. Here's what happened when we ran Classpresso on classpresso.com.

Results at a Glance

27.0%
Fewer Class Characters
23.4%
Fewer CSS Classes
15.6%
Faster First Paint
8.3%
Faster Layout

1About classpresso.com

This website is built with Next.js 14 and Tailwind CSS — exactly the kind of stack Classpresso is designed to optimize.

Tech Stack

  • Next.js 14 (App Router)
  • Tailwind CSS 3.4
  • TypeScript
  • Server Components

Pages Tested

  • Homepage (landing page)
  • Documentation
  • Performance benchmarks
  • Login page

Note: These results are from a real production build, not synthetic benchmarks. The numbers represent what actually ships to users.

2Total Site Improvements

MetricBeforeAfterImprovement
Class Characters37,01827,01927.0% fewer
Total Classes3,5702,73623.4% fewer
HTML Size254.2 KB244.1 KB4.0% smaller
Layout Duration11.55ms10.59ms8.3% faster
Style Recalculation3.67ms3.59ms2.2% faster

Key takeaway: Across all 4 pages, we eliminated 834 classes and 9,999 class characters. That's less parsing, matching, and computation on every page load.

3Per-Page Breakdown

Different pages see different improvements based on their complexity. Pages with more repeated patterns benefit the most.

Homepage

Classes
1734 → 1444
16.7% fewer
Class Chars
18,291 → 14,853
18.8% fewer
First Paint
51.2ms → 43.2ms
15.6% faster
Layout
6.49ms → 5.51ms
15.1% faster

Documentation

Classes
749 → 484
35.4% fewer
Class Chars
7,785 → 4,647
40.3% fewer
First Paint
21.6ms → 20ms
7.4% faster
Layout
2.33ms → 2.31ms
Minimal change

Login Page

Best Results
Classes
123 → 28
77.2% fewer
Class Chars
1,402 → 208
85.2% fewer
First Paint
16ms → 17.6ms
Minimal change
Layout
0.32ms → 0.33ms
Minimal change

The login page saw the biggest class reduction because it uses highly repeated UI components (buttons, inputs, cards) that all share similar Tailwind patterns.

4How We Did It

Adding Classpresso to our build took less than 5 minutes:

# 1. Install classpresso
npm install classpresso --save-dev

# 2. Update package.json build script
"build": "next build && classpresso optimize"

# That's it. Build as normal:
npm run build

No code changes. No configuration files. Classpresso automatically detects repeated patterns in the build output and consolidates them.

Pro tip: Run classpresso analyze first to see potential savings before applying changes.

5Benchmark Methodology

Test Environment
────────────────────────────────────────────────────────────────
Browser: Chromium (via Playwright)
CPU: Throttled 4x (simulates mobile device)
Runs: 5 iterations averaged per metric

Metrics Collected
────────────────────────────────────────────────────────────────
- HTML size (raw bytes)
- Total class count (class attributes parsed)
- Total class characters (characters in class attributes)
- Performance.getMetrics() → LayoutDuration, RecalcStyleDuration
- performance.timing → First Paint, First Contentful Paint

Test Pages
────────────────────────────────────────────────────────────────
- Homepage: Marketing landing page with hero, features, CTAs
- Docs: Documentation page with code blocks, navigation
- Performance: Data-heavy page with tables, charts
- Login: Simple form with authentication UI

All tests run against static exports of the Next.js build. Numbers represent actual browser rendering performance, not theoretical estimates.

classpresso.com is now faster thanks to Classpresso

27% fewer class characters
23% fewer CSS classes
15% faster First Paint
Zero code changes

If it works on our site, it'll work on yours.

Ready to optimize your site?

Get started with Classpresso in under 5 minutes.

View DocumentationSee All Benchmarks