Best place to put the javascript and external stylesheet references

It has been observed that developers generally put every other external content in head section whereas it can be comparatively slower if not put in appropriate section

Put all stylesheet references in <head> section since they are responsible for appearance and all the javascript files after </body> since they are supposed to be functional after all the controls are loaded

Stylesheets should be referenced as

[code language=”html”]
<link rel=’stylesheet’ href=’bootstrap.min.css’ type=’text/css’ />

Javascript should be referenced as

[code language=”html”]
<!– Body content –>
<script type="text/javascript" href="jquery.js"></script>

Why : Since everything gets downloaded synchronously on webpage, so whatever comes first would be downloaded first. If the scripts files are heavy then the page content would not be available until the external content is loaded.

Expectation : The website content should be made available to the user as soon as possible. Since the user might not be interested in performing any action

How to make external content asynchronously?

Result : Website This can only be observed on slow network connection between server and the client browser since intranet sites generally do not observe network latency for the usual page size including script which can be typically upto 1-2 MB(s).

Conclusions : Best place to put CSS is head section and for Javascript it is after body section

Leave a Reply

Your email address will not be published. Required fields are marked *