influxdata / influxdata/docs-v2

perf: Reduce render-blocking, unminified, and unused CSS (est. 3.3 s FCP/LCP savings)

Open
#7,543 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.