Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Not as a blanket rule. For an external classic JavaScript file that needs the page’s DOM, a strong default is to keep it in the <head> and add defer. The browser can then parse the HTML while the file downloads, and run the script after parsing. Putting a script just before </body> is also valid, but its location alone does not guarantee faster loading or better SEO.
Why script placement matters
An ordinary external classic script in the head, without async or defer, can pause HTML parsing while the browser fetches and executes it. That means the browser may not continue building the page until the script is ready.
With defer, an external classic script downloads while parsing continues, then runs after the document has been parsed. Deferred classic scripts run in the order they appear in the HTML, which makes this option suitable for application code that depends on another script loaded earlier. MDN’s script-element reference documents this behavior.
Choose the loading behavior your code needs
| Script type or placement | What happens | When it fits |
|---|---|---|
| Classic external script in the head, no attribute | May block HTML parsing while it downloads and executes. | Use only when that blocking behavior is intentional. |
Classic external script with defer |
Downloads without pausing parsing; executes after parsing, in document order relative to other deferred classic scripts. | Often a good choice for DOM-dependent code or ordered application scripts. |
Classic external script with async |
Executes as soon as it is available; order relative to other scripts is not guaranteed. | For scripts that are independent and do not rely on execution order. |
Classic script immediately before </body> |
Markup before the script has been parsed when the script runs, unless other behavior changes the timing. | A valid placement choice when the code should run after preceding markup is parsed. |
Inline classic script with defer |
defer has no effect without a src attribute. |
Do not rely on defer to postpone inline code. |
| Module script | Modules are deferred by default; adding async changes their execution timing. |
Use module loading semantics when the code is authored as a JavaScript module. |
See MDN’s script-element reference for the attributes and their behavior.
#1 Best Overall
When should you use async?
Use async only when the script can run independently of other scripts and page code. Because it runs as soon as it becomes available, it may execute before or after another script regardless of their order in the document. It is therefore not a substitute for defer when one script depends on another. MDN’s async-script documentation explains the timing distinction.
What about a JavaScript image slider in the header?
The slider’s position on the page does not, by itself, require its JavaScript to be placed in the head. Decide based on what the code needs:
Rank #2
- If the slider script must find elements in the parsed HTML, an external script with
deferis a straightforward choice. - If it depends on a library or another script, preserve the required order; deferred classic scripts keep their document order, while async scripts do not.
- If the slider is part of the visible content users need immediately, assess its real loading and rendering behavior on the page rather than assuming that moving the JavaScript changes when its images appear.
A header slider may warrant performance attention because it is visible early, but that alone does not establish which placement is fastest for a particular implementation. Measure the page and examine the actual bottleneck.
Account for DOMContentLoaded
The DOMContentLoaded event waits for deferred and module scripts to download and execute. An async script or a script inserted dynamically may execute after that event has already fired. If code relies on the event, account for this timing rather than assuming every script runs beforehand. MDN’s DOMContentLoaded reference describes what the event waits for.
Does putting JavaScript before the footer improve SEO or speed?
Moving JavaScript to the end of the body is not, by itself, proof of a speed improvement or an SEO advantage. It can ensure that preceding markup has been parsed before the script executes, but the result for a page depends on its code, dependencies, and loading behavior. The 2012 SitePoint discussion that prompted this question contains conflicting opinions, not controlled measurements establishing a present-day rule. Read the original SitePoint discussion.
For a page you maintain, compare its actual behavior with the script placed at the body end and with an appropriate loading attribute. Avoid treating either position as a universal optimization.
Quick Recap
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
