I'm building up my site over at http://royronalds.com, and I'm trying to figure out what order of elements in the <head>
makes most sense. Just to take from what I currently have, I have:
<head>
<style>
external stylesheet<meta>
<title>
<link>
to favicon<script>
for jQuery<script>
main javascript for site<script>
google analytics, asynchronous script. </head>
Are there reasons to order these differently so that load times and other issues happen more smoothly, and if so, what would the ideal order be?
Modern browsers wait with any sort of rendering until the entire <head>
section is retrieved (including the files linked within it). The order therefore doesn't matter for performance. For Javascript, the order of the files is the order of execution. For stylesheets, the order determines precedence (the rule that was defined last has precedence if all other things are equal).
If you want to optimise client performance, it is strongly advisable to move your Javascript includes to the very end of the <body>
element, instead of putting them in the <head>
at all. There are more considerations, Yahoo's list of optimisations is well worth your time to read through. Google has some good advice as well.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With