Defer scripts in page template

[LamJiuFong]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• DevOps
• Improve developer experience
• Others, please explain:
  Improve performance
  Fixes Load non critical resources last #1670

Overview of changes:
Add defer attribute to the <script>s in page template

Anything you'd like to highlight/discuss:
defer vs moving the script tags to the bottom:
The effect of the defer attribute is similar to placing a conventional <script> reference at the bottom of the HTML before the closing tag, however the advantage of defer is that <script>s can be placed in the to be discovered and start loading sooner than resources found lower on the page.

defer vs async:
async executes the scripts once they have been fully loaded. It interrupts the rendering process and might cause some layout shifts
defer executes after all content has been rendered.

Testing instructions:
Follow the instructions here: #1687
Things to add on:
Instead of testing on the landing page, we can test on "larger" pages (eg. UG, DG), the difference is more significant when testing on larger pages.
The PR above only tests the effect of moving the scripts to the bottom
On top of that, we can test the effect of defer ( as shown in this pr )
We can also test the effect of async - Simply change defer to async

Expected results:
For all three cases, the time taken for the content to be loaded are around the same
However, async will cause some layout shifts when loading. (try with UserGuide/GettingStarted)

Would be very grateful if anyone could help test on his/her laptop

Proposed commit message: (wrap lines at 72 characters)
Add defer attribute to scripts in page template

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

---

Reviewer checklist:

Indicate the SEMVER impact of the PR:

• Major (when you make incompatible API changes)
• Minor (when you add functionality in a backward compatible manner)
• Patch (when you make backward compatible bug fixes)

At the end of the review, please label the PR with the appropriate label: r.Major, r.Minor, r.Patch.

Breaking change release note preparation (if applicable):

• To be included in the release note for any feature that is made obsolete/breaking

Give a brief explanation note about:

• what was the old feature that was made obsolete
• any replacement feature (if any), and
• how the author should modify his website to migrate from the old feature to the replacement feature (if possible).

[yucheng11122017]

Tested on google chrome on windows 10
Time needed with defer: Finish: 56.37 s
Time needed without defer: Finish: 1.4 min

💯💯

[kaixin-hc]

do mark this as not draft and draft a PR message. you can also test async, but it seems theoretically it will be worse than defer due to potential layout shifts

my tests on mac firefox show smaller differences, but overall looks positive

No change (regular 2G):
~Finish: 1.28.5 min
~DOMContentLoaded: 1.05 min
~load: 1.27

With change (regular 2G):
~Finish: 1.21 min
~DOMContentLoaded: 59.92 s
~load: 1.22

Without change (regular 3G)
~Finish: 25.45 s
~DOMContentLoaded: 20.52 s
~load: 25.46s

With change (regular) 3G
~Finish: 25.51 s
~DOMContentLoaded: 19.36 s
~load: 23. s

[LamJiuFong]

Thanks for the reviews @yucheng11122017 @kaixin-hc !

Expected results: For all three cases, the time taken for the content to be loaded are around the same However, async will cause some layout shifts when loading. (try with UserGuide/GettingStarted)

Yup, I have tried using async as stated here ^ It caused some layout shifts when loading

[yucheng11122017]

LGTM! Thank you for the work @LamJiuFong

[github-actions]

@kaixin-hc Each PR must have a SEMVER impact label, please remember to label the PR properly.