influxdata / influxdata/docs-v2
perf: Reduce render-blocking, unminified, and unused CSS (est. 3.3 s FCP/LCP savings)
- Dominant language
- JavaScript
- Stars
- 82
- Forks
- 326
- Avg merge
- 1d 1h
- Merged PRs (30d)
- 82
Description
## Problem
A Lighthouse 13.2.0 audit of https://docs.influxdata.com/influxdb3/enterprise/ (2026-07-20, mobile emulation, simulated throttling) scored **Performance 47**, with **FCP 4.8 s** (score 0.12) and **LCP 5.7 s** (score 0.16). Stylesheet delivery is the main first-paint bottleneck.
## Lighthouse findings
**`render-blocking-insight` — estimated savings 3,300 ms (FCP and LCP):**
| Resource | Transfer size | Blocking duration |
| --- | --- | --- |
| `light-theme..css` | 140,864 B | 1,350 ms |
| `https://fonts.googleapis.com/css2?family=IBM+Plex+Mono...&display=swap` | 1,470 B | 816 ms |
| `https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css` | 6,025 B | 798 ms |
| `/api.css` | 10,705 B | 150 ms |
| `dark-theme..css` (small toggle sheet) | 1,039 B | — |
**`unused-css-rules` — estimated savings 178 KiB / 750 ms:**
- `light-theme.css`: **96.7% unused** on this page (135,778 of 140,459 bytes)
- Inline CSS reset block: 99.8% unused (46,131 of 46,235 bytes)
**`unminified-css` — estimated savings 103 KiB / 450 ms:**
- `light-theme.css`: 65% smaller if minified (91,704 B)
- `api.css`: 66% smaller (7,057 B)
- Inline CSS block: 6,490 B
**`cache-insight` (first-party):**
- `/fonts/icomoon-v4.woff2` is served with **cache TTL 0** (7,510 B re-downloaded every visit)
Note: the full dark-theme stylesheet (141,426 B) is also downloaded at VeryLow priority even when the light theme renders, roughly doubling total CSS transfer (345 KiB across 8 stylesheets).
## Proposed fix
- Minify `light-theme`/`dark-theme`/`api.css` in the Hugo asset pipeline (`resources.Minify`).
- Split or purge the theme stylesheets — most rules on any given page belong to other products/components; consider per-section bundles or PurgeCSS against rendered output.
- Load the Google Fonts CSS and docsearch CSS non-blocking (preload + `onload` swap, or self-host/inline them). The docsearch CSS could be loaded together with the already-lazy docsearch JS (`assets/js/components/doc-search.js`).
- Add long-lived cache headers for `/fonts/*` static assets.
## Reproduce
Run Lighthouse (navigation mode, mobile) against https://docs.influxdata.com/influxdb3/enterprise/ and inspect `render-blocking-insight`, `unused-css-rules`, `unminified-css`, and `cache-insight`.
Related: accessibility/SEO fixes from the same audit are on branch `claude/influxdb-docs-lighthouse-chphcn`; third-party JS deferral is tracked separately.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the Hugo asset pipeline and assets/js/components/doc-search.js, then reproduce the Lighthouse audit against the documented enterprise URL on mobile. Review the render-blocking, unused-CSS, unminified-CSS, and cache findings; done means the relevant styles and font assets are delivered more efficiently and the audit confirms improved loading behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, hugo, javascript
- Domain
- documentation, frontend, performance
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100