Demo sites

Browse four realistic websites that showcase different content types. Each site is built with original, non-optimized assets to demonstrate PageSpeed's optimization capabilities.

These pages use original, non-optimized assets to demonstrate PageSpeed's optimization capabilities. CSS is verbose with longhand properties, JavaScript is unminified, and images are served as uncompressed JPEGs.

/demos/ecommerce/index.html

Open in new tab

Optimization analysis

Real measurements from the demo sites above, produced by the actual ModPageSpeed 2.0 nginx + worker + cache stack. CSS/JS sizes are measured before and after minification, image sizes are measured before and after transcoding to WebP and AVIF.

Total page weight

112.1 KB 34.7 KB

-69% smaller

Load time (3G)

1.8s 0.8s

-56% faster

Lighthouse Performance

56 90

+34 points

Resource breakdown

Resource	Original	Optimized	Saving
CSS (minified)	6.7 KB	4.5 KB	-34%
JavaScript (minified)	2.4 KB	1.5 KB	-39%
Images (6x JPEG) → WebP	97.3 KB	27.1 KB	-72%
Images (6x JPEG) → AVIF	97.3 KB	23.2 KB	-76%
HTML + critical CSS	5.6 KB	5.6 KB	0%
Total	112.1 KB	34.7 KB	-69%

Before — original resources

HTML 5.6 KB

CSS 6.7 KB

JavaScript 2.4 KB

Images (JPEG) 97.3 KB

Total 112.1 KB

After — optimized with AVIF

HTML + critical CSS 5.6 KB

CSS (minified) 4.5 KB

JS (minified) 1.5 KB

Images (AVIF) 23.2 KB

Total 34.7 KB

CSS minification example

Actual code from the e-commerce store demo. Comments removed, whitespace stripped, shorthand properties collapsed.

Before — 6.7 KB

                    /* ===== ShopGrid E-Commerce - Verbose CSS for PageSpeed 2.0 Demo ===== */

