Speed Combine External CSS

Often the only reason you have multiple CSS files being called is because your website designer found it easier to work with separate files. CSS code doesn't care where it is at or how many files it is in. One CSS file that contains all the info of your separate CSS files combined will work just as well and improve your page speed.

Putting all of your CSS into one file substantially reduces the amount of time it takes to load your web pages because you are reducing the amount of things the web browser has to load before displaying your page.

Tip - To determine how many CSS files your webpages load use the CSS delivery tool which will list each file that is being called.

Wordpress and CSS

You should pay special attention to this guideline if you are using Wordpress. Virtually every Wordpress theme has several CSS files that are loaded. If you find this to be the case with your blog, and you feel comfortable with editing files, you can take the contents of each of the CSS style sheets being called and put them into the main CSS file (the one you will often find when you open "Appearance > Editor" up from your dashboard).

How to combine your CSS

You can often just copy and paste the contents of each CSS file together to make one main CSS file.
Sometimes you will have many CSS files being called and you can just create one new CSS file which has all the contents of the others.

This method will keep all your old CSS files safe and named correctly if you need to go back to them. You would then update your HTML to call the new file and remove all the calls for the old files.

Many times you will just have two or three CSS files and you can just add the contents of one into an existing file... for example, you may have a CSS file called "main.css" and another called "sidebar.css" being called by your HTML. In this situation your could open your "sidebar.css", copy and paste the contents of the file into "main.css".

Once you have done that, you would remove the call for "sidebar.css" from your HTML. You now have just one CSS file instead of two that a web browser must load before displaying your webpage. Your webpage will now load faster.