Resource placement on the DOM
When you develop a website, it's easy to forget that the placement of elements in the DOM can make a difference to the time it takes to load the content the user views on the site.
Now that we throw all kinds of wonderful scripts into our websites to create mesmerizing animations and make our site responsive, the placement of resources in our DOM is even more relevant.
Yahoo! released a tool (YSlow) a couple of years ago that measured a website's performance, showing what loads and when. With that information, it gave people recommendations to improve the site's performance. One of these recommendations is to put the <script> tags at the bottom of the page just before the closing </body> tag.
Let's now take a look at the following code snippet and understand it:
<head> <!-- Styles --> <link rel="stylesheet" href="css/style.css" type="text/css" /> <!-- Scripts --> <script src...
