Best practices for web design don’t just exist on the user interface. They also exist on the back-end where the code is. Where you place your style sheets and scripts can affect how your site loads.

If you want your site to load faster, place your CSS at the top in the <head> section and JavaScript at the bottom. This allows the browser to load your CSS first, so that users can see the content on your site load. Users won’t find themselves staring at a blank white page.

This works as visual feedback to make users feel like the page has loaded quicker than it really has. All of this happens before executing the JavaScript at the bottom of the page.

If you put your JavaScript at the top of the page and CSS at the bottom, users will have to stare at a blank white page until the JavaScript finishes loading because <script> tags block parallel downloads. This means the visual elements of your site won’t show up until the JavaScript finishes downloading first. When it does finish, users will experience a brief flash of styleless content and a shifting of elements on the screen.

Making users wait to see your site and showing them unformatted content is not a good user experience. Follow this best practice with your code, and your users should have no complaints about the speed of your site.

Toolkits