Book Image

Responsive Design High Performance

By : Dewald C Els, Dewald Els
Book Image

Responsive Design High Performance

By: Dewald C Els, Dewald Els

Overview of this book

Table of Contents (16 chapters)
Responsive Design High Performance
About the Author
About the Reviewers
Speeding Up Development with Design Concepts, Patterns, and Programs

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:

<!-- Styles -->
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!-- Scripts -->
<script src="//