CSS DCB Prototype

Demonstrating Compression Dictionary Transport for CSS — see how shared dictionaries can dramatically reduce transfer sizes.

⚡

With Dictionary Compression

Uses Use-As-Dictionary headers to register CSS as compression dictionaries. Subsequent requests use delta compression for massive savings.

~95%
Size Reduction
780B
full.css
94B
site-b.css
Site A → Site B →
📦

Without Dictionary Compression

Standard CSS loading without compression dictionaries. Each file is compressed independently with regular Brotli/gzip.

~80%
Size Reduction
2.3KB
full.css
2KB
site-b.css
Site A → Site B →

How to Test

  1. Enable Compression Dictionary Transport in Chrome/Edge flags
  2. Open DevTools → Network tab
  3. Visit Site A first (this registers the dictionary)
  4. Then navigate to Site B
  5. Check for Available-Dictionary in request headers
  6. Check for Content-Encoding: dcb in response headers

Compare the transfer sizes between the DCB and non-DCB versions to see the difference!