Style sheets before scripts

Style sheets before scripts
20 May 2011 | | Creative Design

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 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 your CSS 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.

More posts from our team


Previous Post:
Next Post:

Back to all news

Reviews2023
Five Star
Reviewed Marketing
5 gold stars
google review logofacebook review with 5 stars
"Excellent service from James at Dental Design, thank you very much for your prompt attention whenever I get in touch! Would definitely recommend to a friend" Alison Tarmey View Full Testimonial
Google reviews logo "Would definitely recommend to a friend"
5 gold stars
"As a dental practice manager I cannot recommend Dental Design highly enough. They are just brilliant at what they do. Lucy and her colleagues are just an email or a phone call away...." Emma Smith View Full Testimonial
Google reviews logo "I cannot recommend Dental Design highly enough"
5 gold stars
"Really great company to deal with. They always respond quickly and are truly reliable. I would 100% recommend, the staff are so friendly and helpful." Michelle Molloy View Full Testimonial
Google reviews logo "Really great company to deal with"
5 gold stars
"I got increased traffic and new patients applying to my surgery, once Dental Design upgraded my website. They are very professional, efficient & adaptive to new situations..." Joanna Gallop View Full Testimonial
Google reviews logo "Very professional, efficient & adaptive to new situations"
5 gold stars
"Lucy has been a star, responding to and acting upon our requests in a prompt, efficient and professional manner, as well as the rest of the Dental Design team..." Abhay Shah View Full Testimonial
Google reviews logo "I cannot recommend them highly enough"
5 gold stars
"...Since the website has been up and running Lucy Mander has been our point of contact. She has been invaluable and gone out of her way to help us, especially during COVID-19 lockdown... " Lucy Jones View Full Testimonial
Google reviews logo "Has been invaluable and gone out of her way to help us"
5 gold stars
"Thank you for all your help and support, and the provision of valuable learning aids for our patients and staff alike in these difficult times. We love the look of our practice website. Very professional!" Sandra Luck View Full Testimonial
Google reviews logo "We love the look of our practice website. Very professional!"
5 gold stars
"Dental Design stood out both in their knowledge of the industry and their professionalism and can-do attitude. All of their staff are exceptionally competent and knowledgeable..." Harvey Rook View Full Testimonial
Google reviews logo "Dental Design stood out both in their knowledge of the industry and their professionalism"
5 gold stars
"Having done extensive research into all the dental website companies, the team and package offered at dental design was unrivalled..." Neil Shah View Full Testimonial
Google reviews logo "The team and package offered at dental design was unrivalled"
5 gold stars
"The team at dental design (especially Rosie) are absolutely fantastic and are always on hand to help. They are professional, friendly and extremely efficient. Rosie always gets back..." KiKi Wilmot View Full Testimonial
Google reviews logo "absolutely fantastic and are always on hand to help"
5 gold stars
"Dental Design are fantastic to work with, our website is amazing and the support they provide is second to none. Our account manager Rosie L is a fabulous point..." Luke Lucas View Full Testimonial
Google reviews logo "Dental Design are fantastic to work with"
5 gold stars
"Having worked with the Dental Design team for the last six months, I've found them not only helpful, but friendly and approachable too. I bombard Marcus with regular..." Sophie Harper View Full Testimonial
Google reviews logo "always met with a swift and professional response"
5 gold stars
desk with branded documents