10 Quick Tips to Make CSS Load Faster

By Posted 2013 Updated   BloggingTutorials

How can you make your CSS files load faster and quickly. Cascading stylesheets are an important component of your site design and it is essential your CSS files download fast and showcase your superb design element before other site components load. But as we continue to redesign websites, CSS bloat and poor CSS practices makes us forget the  importance of quick CSS delivery to visitors and need to increase site speed.

Faster CSS Download

fast cssSo here some quick tips to make your CSS load faster.

  1. External stylesheets – Always avoid inline CSS in the html code to style individual elements, because it loads with each page load. Whereas external stylesheets get cached by browsers and do not need to reload everytime a visitor continues to browse your site. Call style.css in HEAD tags of your html like this
    <link rel="stylesheet" href="http://domain.com/style.css" type="text/css" />
  2. Single CSS file – Lesser the number of CSS requests the better. Always choose to load a single CSS file only on each page.
  3. First Item to Load – Insert CSS as the first line in code after HEAD tags in your html. This ensures your CSS starts loading the moment the page loading starts.
  4. Small CSS files – the smaller the CSS file, the faster it will load and give design to your site. Use design elements only when needed. CSS3 allows you to add lots of fancy stuff like transitions, gradients etc. – but do you really need to style every element.
  5. Efficient CSS selectors – Learn CSS which enables you to join CSS codes into much smaller lines. For example
    margin-top: 0px; margin-bottom: 0px; margin-left: 2px; margin-right:2px;
    can be written as
    margin: 0 2px;
  6. Compress CSS files – Minify and compress the CSS code, again to reduce CSS file size so that it loads as fast as possible. While many plugins can do this, but it increases server load. Remove unnecessary white-space and CSS comments. We do online CSS Compression using YUI Compressor manually.
    compressed css
  7. Remove unused CSS code – We use GTmetrix to identify unused CSS and remove CSS bloat easily. Why load unused CSS when it is not required.
  8. Use a CDN – Content Delivery networks ensure your CSS is cached across the world and accessed as quickly as possible from the nearest local server for a superfast response. We use MaxCDN and simply drop the compressed CSS file via FTP.
  9. Avoid versions – Try to keep the CSS file url clean. Adding multiple query parameters with ? to highlight CSS file versions or add server time to force CSS refresh makes CSS caching difficult.For example
    <link rel="stylesheet" href="http://domain.com/style.css?1368887361">
  10. Learn CSS3 – it is the latest version of CSS and makes styling even more efficient. Harness the power of CSS the right way.

Try these fast CSS tips and make your site load faster.


