Browsers render optimized style sheets faster than messy ones.
Therefore, making your CSS code as short and clean as possible is an efficient method to improve page loading time.

To make your CSS short and clean, you need to remove redundant selectors carefully, in a way that will not impact your site design.
The safest way to do that, would be to test all changes on a test environment, set locally using site backup, and only then implement them to the live site.

However, If you don’t want to install your website locally and prefer the shorter way, simply copy the website directory (if WordPress, copy your theme folder) to your local computer.

Take the following steps to clean your CSS:

  1. Open Dreamweaver and define a site. It’s simple and extremely helpful. Make sure to assign your backup directory as the Local Root Folder.
  2. Open your main stylesheet in DreamWeaver and go over it.
    • Remove the global resetting *{padding:0;margin:0} if you have one. The star selector makes browsers go over all the elements in the current page and is very inefficient.
      Instead, reset only selectors you need to, such as H1, H2, ul, p, form etc. (e.g. H1, H2, ul, p, form{padding:0;margin:0}).
    • Go over the definitions and delete unnecessary selectors.
      For example: replace h4.meta{} with .meta{}, unless you use the class “meta” inside a different tag in your site.
      Now that your local site is defined in DreamWeaver, you can make sure of it by searching for all appearances of class=”meta” site wide.
    • Click CTRL + F and follow the instructions below:

      Take a look at the search results in the image above.
      As can see, all appearances of class=”meta” are inside the h4 HTML tag.
      This means that h4 is redundant in the h4.meta{} CSS definition, and so, you can use .meta{} instead.
      If there were several different HTML tags in which class=”meta” appeared, then leaving h4.meta{} would be correct, but this is not the case.
    • In case you have a chain of three or more selectors in a row. Define new IDs or classes to break the long chain.
      For example, the definition #main_content div ul li{} is too long. Add a unique ID to the ul tag and then change the definition to be called by the new ID (e.g. #postList li{})
    • Avoid using CSS !important override property unless you really have to.
  3. Finally, compress your CSS code using an online css compressor to decrease file size.

Topics:   | | |