Archive for August, 2011

Why You Should Place Style Sheets Before Scripts

Best prac­tices for web design don’t just exist on the user inter­face. They also exist on the back-end where the code is. Where you place your style sheets and scripts in your doc­u­ment can affect the speed of your website.

If you want your web­site to load faster, place your CSS at the top in the <head> sec­tion and JavaScript at the bot­tom. This allows the browser to load your CSS first, so that users can see your site load vis­i­bly. Users won’t find them­selves star­ing at a blank white page. Impor­tant visual ele­ments, such as the logo, header and nav­i­ga­tion, will pro­gres­sively show up. This works as a form of visual feed­back to let users know they’re on the right page and that the page is load­ing. All of this hap­pens before exe­cut­ing the JavaScript at the bot­tom of the page. Thus, it gives users the impres­sion that your site has fin­ished load­ing before it actu­ally has.

If you put your JavaScript at the top of the page and CSS at the bot­tom, users will have to stare at a blank white page until the JavaScript fin­ishes load­ing because <script> tags block par­al­lel down­loads. This means yourCSS won’t load and the visual ele­ments of your site won’t show up until the JavaScript fin­ishes down­load­ing first. When it does fin­ish, users will expe­ri­ence a flash of unstyled con­tent and a shift­ing of ele­ments on the screen.

Mak­ing users wait to see your site and show­ing them incor­rectly for­mat­ted con­tent is not a good user expe­ri­ence. Fol­low this best prac­tice with your code, and your users should have no com­plaints about the speed of your website.

Source : UX Movement

Categories: CSS