perf(v2): lazy sidebar categories / collapsibles, reduce html output / build times

[slorber]

Motivation

Allowing collapsibles (ie sidebar categories) to be "lazy" can reduce significantly the HTML markup.

Fix #4753

Many sites have very large sidebars and the sidebar markup is responsible for a huge part of the HTML content + build time.

We should avoid rendering collapsed items on the server, and delay rendering until the first expansion.

Note: this can have an SEO impact, as crawlers won't see the whole sidebar anymore, but I believe it's fine because crawlers can still navigate the site through direct sidebar siblings and the next/previous buttons. I also believe crawlers would understand better that certain pages are related together and form "semantic cocoons" because only sidebar siblings/ancestors are rendered now.

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

preview

Related PRs

(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)

[netlify]

✔️ [V2]

🔨 Explore the source changes: d94cea5

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/60eeedef61ab790008082531

😎 Browse the preview: https://deploy-preview-5136--docusaurus-2.netlify.app

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟢 Performance	96
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

Lighthouse ran on https://deploy-preview-5136--docusaurus-2.netlify.app/

[github-actions]

Size Change: -123 kB (-13%) 👏

Total Size: 850 kB

Filename	Size	Change
website/build/assets/js/main.********.js	459 kB	+952 B (0%)
website/build/docs-tests/index.html	20.5 kB	-111 kB (-84%)	🏆
website/build/docs-tests/standalone/index.html	19 kB	-94 B (0%)
website/build/docs/index.html	40.2 kB	-6.23 kB (-13%)	👏
website/build/docs/installation/index.html	47.8 kB	-5.88 kB (-11%)	👏

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/globalData.json	58.8 kB
website/build/assets/css/styles.********.css	89 kB
website/build/blog/2017/12/14/introducing-docusaurus/index.html	62.3 kB
website/build/blog/index.html	26.3 kB
website/build/index.html	27.3 kB

_{compressed-size-action}

[slorber]

This can have huge impact on sites with very large sidebars, and a good impact on smaller sites too!

Note some very large sites already use a trick to avoid rendering the sidebar on SSR and can save up to 12min build time!: demisto/content-docs#616 (comment)

function DocSidebarBrowser(props) {
  return (
    <BrowserOnly
      fallback={<div>Sidebar...</div>}>
      {() => {
        // Something that should be excluded during build process prerendering.
        return <DocSidebar {...props} />
      }}
    </BrowserOnly>
  );
}

I think current PR is a good compromise to avoid delaying the visibility of the sidebar and keep acceptable perfs. Obviously it will remain faster to simply not render the sidebar on the server.

[slorber]

@jdevalk may I ask you what you think about the potential SEO impacts of server-rendering only a subset of the full sidebar?

[jdevalk]

The risk is that search engines won't follow the links in the parts of the sidebar that aren't rendered immediately. So pages deeper are more clicks away from the main page. Whether that's a problem depends on how many links point to that documentation, but I've seen some docusaurus sites that have such hideously long menu's that that's not ideal either. So in all, especially as it'll make pages faster, I think this is a smart change to make.

[slorber]

Thanks 😜 let's use this by default then and maybe we'll add a config option later if it's requested. Note later we'll make category index pages/doc so crawlers will be able to more easily navigate down the tree Le ven. 9 juil. 2021 à 19:44, Joost de Valk ***@***.***> a écrit :

…

The risk is that search engines won't follow the links in the parts of the sidebar that aren't rendered immediately. So pages deeper are more clicks away from the main page. Whether that's a problem depends on how many links point to that documentation, but I've seen some docusaurus sites that have such hideously long menu's that that's not ideal either. So in all, especially as it'll make pages faster, I think this is a smart change to make. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#5136 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFW6PVYYG5N4XZ37RCSGYDTW4YODANCNFSM5ADDA42Q> .

[slorber]

👍 this seems to work fine!