# CSS Optimization Recommendations

**Generated by:** `v2/scripts/dev-helpers/css-coverage-analyzer.py`

**Input:** `CSS_COVERAGE_RESULTS.json` (from `npm run css:coverage`)

---

## Summary

- **Pages analyzed:** 10
- **Pages with >30% avg unused CSS:** 10
- **Files with <50% avg usage (excl. output.min.css):** 20

---

## 1. output.min.css Usage

Tailwind bundle typically shows 60–80% unused on single pages.

| Page Type | Used % | Unused % |
|-----------|--------|----------|
| homepage | 16.7 | 83.3 |
| comparison | 19.1 | 80.9 |
| tools | 15.9 | 84.1 |
| tools | 0 | 100 |
| tools | 14.7 | 85.3 |
| blog_index | 10.9 | 89.1 |
| blog_post | 0 | 100 |
| blog_post | 11.4 | 88.6 |
| product | 12.5 | 87.5 |
| pricing | 15.6 | 84.4 |
| industry | 0 | 100 |
| industry | 17.1 | 82.9 |
| templates | 14.4 | 85.6 |

**Recommendation:** If >70% unused on most pages, consider separate Tailwind builds (output-base.css + output-{page-type}.css). Defer unless data strongly supports.

---

## 2. Pages with High Unused CSS (>30% avg)

| Page Type | URL | Avg Unused % |
|-----------|-----|--------------|
| product | https://www.ordio.com/schichtplan | 84.1 |
| blog_post | https://www.ordio.com/insights/lexikon/minijob/ | 82.5 |
| industry | https://www.ordio.com/branchen/gastronomie | 82.0 |
| tools | https://www.ordio.com/tools/arbeitszeitrechner | 81.7 |
| blog_index | https://www.ordio.com/insights/ | 79.4 |
| homepage | https://www.ordio.com/ | 77.4 |
| tools | https://www.ordio.com/tools/minijob-rechner | 77.2 |
| templates | https://www.ordio.com/vorlagen/schichtplan-excel-vorlage | 76.5 |
| comparison | https://www.ordio.com/alternativen/planday-vergleich | 75.0 |
| pricing | https://www.ordio.com/preise | 71.9 |

**Recommendation:** Review page-specific CSS; consider lazy-load or split.

---

## 3. Files with Low Usage (<50% avg)

| File | Avg Used % | Page Count |
|------|------------|------------|
| aos.css | 3.5 | 8 |
| swiper-bundle.min.css | 4.8 | 1 |
| tools-pages.min.css | 5.8 | 3 |
| product-pages.min.css | 6.2 | 2 |
| blog-base.min.css, blog-index.min.css, blog-post.min.css | (split 2026-02-24; re-run coverage post-deploy) | — |
| templates-pages.min.css | 14.1 | 1 |
| industry-pages.min.css | 15.9 | 1 |
| arbeitszeitrechner | 19.4 | 7 |
| insights | 19.5 | 5 |
| schichtplan | 19.5 | 5 |
| gastronomie | 19.5 | 5 |
| minijob | 20.9 | 6 |
| schichtplan-excel-vorlage | 21.7 | 14 |
| planday-vergleich | 22.3 | 6 |
| www.ordio.com | 24.3 | 6 |
| minijob-rechner | 28.4 | 6 |
| preise | 32.9 | 7 |
| pricing-page.min.css | 37.2 | 1 |
| comparison-pages.min.css | 39.7 | 1 |
| critical.css | 45.5 | 10 |

**Recommendation:** Candidates for split, lazy-load, or removal.

---

## 4. Phase 5 Structural Optimizations (Data-Driven)

**Status:** Deferred. Coverage data supports optimizations, but build complexity and cache fragmentation outweigh benefits for now.

Apply only if coverage data strongly supports and LCP targets are missed:

- **Blog CSS split:** ✅ DONE (2026-02-24). Split into blog-base + blog-index + blog-post. Index/category load base+index (~52 KB); post loads base+post (~53 KB).
- **Tailwind page-type split:** output.min.css >70% unused on most pages; evaluate output-base + output-{page-type}. Risk: Build complexity, cache fragmentation.
- **Lazy-load below-fold:** For large page-specific files (e.g. blog 73KB), defer non-critical portion. Use coverage to identify critical vs non-critical selectors.