Faster Table of Contents for Confluence Cloud!
A few months ago, the Confluence Cloud Performance team announced how Server Side Rendering was the big first step. Since then, we’ve been working on multiple projects that expand SSR, and today we’re announcing our first big improvement has rolled to all customers: Table of Contents macro.
What was the old version?
Table of Contents (TOC) was slow and the macro would “eventually” be painted on the page. It was using older code that depended on multiple network calls and asynchronous rendering. The way it was built, it actually couldn’t start rendering until all the headings on the page were rendered.
What is the new version?
The new version of Table of contents is fast! We built the macro using information directly from the ADF (Atlassian Document Format). This allows for synchronous (ie. no waiting) rendering of the page. In other words, this is a huge UX improvement as the Table of Contents will now appear on the page immediately along with other SSR delivered content!
The benefits can be seen in this example video, with old on the left and new on the right.
|
Macro |
Increase in macro speed |
|
New TOC |
1.7x |
Issues with the old version
From a user perspective, the old version of TOC had two main issues: it was too slow and it made page content on the page shift (measured with Cumulative Layout Shift).
From an engineering perspective, the implementation of the old TOC had a few flaws. Our previous implementation relied on jQuery to traverse through the DOM (Document Object Model) for potential matches. Then, again using jQuery, the rendered results were injected into the DOM. In testing, we found that it was impossible to consistently inject the same results - in certain situations, the TOC would render unpredictably on each page load.
Changes
After numerous architectural discussions with team leads, it became clear that using ADF to build the server side rendered Table of contents was the only way to eliminate flakiness and CLS.
This is a fundamental change in the way Table of Contents is rendered, all the way from the source data to rendering method. But for almost all cases, it will look and behave exactly the same. There are a few very corner cases of TOC which might now appear different from before, but from our testing they are very rare, and some are now “Working Properly” instead of the old one which could have been considered buggy. In any case, if the behavior is different and a problem, please contact us!
What’s next?
We’re actively working to improve the performance of many additional macros in the next quarter. We started with TOC as it was the most common, and will continue to work on improving other popular macros. We’re always looking for user feedback, the more specific the better. Let us know what you think of this change!
Was this helpful?
Thanks!
Karl Wong
3 comments