Skip to content

[docs-infra] Improve Typedocs HTML Weight#4497

Open
dav-is wants to merge 19 commits intomui:masterfrom
dav-is:docs-infra/improve-types-html-weight
Open

[docs-infra] Improve Typedocs HTML Weight#4497
dav-is wants to merge 19 commits intomui:masterfrom
dav-is:docs-infra/improve-types-html-weight

Conversation

@dav-is
Copy link
Copy Markdown
Member

@dav-is dav-is commented Mar 31, 2026

Pairs with upstream PR: mui/mui-public#1269 released in v0.8

Defers detailed type code highlighting until after hydration. Significantly decreases uncompressed HTML size, HTML parse time, RSC prop parse time, and render time. This is described in the docs: Prop Compression Pattern

Similar to performance improvements seen for Demos in #2443

Preview Deployment

Screenshots

First render (realistically, the accordion will be closed, so this will not be visible to users):

Screenshot From 2026-04-16 09-56-17

shortType is always highlighted on first render.

After hydration + visible:

Screenshot From 2026-04-16 09-55-16

Combobox Benchmark

Decreases the page's uncompressed HTML size by 30% with the tradeoff of increasing the compressed HTML by 5%. Brings it below the 2 MB limit for search engine crawlers.

Uncompressed HTML Compressed HTML
Before 2675 KB 276 KB
After 1886 KB 290 KB
Change -789 KB (30%) +14 KB (5%)

Improves first contentful paint and hydration time by 42 ms. Achieved by reducing HTML parse time by 34%, scripting time (to parse the RSC props) by 31%, and reducing time to calculate styles by 30% ("Recalculating Styles" in performance trace).

Parse Time Scripting Time Calculating Styles Total
Before 56ms 49ms 27ms = 132ms
After 37ms 34ms 19ms = 90ms
Change -19ms (34%) -15ms (31%) -8ms (30%) = -42ms (29%)

Before:
Screenshot From 2026-04-03 12-49-49

After:
Screenshot From 2026-04-03 12-49-57

changing network conditions resulted in slightly offset timing between the two runs

Local Testing

To remove network latency as a factor, I tested this locally using the calibrated "Mid-Tier Mobile" CPU throttling.
All the following screenshots are the same scale.

Largest Contentful Paint (LCP)

Before: LCP in 278 ms
image

After: LCP in 229 ms (reduced by 18%)
image

DOM Content Loaded (DCL)

Before: 1,120 ms
image

After: 952 ms (reduced by 15%)
image

Before:
Screenshot From 2026-04-10 16-44-27

After:
image

Hydrated & Idle Time

Page hydrates and becomes idle 215ms sooner.

@dav-is dav-is added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: docs-infra Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305). labels Mar 31, 2026
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Mar 31, 2026

commit: f44e108

@dav-is dav-is changed the title [docs-infra] Improve Typedoc Html Weight [docs-infra] Improve Typedocs Html Weight Mar 31, 2026
@mui-bot
Copy link
Copy Markdown

mui-bot commented Mar 31, 2026

Bundle size report

Bundle Parsed size Gzip size
@base-ui/react 0B(0.00%) 0B(0.00%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 31, 2026

Deploy Preview for base-ui ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 41251c8
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/69cc49ce5084f60008f30474
😎 Deploy Preview https://deploy-preview-4497--base-ui.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.

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 31, 2026

Deploy Preview for base-ui ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit f44e108
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/69e1009430262c0007c4dbc7
😎 Deploy Preview https://deploy-preview-4497--base-ui.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.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 3, 2026
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 3, 2026
@dav-is dav-is changed the title [docs-infra] Improve Typedocs Html Weight [docs-infra] Improve Typedocs HTML Weight Apr 3, 2026
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 6, 2026
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 7, 2026
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 8, 2026
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 9, 2026
@code-infra-dashboard
Copy link
Copy Markdown

code-infra-dashboard bot commented Apr 9, 2026

Bundle size

Bundle Parsed size Gzip size
@base-ui/react 0B(0.00%) 0B(0.00%)

Details of bundle changes

Deploy preview

https://deploy-preview-4497--base-ui.netlify.app/

Performance

Total duration: 1,300.40 ms 🔺+47.49 ms(+3.8%) | Renders: 53 (+0) | Paint: 2,047.77 ms 🔺+93.37 ms(+4.8%)

Test Duration Renders
Select open (500 options) 59.66 ms 🔺+15.99 ms(+36.6%) 14 (+0)
Menu mount (300 instances) 151.78 ms 🔺+21.23 ms(+16.3%) 2 (+0)
Scroll Area mount (300 instances) 93.85 ms 🔺+10.53 ms(+12.6%) 3 (+0)
Select mount (200 instances) 154.26 ms 🔺+16.57 ms(+12.0%) 3 (+0)
Dialog mount (300 instances) 81.88 ms 🔺+7.17 ms(+9.6%) 2 (+0)

...and 7 more. View full report

Details of benchmark changes


Check out the code infra dashboard for more information about this PR.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 13, 2026
Signed-off-by: Connor Davis <mail@connordav.is>
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 13, 2026
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 16, 2026
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 16, 2026
@dav-is dav-is marked this pull request as ready for review April 16, 2026 15:37
@dav-is dav-is requested a review from aarongarciah April 16, 2026 15:48
@dav-is dav-is mentioned this pull request Apr 16, 2026
1 task
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 17, 2026
Copy link
Copy Markdown
Member

@aarongarciah aarongarciah left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR: out-of-date The pull request has merge conflicts and can't be merged. scope: docs-infra Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305). type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants