Load javascripts early, but defer execution

This moves our scripts in the head section, but use "defer" loading to allow the
browser to start loading them as soon as possible. Actual execution of deferred
scripts happens once the HTML is fully parsed.
see https://flaviocopes.com/javascript-async-defer/#with-defer-in-the-head

Signed-off-by: Sebastiaan van Stijn <github@gone.nl>
This commit is contained in:
Sebastiaan van Stijn 2020-10-16 18:38:41 +02:00
parent 16ea1a8c31
commit 402a8eb47d
No known key found for this signature in database
GPG Key ID: 76698F39D527CE8C
3 changed files with 21 additions and 10 deletions

View File

@ -468,10 +468,6 @@
<footer class="footer">
{% include footer.html %}
</footer>
<script src="/js/theme-switcher.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script defer src="/js/search.js"></script>
<script>
window.onChangeHelpTab = function (name) {

View File

@ -73,11 +73,5 @@
{% include footer.html %}
</footer>
<script>const pageURL = "{{ page.url }}";</script>
<script src="/js/theme-switcher.js"></script>
<script defer src="/js/anchorlinks.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script defer src="/js/docs.js"></script>
<script defer src="/js/search.js"></script>
{%- include analytics/polldaddy.html -%}
</body>

View File

@ -44,6 +44,27 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{%- comment -%}
We put these scripts in the head section, but use "defer" loading to allow the
browser to start loading them as soon as possible. Actual execution of deferred
scripts happens once the HTML is fully parsed.
see https://flaviocopes.com/javascript-async-defer/#with-defer-in-the-head
{%- endcomment -%}
{%- if page.landing == true -%}
<!-- landing page scripts -->
<script defer src="/js/theme-switcher.js"></script>
<script defer src="/js/jquery.js"></script>
<script defer src="/js/bootstrap.min.js"></script>
<script defer src="/js/search.js"></script>
{%- else -%}
<script defer src="/js/theme-switcher.js"></script>
<script defer src="/js/anchorlinks.js"></script>
<script defer src="/js/jquery.js"></script>
<script defer src="/js/bootstrap.min.js"></script>
<script defer src="/js/docs.js"></script>
<script defer src="/js/search.js"></script>
{%- endif -%}
{%- comment -%}
preload fonts: https://www.freecodecamp.org/news/web-fonts-in-2018-f191a48367e8/
we only preload the "woff2" variants, as older formats (woff, eot) are only used