40 comments on “10 Quick Tips to Make CSS Load Faster

  1. Rohan Mod says:

    my other blog has page size of 190 which is not good from SEO point of view.but the blog is hosted on blogger platform.how can i move all my css ? and is there any other website which allows such redirecting.please mention.

  2. Brad Dalton says:

    Yeah great tips.

    You could also use managed hosting which takes care of all this as well.

    My home page loads in 2/10 of a second if its wasn’t for the Facebook box in my sidebar.

    • P. Chandra says:

      Facebook scripts do take a lot of time. Implementing mod_pagespeed also can do a lot of CSS optimization automatically.

  3. Catalin says:

    Sass-scss compass will be an answer for a lot of your problems. One note: if your css file is lower than 30-40k you can dump te content in your html file. I saw test where iti performs better. Google does it. Also facebook widgets do it.

  4. Carter Davies says:

    Fabulous article. I have to thank you for mentioning GT Metrix in your article. I’ve tried several review tools to optimize my site and GT Metrix is a surprisingly good one. I can identify elements that has been slowing down the site in just a few seconds. Again, thank you for the insight.

  5. Vincent Armstead says:

    Css in the website is important as it provides a better look and feel to your website. But sometimes Css causes problems which ultimately result in high loading time to your website to open. so the tips mentioned in the post will surely help.

  6. Debopam Banerjee says:

    Css is extremely important….. It gives a nice feeling and look to a blog….. Thanks for this share…..

  7. Siddharth Solanki says:

    hello, thank you for the awesome post it helped me a lot and please keep sharing the awesome posts :)

  8. Ankit Sharma says:

    It is imported to compress white space in your codes.

  9. jhonmarshal says:

    Great post.I like it so much and i will apply those tricks in future for my website

  10. SHIV says:

    Thanks for the great tips. I never new that these thing are also affecting the CSS loading. Keep Tipsing !!!

  11. Judith Rosas says:

    You can improve your logo with a few key tips. To get started, make sure that you really understand what you are trying to do with your logo.

  12. Edson Hale says:

    IT is a common problem of lot of newbie blogger that they never take care of making their stuff lighter on uploads and after they amass a little huge matter on blog it gets slow and run on snail pace; that is why precautionary measures from the very beginning can save them from decline in ranking because of slow loading speed

  13. Fallaw says:

    At first want to say my thanks to the authors and to those who shared with us this useful links and tips. How did you get that kind of experience though? Did you try it before and then decided to write a post? I share it with my friends and they are still thankful for that.

  14. chitra says:

    Thanks for the post. I am knowing for the first time that we can remove the unused codes using GTMatrix.Its better to compress the css file before loading to the server.Css is very important for a webpage to control the styles and its layout. It is better not to write the inline styles.

  15. Ninika says:

    Hey, thanx for sharing above post. It is really awesome and common problem in the new bloggers. We all should understand that CSS is important.

  16. חדשות ומבזקים says:

    the compress code is important ?

  17. Ivan says:

    Great tips. I allway had my css files in few files so users load only css he needs for that section for that page or site section

  18. Anton says:

    Thanks for your advices. This question is always in my mind, although my blog is quick enough, but there are some tips to improve. Surely, I must rearrange my vision of CSS optimization tips and try to force to work them all.

  19. Coleman Jackson says:

    Css was just a designing part for me, i was unknown with its importance related to loading time, but after reading this articular i am going to follow all these tips, hope these will work to reduce loading time. thanks for this important article.

  20. Kangra Valley says:

    Thanks for this post. I am also try these on my blog site. Hope all these work for my blog.
    Thanks again.

  21. Rajat says:

    Yeah Great tips bro Compressing css can really make the site faster.Thanks

    • SAJID says:

      Yes true but as i dont know coding well.. i have done the plugins for my website so that it can run faster…

  22. Ratul says:

    New one to me. I never thought of that we can even make css load faster.

  23. Servis racunara says:

    I will try this tips on my website!For example Efficient CSS selectors!Tnx for the effort!

  24. Belajar Cepat says:

    The css compression is great. Thanks for sharing the tool. It can reduced size almost 30%.

  25. Sani says:

    Great tips, I definitely could use this!

  26. Mike Smith says:

    Wow:What a nice post.It deals with some idea to download CSS fast.

  27. jusisboss says:

    This is really nice post works well and easy to configure…thanks for all info.

    <a href="http://nerofreedownloadbd.blogspot.com" nero soft</a.

  28. Chitra says:

    It is great tips about loading css faster. It better not to write the inline styles. CSS3 has great features.

  29. Aashish Maharjan says:

    Ok lets apply ur technique in my some of the website. Thnx for this info.

  30. Deltech Furnaces says:

    CSS is the must to perform website design.I like your post.I applied your technique during design.It is working well.Thanks

  31. Form Tight says:

    You gave some tips to load css faster.It minimizes consumption of time to half.Thanks for this post

  32. Columbia Burlap says:

    Hello,
    In your first tips you said to avoid inline in html code.I am agreed with you as it takes more time to load.It is well to use extra css file.
    Thanks

  33. Web Consultant says:

    I have my website on wordpress so when minifying CSS, provided by the plugin it gives error and the website does not load and I have to apply the backup.

  34. Hardy says:

    Thanks for the tips! Now my website loads much faster..

  35. Hardy says:

    Awesome tips! it is very helpful to newbies like me..

  36. Nethues says:

    Thanks for tips, css is important part of designing.

  37. Mian says:

    Thank you for the suggestion. but even after performing changes its still taking time :(

Leave a Reply

Your email address will not be published. Required fields are marked *




Next Article »
css.php