Skip to content

💄🚀:stop shipping the CSS nothing wears - #1877

Merged
openinf-commit-queue[bot] merged 1 commit into
livefrom
perf/trim-the-stylesheet
Aug 31, 2026
Merged

openinf-commit-queue[bot] merged 1 commit into
livefrom
perf/trim-the-stylesheet

Conversation

@DerekNonGeneric

@DerekNonGeneric DerekNonGeneric commented Aug 31, 2026 •

Copy link
Copy Markdown
Member

main.min.css was 158.2 KB — a third of the entire 484 KB site, and
render-blocking on every page. It is now 94.4 KB, 40% smaller, with
no visual change anywhere.

Where the weight was

Measured by building with and without each piece:

size
whole stylesheet 158.2 KB
your own SCSS 33.3 KB (21%)
Bootstrap output 124.8 KB (79%)

Browser CSS coverage across seven pages covering every layout found
34.4 KB ever used. Your bespoke SCSS is 33.3 KB and essentially all of
it is live, so the unused portion was almost entirely Bootstrap.

What went

pagination — the markup never names it. Exact class counts across
the built site: .pagination 0, .page-item 0, .page-link 0.

grid — .row 0, .col-* 0. The invite-row and join-row in
home.html and docs.html are ours; an earlier substring grep of mine
mistook them for Bootstrap's, which is why the counts here are anchored
to whole class names.

The utility matrix — 68.9 KB generating a class for every value of
every utility. The markup wears eighteen:

bg-dark  d-flex  d-md-flex  d-none  flex-column  flex-shrink-0  h-100
mb-2  mb-4  mb-md-0  me-auto  mt-auto  my-0  py-0  py-3
text-body-tertiary  text-center  w-100

$utilities is now narrowed to the thirteen groups those come from,
before utilities/api reads it. Adding a utility later means adding a
line there first — a papercut, and also a guardrail.

map.get needs sass:map, and a @use must precede every @import,
so that one line sits at the top of the file.

What stayed, and why

containers (.container-fluid on 21 pages), helpers (.fixed-top
on 21), nav/navbar (.nav-link and .nav-item 168 each), plus
reboot and root.

Checked

  • nps test — all verify tasks pass.
  • All 18 utility classes plus .container-fluid, .fixed-top,
    .navbar, .nav-link, .nav-item, .btn and .btn-primary still
    resolve to rules in the built CSS.
  • 9 pages × 2 viewports, all 18 screenshots pixel-identical to the
    build before this change — home, news, about, docs, license, a
    handbook page, a news post, 404 and a security doc, at 1280px and
    390px.
  • The mobile drawer still opens on one tap in WebKit, with
    aria-expanded and inert correct, and closes again. No page
    errors.

Left on the table

buttons costs 10.0 KB and styles a single .btn on /404/.
Replacing it with a bespoke rule would take the stylesheet to roughly
84 KB, but that changes how that button looks unless matched carefully,
so it is not in this PR.

Summary by CodeRabbit

  • Performance
    • Reduced the amount of unused styling included in the application by limiting Bootstrap utilities and removing unnecessary pagination and grid styles.

The stylesheet was 158 KB, a third of the whole site, blocking the
render of every page. Browser coverage put 34 KB of it to work and left
the rest untouched; 125 KB of the 158 came from Bootstrap.

Three things went. `pagination` styles a component the markup never
names -- no `.pagination`, `.page-item` or `.page-link` anywhere.
`grid` was the same: no `.row` and no `.col-*`, the `invite-row` and
`join-row` in the markup being ours. The utility API was the large one,
generating a class for every value of every utility, 69 KB of it, while
the markup wears eighteen: the displays, one flex direction and shrink,
a width, a height, five margins, two paddings, a text alignment and two
colors. It is handed those thirteen groups now.

`map.get` needs `sass:map`, and a `@use` has to precede every import,
so it sits above the file.

94 KB, and the same site: nine pages at two widths render pixel for
pixel as they did, and the drawer still opens on one tap.

Signed-off-by: Derek Lewis <DerekNonGeneric@inf.is>
Assisted-by: Claude-Code:claude-opus-5
@netlify

netlify Bot commented Aug 31, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for gh-pages-openinf ready!

Name Link
🔨 Latest commit 8df117f
🔍 Latest deploy log https://app.netlify.com/projects/gh-pages-openinf/deploys/6a96001046b2b200080b980c
😎 Deploy Preview https://deploy-preview-1877--gh-pages-openinf.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai

coderabbitai Bot commented Aug 31, 2026 •

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Team

Run ID: 23cfe25e-d8a4-4a2b-b800-283df0fe18ef

📥 Commits

Reviewing files that changed from the base of the PR and between 07f13ec and 8df117f.

📒 Files selected for processing (1)
  • _assets/styles/main.scss

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.


📝 Walkthrough

Walkthrough

The main Sass stylesheet now imports Sass’s map module, removes Bootstrap pagination and grid styles, and generates only selected utility groups.

Changes

Bootstrap stylesheet optimization

Layer / File(s) Summary
Sass imports and utility selection
_assets/styles/main.scss
The stylesheet imports Sass’s map module, removes pagination and grid imports, and limits the Bootstrap utilities API to selected groups such as colors, display, flex, spacing, text alignment, and width.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 8df11

This change removes unused stylesheet output while preserving the reported page visuals and interactions; no actionable merge-blocking risk remains after normal checks and review.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title describes the main change: removing unused CSS to reduce the shipped stylesheet size. The emojis and informal wording reduce clarity, but the title remains relevant and specific.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch perf/trim-the-stylesheet

Warning

Some tools did not complete. Review the errors below.

🔧 Stylelint (17.14.0)
_assets/styles/main.scss

ConfigurationError: Could not find "stylelint-config-recess-order". Do you need to install the package or use the "configBasedir" option?
at getModulePath (file:///usr/local/lib/node_modules/stylelint/lib/utils/getModulePath.mjs:38:9)
at loadExtendedConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:285:21)
at extendConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:252:25)
at async augmentConfigBasic (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:85:20)
at async augmentConfigFull (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:138:24)
at async getConfigForFile (file:///usr/local/lib/node_modules/stylelint/lib/getConfigForFile.mjs:102:26)
at async resolveOptionValue (file:///usr/local/lib/node_modules/stylelint/lib/utils/resolveOptionValue.mjs:27:24)
at async standalone (file:///usr/local/lib/node_modules/stylelint/lib/standalone.mjs:127:22)


Comment @coderabbitai help to get the list of available commands.

@DerekNonGeneric DerekNonGeneric added the 🚀 Status: Commit Queue Land this pull request when its checks pass label Aug 31, 2026
@openinf-commit-queue
openinf-commit-queue Bot merged commit b1a3314 into live Aug 31, 2026
17 checks passed
@openinf-commit-queue openinf-commit-queue Bot removed the 🚀 Status: Commit Queue Land this pull request when its checks pass label Aug 31, 2026
@DerekNonGeneric
DerekNonGeneric deleted the perf/trim-the-stylesheet branch September 6, 2026 21:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant