Skip to content

Investigate performance improvements of switching back to Server Side Rendering for the Diffs app

As observed in Improve browser Total Blocking Time (TBT) perfo... (#338359 - closed) rendering merge request diffs on the client is rather costly. We should investigate alternative ways of rendering diffs to improve the performance of the page.

Instead of doing everything on a client with Virtual Scrolling we could offload some of the work to the server. Specifically, offload rendering of the diffs which are the static part of the page. We could add interactivity on top of these statically rendered diffs on the client to improve performance.

In order to introduce minimal delay to the Time To First Byte we could limit the amount of diffs we render initially. Then stream the rest to the page by concurrently fetching the remaining rendered diffs from the server.

We should create a POC to compare the performance benefits of this approach to our current one and compare the SiteSpeed metrics.

To sum up here are the approximate steps we need to take in order to test it:

  1. Create Rails templates that match our current Vue components diffs rendering (only the static part)
  2. Extract interactive parts into independent apps that mount on top of the rendered diffs
  3. Provide an API on backend that serves the rendered diffs
  4. Integrate server rendered diffs with the page (optionally: preserve some space for the client elements, i.e. branch switcher, view selector, etc)
  5. Integrate interactive apps with the rendered diffs
  6. Measure the results with SiteSpeed