Bear in mind that the load time is a very important aspect on web development. The goal is to make the page load as quickly as possible for the user.
It's known that a script without defer or async blocks the browser from parsing the rest of the page until the file has been downloaded and run. Slower pages cost you users, so you want your scripts to load without holding up the content.
The modern approach is to keep your scripts in the <head> and add the defer attribute. Deferred scripts download in parallel while the page is parsed, then run in order once the HTML is ready.
<head>...<script src="file.js" defer></script></head>
✅ Figure: Good example - defer lets the script load without blocking the page
Use async instead of defer for independent scripts (such as analytics) that don't depend on the DOM or on each other.
If you can't use defer or async, the legacy fallback is to place your scripts at the bottom of the HTML, just before the closing </body> tag, so they load after the page content.