Optimize CSS files to speed up your WordPress website

WordPress theme developers and plugin developers use CSS for content presentation.Since these themes and plugins are created for generalized usage so the CSS files contain codes which might be used by your website.This unused piece of code is transferred each time your website is browsed.So to speed up your WordPress website it is very important to optimize CSS files.

Follow below steps to optimize CSS files 

  • Install Google Page Speed plugin for firefox .It is excellent tool and in case you need detailed knowledge about it read this post.
  • After installing Google Page Speed.Browse your website and run page speed on your web page.
  • In the Page Speed report (under the performance tab) you will be Unused CSS (at the bottom end of the report).Click on the option to see the CSS code which is not used by current post.Remember some CSS rules which are not used by current page may be required by some other page (for example your Home page might require additional CSS rules than the post page).So choose CSS rules corresponding to the theme features you are not using (this is tricky part and for safety it is better to use step by step approach as mentioned below).
  • Open your theme CSS file and delete the piece of code you choose above (remember to backup your CSS file before doing so).
  • Browse your website pages to make sure everything is working.
  • Again delete some piece of code and browse website pages to make sure everything is working.
  • After deleting unused code from the CSS file save the file.You need not delete all the codes listed under the unused code section (deleting common rules is enough).
  • Open CSS Compressor (www.csscompressor.com) in browser window. I use this a lot and is satisfied with the result.You are free to chose CSS compressor of your choice.
  • Paste the CSS code from the file you saved above.
  • Select all the check boxes in CSS compressor option (of www.csscompressor.com) and set the compression to highest.Compress the file.
  • Copy the compressed code and paste into your theme CSS file.
  • Save the file and browse the website pages to make sure everything is fine.
  • You can also validate the optimization and reduction in time by using above approach.
  • The above approach works for all themes so feel free to optimize your CSS files from any theme.

One thought on “Optimize CSS files to speed up your WordPress website

  1. This should be useful.

Leave a Comment