perf(ui): defer off-screen layout/paint on entry and feed list rows#4384
Open
jvoisin wants to merge 1 commit into
Open
perf(ui): defer off-screen layout/paint on entry and feed list rows#4384jvoisin wants to merge 1 commit into
jvoisin wants to merge 1 commit into
Conversation
fguillot
reviewed
Jun 3, 2026
Miniflux' default user.EntriesPerPage value is 100, so people with a lot of feeds/feed items might have 100 items displayed by default, which is a ton of DOM elements: multiple inline SVG icons, two <button>, optional <time>, optional reading-time chip, category tag, … the browser had to lay out and paint all of it on initial render even though there are only a handful of rows visible at once. Setting content-visibility: auto on .entry-item and .feed-item lets the browser skip layout, paint, and accessibility-tree work for rows that fall outside the viewport, doing it lazily as the user scrolls. contain-intrinsic-size: auto reserves a placeholder using each row's last rendered size so the scrollbar and anchor scrolling stay consistent after first measurement. The value 100px was picked as on my machine/screen/…, a feed-item is a bit less than 100px, and an entry-item is a bit more than 80px. This doesn't introduced any regressions in keyboard shortcuts, both from miniflux and from the browser. The two CSS properties are supported in current modern browsers, and are simply ignored in those that don't. Sources used: - https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility - https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/contain-intrinsic-size
jvoisin
force-pushed
the
content-visibility
branch
from
bd1ea46 to
50ee813
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Miniflux' default user.EntriesPerPage value is 100, so people with a lot of feeds/feed items might have 100 items displayed by default, which is a ton of DOM elements: multiple inline SVG icons, two , optional , optional reading-time chip, category tag, … the browser had to lay out and paint all of it on initial render even though there are only a handful of rows visible at once.
Setting content-visibility: auto on .entry-item and .feed-item lets the browser skip layout, paint, and accessibility-tree work for rows that fall outside the viewport, doing it lazily as the user scrolls. contain-intrinsic-size: auto reserves a placeholder using each row's last rendered size so the scrollbar and anchor scrolling stay consistent after first measurement.
This doesn't introduced any regressions in keyboard shortcuts, both from miniflux and from the browser. The two CSS properties are supported in current modern browsers, and are simply ignored in those that don't.
Sources used: