Top 10 ways to optimize CSS for faster websites
Have you ever paid heed to desires to optimize your CSS code? Or do you belong to a category of front-end developers who ship websites without caring about optimal performance? Well, if you are the latter, then this article is for you. Today, we are going to show you The Top 10 ways to optimize CSS for faster websites. You might be wondering why a faster website is important. Here’s why:
- People generally have a low attention span
- Customers would come back for more if the website loaded quicker
- Faster websites are ranked higher up in Search Engines
- Faster websites add value to your SEO strategy
- Faster websites are just cool and create a nice impression of your work
Now, what would you do to make your website faster? There could be many things, like upgrading your server, it’s RAM, the storage or the hardware in general. But did you know that the main reason for a slow website lies within your source code? The lack of an optimized CSS is the most common culprit. This means that reducing the file size of your CSS stylesheet by even a few kilobytes can have a considerable effect on your page load time. Here are 10 ways you can optimize your CSS for a faster website:
1. Use Image sprites
Using image sprites is an age-old technique when it comes to reducing your CSS file size and decreasing page load time. Image sprites allow you to package your images into one large .png file, which reduces HTTP requests and improves your page load time. An image sprite is a great choice if you are using a lot of icons and graphics on your site.
2. Minify CSS
Minifying CSS is simply compressing your CSS file into a newer file with minimal white space. You don’t have to do it by hand of course, as there are automatic compressors available on the Internet. Here is one such CSS minifier: http://www.cssminifier.com/
3. Reduce unnecessary code
Another trick to improve page load speed is reducing unnecessary CSS code. This can be achieved by checking for redundant or duplicate CSS code using a tool like this one: http://unused-css.com/
4. Put CSS at top and JS at bottom
It is good practice to put your CSS stylesheet at the top (between <head> </head> tags) and your JavaScript at the bottom. Ensure that your CSS code is loaded before the rest of the page. A reason for JavaScript being placed at the bottom is its increased size and its subsequent effect on website speed.
5. Splitting CSS files
You can split CSS files, i.e. various stylesheets, if you’re targeting multiple browsers like IE, Chrome or Firefox. For example, instead of trying out CSS hacks in a single stylesheet, you can use IE conditional statements to load a different stylesheet (e.g. targeting IE6 for instance). This way, you wouldn’t be loading up IE code while using Chrome, and you would reduce the CSS file size by a great margin.
6. Reduce Whitespace
You should always try to reduce the whitespace in your CSS because increased white space can take up lots of bytes and can be the difference between a faster and a slower site in very large scale projects.
7. Document your code
You should document your code wherever possible. Using CSS comments like /* Comment here */ can help you identify useless code on many occasions. Even though adding comments takes up space, it is easily negligible.
8. Organize your code
Organizing your CSS code is a technique that many wouldn’t think to tell you about. In fact, on many levels, organizing your CSS code can help you reduce your CSS file size by a great margin and boost your website speed. Are you wondering how? It’s very simple. Putting your CSS classes into the right set of branches ensures minimal duplication, a common problem with modern web designs. In some scenarios, organizing your messy CSS code into hierarchical branches is all you need to pump up your website.
9. Avoid CSS Hacks
Avoid CSS hacks in a single stylesheet. Instead use the techniques stated in points 5 and 8.
10. KISS Technique
A final word is to make sure everything you do follows the KISS technique. KISS stands for Keep it Simple Stupid. If you aren’t re-doing your CSS for no reason, then you should be pretty much on the right track towards organized, well written, less redundant and clean CSS code.
