Docusaurus: Async load of scripts or placed in footer

[muuvmuuv]

🚀 Feature

I have noticed that all scripts are placed in the header, what is causing a huge page loading time. It is better to use the new async attribute or place them in the footer. So the page can load and render while scripts are passed asynchronously.

Have you read the Contributing Guidelines on issues?

yes

Motivation

Faster render

Pitch

The page will come up way faster and it prevents script failures because no content is available.

[wmhilton]

I found a hack to work around this for now! But it makes SUCH a HUGE difference in page load time it really should be built in to encourage best practices.

My Chrome Lighthouse audit (simulated Fast 3G) Time to First Contentful Paint when from greater than 10 seconds to less than 2 seconds. (I have a lot of JavaScript........)

The Footer is already customizable, so you can add a loop to insert scripts from the config file at the end of the footer:

// website/core/Footer.js
...
      <footer className='nav-footer' id='footer'>
...
        {/* External scripts */}
        {this.props.config.footerscripts &&
          this.props.config.footerscripts.map(function(source, idx) {
            return (
              <script
                type="text/javascript"
                key={'script' + idx}
                src={source}
              />
            );
          })}

      </footer>

Then in your siteConfig.js split you scripts into scripts (which will stay in the head) and footerscripts which will be inserted in the Footer:

// siteConfig.js
...
  highlight: {
    // Highlight.js theme to use for syntax highlighting in code blocks
    theme: 'default'
  },
  scripts: [
    '/js/announcement.js',
  ],
  footerscripts: [
    '/js/gitter.js',
    '/js/sidecar.v1.js',
    '/js/browserfs.js',
    'https://unpkg.com/isomorphic-git',
    'https://unpkg.com/[email protected]/dist/openpgp.js',
    '/js/pify.js',
    '/js/fs.js',
    'https://unpkg.com/@webcomponents/shadydom',
    '/js/object-inspector.min.js',
    '/js/tutorial.js',
    '/js/try-it-out-giturl.js',
    '//static.getclicky.com/js',
    '/js/analytics.js',
    'https://codefund.io/scripts/aa6eb5e6-191a-4a38-8109-63fdd08d0e58/embed.js',
  ],
  repoUrl: 'https://github.com/isomorphic-git/isomorphic-git',
  algolia: {
...

[muuvmuuv]

@wmhilton great workaround for now!

_{Sent with GitHawk}

[endiliey]

It's not really a hack. It's a solution. We are going to probably ending up with similar solution if we were to implement it upstream.

Closing this up because we're getting closer to v2 anyway and don't want to bloat siteConfig up