Home > CSS > Why You Should Place Style Sheets Before Scripts

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
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: