We all care about speed and performance. To improve, you do a lot with network, code and so on. Every small change matter. However, we'll finally reach the limit with the network and scripts.
CSS containment brings rendering optimization to the browsers. By isolating specific parts of the page from the others, the browsers can treat these parts independently. If a part is not relevant to the user, the browsers can skip its contents to boost rendering.
Add these CSS to custom CSS/Less:
.PostStream-item,
.PostsUserPage-list > li,
.DiscussionList-discussions > li {
&:not(:hover) {
contain: content;
content-visibility: auto;
contain-intrinsic-height: auto 300px;
}
}
.DiscussionList-discussions > li {
contain-intrinsic-height: auto 300px;
}
.PostStream-item,
.PostsUserPage-list > li,
.DiscussionList-discussions > li {
&:has(.open .dropdown-menu) {
contain: initial;
content-visibility: initial;
contain-intrinsic-height: initial;
}
}
The containment will be applied to discussion list and most (if not all) of posts.
On my Surface Go (no one would argue that it's not so slow right?), I made a simple test on discussion page, measured the performance from loading to fully rendered. And here's the result:
We saved about 0.7s here.
*: Using it without custom themes if possible. Else may cause unexpected effect. You may notice slight layout shifts (about one pixel) while the mouse moves over the contents. Recommend using the latest browsers. The browsers that not fully compatible with the CSS above may not take effect or clip something, such as the dropdown. The optimization may vary on different devices, depending on its performance.
The CSS is separated from Fluent which is currently developing (see DaleZ).
Learn more about CSS Containment here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Using_CSS_containment