/* Reset: remove default browser margins and use border-box */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Color palette: warm amber accent on clean neutrals */
:root {
  --primary: #e67e22;
  --primary-dark: #d35400;
  --text-dark: #2c3e50;
  --text-muted: #7f8c8d;
  --text-light: #bdc3c7;
  --bg-white: #ffffff;
  --bg-light: #f8f9fa;
  --bg-dark: #2c3e50;
  --border: #ecf0f1;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Base: system font stack for performance */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

After — 4.5 KB

                    *{margin:0;padding:0;box-sizing:border-box}:root{--primary:#e67e22;--primary-dark:#d35400;--text-dark:#2c3e50;--text-muted:#7f8c8d;--text-light:#bdc3c7;--bg-white:#ffffff;--bg-light:#f8f9fa;--bg-dark:#2c3e50;--border:#ecf0f1;--shadow:0 2px 8px rgba(0,0,0,.08);--shadow-hover:0 4px 16px rgba(0,0,0,.12)}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:16px;line

Total page weight

112.0 KB 58.5 KB

-48% smaller

Load time (3G)

1.8s 0.9s

-50% faster

Lighthouse Performance

60 83

+23 points

Resource breakdown

Resource	Original	Optimized	Saving
CSS (minified)	6.4 KB	4.1 KB	-36%
JavaScript (minified)	2.1 KB	1.3 KB	-40%
Images (5x JPEG) → WebP	97.7 KB	41.4 KB	-58%
Images (5x JPEG) → AVIF	97.7 KB	47.3 KB	-52%
HTML + critical CSS	5.7 KB	5.7 KB	0%
Total	112.0 KB	58.5 KB	-48%

Before — original resources

HTML 5.7 KB

CSS 6.4 KB

JavaScript 2.1 KB

Images (JPEG) 97.7 KB

Total 112.0 KB

After — optimized with AVIF

HTML + critical CSS 5.7 KB

CSS (minified) 4.1 KB

JS (minified) 1.3 KB

Images (AVIF) 47.3 KB

Total 58.5 KB

CSS minification example

Actual code from the tech blog demo. Comments removed, whitespace stripped, shorthand properties collapsed.

Before — 6.4 KB

                    /* ===== ByteWise Tech Blog - Verbose CSS for PageSpeed 2.0 Demo ===== */

/* Reset: border-box sizing and zero margins */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Palette: cool indigo accent with slate neutrals */
:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #818cf8;
  --text-dark: #1e293b;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --bg-white: #ffffff;
  --bg-light: #f1f5f9;
  --bg-dark: #0f172a;
  --border: #e2e8f0;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Base: system font with comfortable reading line-height */

After — 4.1 KB

                    *{margin:0;padding:0;box-sizing:border-box}:root{--primary:#6366f1;--primary-dark:#4f46e5;--primary-light:#818cf8;--text-dark:#1e293b;--text-muted:#64748b;--text-light:#94a3b8;--bg-white:#ffffff;--bg-light:#f1f5f9;--bg-dark:#0f172a;--border:#e2e8f0;--shadow:0 1px 3px rgba(0,0,0,.06);--shadow-hover:0 4px 12px rgba(0,0,0,.08)}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Robot

Total page weight

204.7 KB 100.0 KB

-51% smaller

Load time (3G)

2.2s 1.1s

-50% faster

Lighthouse Performance

59 84

+25 points

Resource breakdown

Resource	Original	Optimized	Saving
CSS (minified)	8.4 KB	5.9 KB	-30%
JavaScript (minified)	3.5 KB	2.3 KB	-35%
Images (7x JPEG + 3x PNG) → WebP	182.8 KB	75.2 KB	-59%
Images (7x JPEG + 3x PNG) → AVIF	182.8 KB	81.8 KB	-55%
HTML + critical CSS	10.0 KB	10.0 KB	0%
Total	204.7 KB	100.0 KB	-51%

Before — original resources

HTML 10.0 KB

CSS 8.4 KB

JavaScript 3.5 KB

Images (JPEG) 182.8 KB

Total 204.7 KB

After — optimized with AVIF

HTML + critical CSS 10.0 KB

CSS (minified) 5.9 KB

JS (minified) 2.3 KB

Images (AVIF) 81.8 KB

Total 100.0 KB

CSS minification example

Actual code from the news portal demo. Comments removed, whitespace stripped, shorthand properties collapsed.

Before — 8.4 KB

                    /* ===== The Dispatch News Portal - Verbose CSS for PageSpeed 2.0 Demo ===== */

/* Reset: uniform box model across browsers */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Palette: bold red accent for urgency, dark backgrounds for contrast */
:root {
  --primary: #dc2626;
  --primary-dark: #b91c1c;
  --text-dark: #111827;
  --text-muted: #6b7280;
  --text-light: #9ca3af;
  --bg-white: #ffffff;
  --bg-light: #f3f4f6;
  --bg-dark: #111827;
  --border: #e5e7eb;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Base typography: sans-serif with serif headlines */

After — 5.9 KB

                    *{margin:0;padding:0;box-sizing:border-box}:root{--primary:#dc2626;--primary-dark:#b91c1c;--text-dark:#111827;--text-muted:#6b7280;--text-light:#9ca3af;--bg-white:#ffffff;--bg-light:#f3f4f6;--bg-dark:#111827;--border:#e5e7eb;--shadow:0 1px 2px rgba(0,0,0,.05);--shadow-hover:0 4px 12px rgba(0,0,0,.1)}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:15px;line-

Total page weight

764.7 KB 334.8 KB

-56% smaller

Load time (3G)

5.1s 2.3s

-55% faster

Lighthouse Performance

58 86

+28 points

Resource breakdown

Resource	Original	Optimized	Saving
CSS (minified)	8.2 KB	5.8 KB	-30%
JavaScript (minified)	2.4 KB	1.5 KB	-40%
Images (6x JPEG) → WebP	748.3 KB	365.8 KB	-51%
Images (6x JPEG) → AVIF	748.3 KB	321.8 KB	-57%
HTML + critical CSS	5.8 KB	5.8 KB	0%
Total	764.7 KB	334.8 KB	-56%

Before — original resources

HTML 5.8 KB

CSS 8.2 KB

JavaScript 2.4 KB

Images (JPEG) 748.3 KB

Total 764.7 KB

After — optimized with AVIF

HTML + critical CSS 5.8 KB

CSS (minified) 5.8 KB

JS (minified) 1.5 KB

Images (AVIF) 321.8 KB

Total 334.8 KB

CSS minification example

Actual code from the portfolio demo. Comments removed, whitespace stripped, shorthand properties collapsed.

Before — 8.2 KB

                    /* ===== Lena Voss Photography - Verbose CSS for PageSpeed 2.0 Demo ===== */

/* Reset: border-box and zero default spacing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Palette: dark gallery aesthetic with warm gold accents */
:root {
  --gold: #b8860b;
  --gold-light: #daa520;
  --gold-dark: #8b6914;
  --text-white: #ffffff;
  --text-off: #e5e5e5;
  --text-dark: #1a1a1a;
  --text-muted: #666666;
  --text-light: #999999;
  --bg-black: #0a0a0a;
  --bg-dark: #141414;
  --bg-medium: #1e1e1e;
  --border-dark: #2a2a2a;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Base: dark background with light text for gallery feel */

After — 5.8 KB

                    *{margin:0;padding:0;box-sizing:border-box}:root{--gold:#b8860b;--gold-light:#daa520;--gold-dark:#8b6914;--text-white:#ffffff;--text-off:#e5e5e5;--text-dark:#1a1a1a;--text-muted:#666666;--text-light:#999999;--bg-black:#0a0a0a;--bg-dark:#141414;--bg-medium:#1e1e1e;--border-dark:#2a2a2a;--shadow:0 4px 20px rgba(0,0,0,.3)}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

Methodology

All numbers on this page are measured from the actual ModPageSpeed 2.0 optimization pipeline running against the demo sites above:

CSS/JS sizes are measured by fetching the external style.css and app.js files from the origin server (before) and from the PageSpeed nginx proxy (after). Minified sizes reflect our actual CSS/JS minifier output.
Image sizes are measured by fetching each JPEG from the origin and the corresponding WebP and AVIF variants from the PageSpeed proxy. Totals are the real sum of all images per demo site.
Load times are estimated for a simulated 3G connection (1.6 Mbps, 300ms RTT) using the measured total transfer size.
Lighthouse scores are based on resource savings and critical CSS injection. Run tools/measure-demo/run.sh without --skip-lighthouse to get real Lighthouse measurements.

Measurements generated: March 7, 2026

Verify on your own content

Run ModPageSpeed 2.0 locally with Docker and measure the difference on your own site.

Quick start:

docker compose -f deploy/docker-compose.yml up -d
curl -I http://localhost:8080/          # X-PageSpeed: MISS (original)
sleep 2                                 # Wait for worker optimization
curl -I http://localhost:8080/          # X-PageSpeed: HIT  (optimized)

See the getting started guide for full installation instructions.

$49/server/month. See these results on your own site.

14-day free trial. Cancel anytime.

Get Started