Skip to content

[6.x] Speed up the control panel on large entries - #15679

Open
o1y wants to merge 2 commits into
statamic:6.xfrom
o1y:cp-perf-small-fixes
Open

o1y wants to merge 2 commits into
statamic:6.xfrom
o1y:cp-perf-small-fixes

Conversation

@o1y

@o1y o1y commented Oct 19, 2026

Copy link
Copy Markdown
Contributor

On large entries the CP is really slow for us. Most of the time went into Chrome recalculating styles. Here are two small changes that helped:

  • Rewrote a few :has() selectors that made Chrome restyle large parts of the page on almost every DOM change.
  • Tabs.vue no longer deep-watches the tabs, which walked the whole blueprint

Page load went from ~11.5s to ~1.3s and opening Live Preview from ~10.5s to ~1.5s for us.

Please treat this as a suggestion rather than a fully tested implementation. I only checked it on our setup in Chrome. There are a still a few other rules with the same pattern (e.g. in base.css and Header.vue) that might be worth a look too. In general I would avoid has on body or any other big container.


*/
@utility bg-architectural-lines {
&:not(:has(.page-tree-branch)) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This one's fine to drop, now that #15681 is in. The navigation page wasn't removing the class when you left, so after visiting an empty nav the lines would show up on other pages. The :has(.page-tree-branch) guard was quietly hiding that behind the Pages tree. With #15681 the class doesn't leak any more, so the guard isn't needed.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Thanks! Rebased onto 6.x so #15681 is included :)

@o1y
o1y force-pushed the cp-perf-small-fixes branch from 4de0216 to 6e87d91 Compare October 19, 2026 18:56
}
/* =Jay. Exceptions */
/* e.g. for a fieldset, we don't want to trim the text when we have a label like on a collections field, Link Item button */
.form-group :has(> &) & {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

✔ confirmed this has no negative effect

This branch has not been deployed

No deployments
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.

2 participants