docusaurus perf(core): preload stylesheets and defer scripts

This is inspired from Next.js.

Sep 11 '22 01:09 sanjaiyan-dev

[V2]

Name	Link
Latest commit	4e33181db211940ed713b652b6a084482e11f10e
Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/6348139f3b304500094af750
Deploy Preview	https://deploy-preview-8081--docusaurus-2.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Sep 11 '22 02:09 netlify[bot]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 64	🟢 98	🟢 100	🟢 100	🟠 80	Report
/docs/installation	🟠 73	🟢 100	🟢 100	🟢 100	🟢 90	Report

Sep 11 '22 02:09 github-actions[bot]

Done 🙌

Sep 11 '22 04:09 sanjaiyan-dev

Could you explain your changes? I don't see a potential perf difference before and after.

Sep 11 '22 04:09 Josh-Cena

Could you explain your changes? I don't see a potential perf difference before and after.

Hi,

I thought by preloading CSS styles (recommend by Google) for faster loading of critical assets and making JavaScript fetch request before the body tag and make it parallel with HTML parsing would improve performance.

Ref-: https://web.dev/render-blocking-resources

Additional note -: Earlier Next.js also preloaded and then executed the code at end of the body I think after version 11.0.0 they made fetch request top of body using defer attribute which have better browser support than link:preload Even they preload critical asset like CSS using link:preload for better FCP.

Screenshot_2022-09-11-09-37-43-341_com android chrome

Extremely sorry my thought might misleading 🥺

Sep 11 '22 04:09 sanjaiyan-dev

Leaving it to @slorber for a decision...

Sep 11 '22 04:09 Josh-Cena

Browser Support -:

<link rel="preload" /> Screenshot_2022-09-23-12-37-12-744_com.android.chrome.png

<script defer /> Screenshot_2022-09-23-12-36-40-735_com.android.chrome.png

Sep 23 '22 07:09 sanjaiyan-dev

Leaving it to @slorber for a decision...

Regarding preload of stylesheet -: https://web.dev/preload-critical-assets/#preloading-css-files

Sep 27 '22 14:09 sanjaiyan-dev

Please back your changes with more external links. Show me how other frameworks like Next.js, Remix and Gatsby are using defer (or not) for the script hydrating React.

I don't believe these changes improve anything, yet present a little risk

Hi, this is how next js generate html -: Screenshot_2022-09-29-13-06-08-708_com android chrome-01

Sep 29 '22 07:09 sanjaiyan-dev

I want to see the code outputing such html, and the PR that lead to switching from end-of-body scripts to head deferred scripts: this way we can understand their motivations to do this change and understand if we should follow the same path.

Yes, I expect you to do research because otherwise I'll have to do it myself 😅

Sep 29 '22 13:09 slorber

I want to see the code outputing such html, and the PR that lead to switching from end-of-body scripts to head deferred scripts: this way we can understand their motivations to do this change and understand if we should follow the same path.

Yes, I expect you to do research because otherwise I'll have to do it myself 😅

Hi, by default Next js outputs this HTML (create-next-app)

Sep 30 '22 10:09 sanjaiyan-dev

I want to see the code outputing such html, and the PR that lead to switching from end-of-body scripts to head deferred scripts: this way we can understand their motivations to do this change and understand if we should follow the same path.

Yes, I expect you to do research because otherwise I'll have to do it myself 😅

@slorber

Related discussion -: https://github.com/vercel/next.js/discussions/24938

Sep 30 '22 10:09 sanjaiyan-dev

Thanks, that's a good ref ;) will read that later

Sep 30 '22 12:09 slorber

Thanks, that's a good ref ;) will read that later

Ok 💪🙌

Sep 30 '22 18:09 sanjaiyan-dev

Another useful link -: https://web.dev/render-blocking-resources

Oct 01 '22 15:10 sanjaiyan-dev

How I interpret this is that @janicklas-ralph says it's better to use this for critical JS resources:

<html>
  <head>
    <script defer src="./react-app.js" />
  </head>
  <body>
    <div id="react-app" />
  </body>
</html>

Instead of:

<html>
  <head>
    <link rel="preload" href="./react-app.js" />
  </head>
  <body>
    <div id="react-app" />
    <script async src="./react-app.js" />
  </body>
</html>

That makes sense to me, so I'll merge this change without backporting it so that we can see if any issue happens on our own website. It will be in 3.0 if proven successful.

Now you also suggested to do:

<head>
+ <link rel="preload" href="/assets/css/docusaurus.f54f9970.css" as="style">
  <thingsInBetween/>
  <link rel="stylesheet" href="/assets/css/docusaurus.f54f9970.css">
</head>

That doesn't seem useful to me: the critical CSS is already loaded quite eagerly in the header and discovered by browsers relatively early. I doubt <thingsInBetween> will lead to any significant delay in the loading of this blocking/critical CSS file.

I'll revert this preload change for now but we'll see later how to optimize CSS loading, because this critical CSS file is too large in the first place

Oct 13 '22 13:10 slorber

The change looks good to me, however, I'm not sure why Chrome devtools report the loading priority as "low" instead of "high" (it was "high" previously)

Is this expected @janicklas-ralph ?

Even the Next.js site loads all scripts as low priority 🤷‍♂️

CleanShot 2022-10-13 at 15 59 45@2x

Oct 13 '22 14:10 slorber

The change looks good to me, however, I'm not sure why Chrome devtools report the loading priority as "low" instead of "high" (it was "high" previously)

Is this expected @janicklas-ralph ?

Even the Next.js site loads all scripts as low priority 🤷‍♂️

Hi, What about using fetchpriority="high" prop to priotize the first party scripts ? https://web.dev/priority-hints/

Sorry if I am wrong

Oct 14 '22 13:10 sanjaiyan-dev

perf(core): preload stylesheets and defer scripts

✅ [V2]

⚡️ Lighthouse report for the deploy preview of this PR

[V2]