3 ms·

> What if we move the scripts to source/_includes/custom/after_footer.html? Please don't do this, this is the slowest possible way to load these resources and

> What if we move the scripts to source/_includes/custom/after_footer.html? Please don't do this, this is the slowest possible way to load these resources and the longest duration possible until a fully interactive page. Use "async" or "defer" attributes instead.

lelandfe 4y ago
Footnote: if the scripts are not necessary for interaction, moving them to the footer and marking them deferred/async allows you to prevent the browser preloader[0] from being too eager with downloading them during downtime. This is effectively a poor man's resource priority hints[1], allowing the developer the ability to prioritize downloads for the browser. [0] https://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/ https://andydavies.me/blog/2013/10/22/how-the-browser-pre-lo... [1] https://wicg.github.io/priority-hints/ https://wicg.github.io/priority-hints/
- masswerk 4y ago
  Yes, the end of the document + `async` is probably still the way to go for analytics scripts and similar things. (`defer` will still block the initial render.)
  - lelandfe 4y ago
    Other way round. Neither blocks parsing/render during downloads, but async scripts execute immediately onLoad – blocking render. defer "defers" that until after document parsing is finished. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#async_and_defer https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Fi...
swyx 4y ago
well yes but also did those attributes exist in 2014? (genuine question, i dont know)
- deleted 4y ago
  [deleted]
- masswerk 4y ago
  I guess, it was. MDN [1] lists `async` for Firefox 1 and Chrome 1, `defer` for Firefox 3.5. [1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sc... In favor of the article, it has to mentioned that putting any script tags at the very end of documents was apparently taught in bootcamps, could be found in numerous tutorials, and was generally acknowledged. (There were even quite authoritative feelings about this. A few years ago you could have been downvoted for a comment like this. At least, I was.)

lelandfe 4y ago

Footnote: if the scripts are not necessary for interaction, moving them to the footer and marking them deferred/async allows you to prevent the browser preloader[0] from being too eager with downloading them during downtime. This is effectively a poor man's resource priority hints[1], allowing the developer the ability to prioritize downloads for the browser. [0] https://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/ https://andydavies.me/blog/2013/10/22/how-the-browser-pre-lo... [1] https://wicg.github.io/priority-hints/ https://wicg.github.io/priority-hints/

masswerk 4y ago
Yes, the end of the document + `async` is probably still the way to go for analytics scripts and similar things. (`defer` will still block the initial render.)
- lelandfe 4y ago
  Other way round. Neither blocks parsing/render during downloads, but async scripts execute immediately onLoad – blocking render. defer "defers" that until after document parsing is finished. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#async_and_defer https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Fi...

swyx 4y ago

well yes but also did those attributes exist in 2014? (genuine question, i dont know)

deleted 4y ago
[deleted]
masswerk 4y ago
I guess, it was. MDN [1] lists `async` for Firefox 1 and Chrome 1, `defer` for Firefox 3.5. [1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sc... In favor of the article, it has to mentioned that putting any script tags at the very end of documents was apparently taught in bootcamps, could be found in numerous tutorials, and was generally acknowledged. (There were even quite authoritative feelings about this. A few years ago you could have been downvoted for a comment like this. At least, I was.)