Reduce rendering on blame page
What does this MR do?
Currently, a lot of time is spent on rendering the blame page with many commits.
This reduces the number of paints on the blame page by making use of the content-visibility: auto CSS property.
This fix should in turn reduce the TBT of the blame page by only rendering what is visible to the user.
Limitations
Browser support for content-visibility:
| Browser | Supported | Notes |
|---|---|---|
| Chrome 85+ | ||
| Edge 85+ | ||
| Opera 71+ | ||
| Firefox | Issue | |
| IE | ||
| Safari |
Results
Average TBT after 3 runs:
- TBT (Avg) =
3393ms
Note: this was tested by overriding the styles on staging to get as close as possible to the actual test environment.
Page used for testing: Blame page (staging)
before (rendering = 10731ms, TBT (Avg) = 12466ms) |
after (rendering = 3457ms, TBT (Avg) = 3393ms) |
|---|---|
 |
 |
Run 1 TBT: 11288ms
|
Run 1 TBT: 3011ms
|
Run 2 TBT: 12069ms
|
Run 2 TBT: 4720ms
|
Run 3 TBT: 14041ms
|
Run 3 TBT: 2449ms
|
UX Impact
Since we're only rendering the entries that are visible to the user, the browser needs to render entries as the user scrolls, this could cause invisible entries for a very brief moment if a user scrolls fast enough as the browser catches up.:
Does this MR meet the acceptance criteria?
Conformity
-
I have included changelog trailers, or none are needed. (Does this MR need a changelog?) -
I have added/updated documentation, or it's not needed. (Is documentation required?) -
I have properly separated EE content from FOSS, or this MR is FOSS only. (Where should EE code go?) -
I have added information for database reviewers in the MR description, or it's not needed. (Does this MR have database related changes?) -
I have self-reviewed this MR per code review guidelines. -
This MR does not harm performance, or I have asked a reviewer to help assess the performance impact. (Merge request performance guidelines) -
I have followed the style guides. -
This change is backwards compatible across updates, or this does not apply.
Availability and Testing
-
I have added/updated tests following the Testing Guide, or it's not needed. (Consider all test levels. See the Test Planning Process.) -
I have tested this MR in all supported browsers, or it's not needed. -
I have informed the Infrastructure department of a default or new setting change per definition of done, or it's not needed.
Related to #331445 (closed)