Style sheets before scripts
In our ongoing efforts to make webpages load as fast as possible it’s important that we don’t just look at file sizes and aesthetics but also the order in which pages load in a browser. For example, would you rather your page stayed blank while all the content is loading, or would you rather it was loaded in stages? (logo first, then page content, followed by any animation or slideshows?)
The important thing to remember is that while a page that loads in stages isn’t ideal, it at least shows the person visiting your website that something is actually happening. The danger with a site that waits for all its content to load before displaying it is that a large script could take 4-5 seconds to show on your page. Is the visitor going to wait for that? Will they think the page is broken and give up?
The following is a simple extract from an article written by UXMovement.com about how to easily speed up the loading times of your sites pages:
If you want your website 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 your site load visibly. Users won’t find themselves staring at a blank white page. Important visual elements, such as the logo, header and navigation, will progressively show up. This works as a form of visual feedback to let users know they’re on the right page and that the page is loading. All of this happens before executing the JavaScript at the bottom of the page. Thus, it gives users the impression that your site has finished loading before it actually has.
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 your CSS won’t load and the visual elements of your site won’t show up until the JavaScript finishes downloading first. When it does finish, users will experience a flash of unstyled content and a shifting of elements on the screen.
Making users wait to see your site and showing them incorrectly formatted 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 website.
More posts from our team
Five Star
Reviewed Marketing
"Would definitely recommend to a friend"
"I cannot recommend Dental Design highly enough"
"Really great company to deal with"
"Very professional, efficient & adaptive to new situations"
"I cannot recommend them highly enough"
"Has been invaluable and gone out of her way to help us"
"We love the look of our practice website. Very professional!"
"Dental Design stood out both in their knowledge of the industry and their professionalism"
"The team and package offered at dental design was unrivalled"
"absolutely fantastic and are always on hand to help"
"Dental Design are fantastic to work with"
"always met with a swift and professional response"
