Let’s go directly to the point!
The location where you put the CSS files and .JS files matters a lot.
The ideal order in the mark <head> is:
- In line CSS <style>code</style>
- CSS Files - <style with src="file.css" />
- JS Files - <script with src="js.css" />
- JS Code <script>code</script>
The CSS is the makeup of HTML, to build the interface in CSS it must be compact, not redundant and fast to load. Consider using CDN (Content Delivery Network), the CDN will compact your .css, .js and optionally the .html files.
If your external JavaScript does not change the UI elements you can add the defer option, like this,
<script src="Code.js" defer></script>
For xHTML the syntax is,
<script src="Code.js" defer="defer"></script>
Script tag has two properties to help your page load smoothly.
async and defer
Defer is different from async and has a different impact on your page.
Async downloads your java file, stops the renderization, and continues the rendering of the HTML file.
Defer runs after the page event OnLoad() has been completed.
ALERT - Don’t use defer if your code changes UI.
So your page loads quickly for the end user and after that, the commands for the page are executed.
You can find a full explanation of this concept here,
https://bitsofco.de/async-vs-defer/
Or here,
https://flaviocopes.com/javascript-async-defer/
I hope this post helps you make a web site more quickly.