How to optimize CSS file for speed

Question

I wonder how you can optimize the CSS file for faster loading, at the moment my CSS file is 2400 lines and the size is 54kb. None of the graphic elements are larger than 4kb, so I believe CSS re-forces my site to process / load slow ones.

This is just basic CSS, on some pages I upload additional CSS files.

Answer 1

This is a lot of CSS. Although the CSS minify tool is a good idea, you might want to go through the file manually and look for rules that you can combine. For instance:

margin-top: 10px; margin-right: 5px; margin-bottom: 0px; margin-left: 5px; 

can be reduced to:

 margin: 10px 5px 0 5px; 

And even further:

 margin: 10px 5px 0; 

Similarly, borders can be reduced:

 border-width: 2px; border-color: #123456; border-style: solid; 

This can be expressed as:

 border: 2px solid #123456; 

background, padding and fonts are some of the other rules that can be written so that they are much shorter and more efficient. Here is a good article on CSS Short Links .

CSS minifiers are useful tools, but I'm not sure if they can change your code in a shortcut format.

Answer 2

You can reduce CSS code using the following tools:

CSSMin http://code.google.com/p/cssmin

Collapse http://code.google.com/p/minify

YUI http://developer.yahoo.com/yui/compressor

CSS Minifier http://www.artofscaling.com/css-minifier

CSS Tidy http://csstidy.sourceforge.net

Answer 3

Try to compress your css

• http://www.lotterypost.com/css-compress.aspx

You should also see that you are not repeating the same code over and over, and use classes for things that are used very often.

If you have thinkgs like

 #content{ border-radius:5px; } #nav{ border-radius:5px; } 

So you should use, maybe something like:

 .borderAll{ border-radius:5px; } 

and add these classes to your div

Other things you could do are:

• Using sprites:

"CSS sprites are the preferred method for reducing the number of images Requests. Combine the background images into a single image and use the properties of the CSS background image and background position to display the desired image segment." - Yahoo Developer Rule

• Always put your CSS file at the top of the header

"When doing performance research on Yahoo !, we found that moving stylesheets in a HEAD document makes pages load faster. This is because setting stylesheets in HEAD allows the page to display progressively."

• Use the link instead of @import
• Reduce line break

• Delete last semicolon

  h2 {font family: Arial; font color: # 333;} better: h2 {font family: Arial; font color: # 333}

• Simple colors:

instead of #FFFFFF use #FFF, #AABBCC use #ABC

• Using CSS Shortcuts:
  http://cssdog.com/css_shortcuts.html

Answer 4

Have you minimized the file? http://www.minifycss.com/css-compressor/

I would not say that 2400 css lines are excessive. So maybe the speed issue is something else? Browse the web developer plug-in for your browser and see how many resources load.

Try combining images with sprites using SmushIt to compress images and reduce your css / js.

Answer 5

Besides compression, you should consider splitting your CSS file into multiple files. If you have certain classes that are only used on a specific page, you should have a CSS file for a special THAT page that no longer loads.

You must also ensure that you inherit style elements correctly so that you do not rewrite the same elements over and over again.

Answer 6

You can always try to minimize your css using something like the link below:

Online YUI Compressor

I also suggest using Firebug to see what takes you so long. You can see how the files are downloaded and how much time they take on the NET tab.

Answer 7

Try http://www.minifycss.com/ to compress css. Use chrome check element to measure css load time

Answer 8

If the site is loading slowly, I doubt the 54K CSS file is the worst of your problems. This is NOT THAT big, really - plus, as soon as the user has downloaded it once, the browser will cache it so that it does not create consistently slow page loads. Do you use any tools to analyze what is the loading time for individual resources on your site? Check out the Net panel in Firebug; you can get a slow response from an external site if you have external links that are referenced, slowing everything down on your own site.

However, you can still benefit from minimizing your CSS file to compress it, which will help you with load time if you still want to. Google to “minimize CSS” for many good resources on this subject, including downloadable and online tools for creating a mini version of your stylesheet :) Good luck!

Answer 9

You can use CSS-minimizer to reduce the size, you must also enable compression on the web server, and you must cache CSS (something you can also achieve by setting up the web server for this).

Answer 10

I know this question got a lot of answers, but I'm using a little trick (which requires JavaScript to be enabled) that seems really effective - even for a browser like Chrome that tries to display pages as soon as possible.

If the compressed and optimized file is still too slow, this can do the trick.

Often, a lot of CSS is often used for interactive content; such as: hover ,: focus, etc. These styles do not need to be loaded immediately, and you can load them after the page has fully loaded.

Therefore, I would recommend moving all the styles: hover and: focus, or just any class style that is used for content that is visible only through interaction into a separate CSS file. Then upload this separate file after the main HTML content has been fully rendered in JavaScript (jQuery example):

 $(document).ready(function () { //Render Interactive CSS: var Link = document.createElement('link'); Link.rel = 'stylesheet'; Link.href = '[Relative Interactive CSS File URL]'; var Head = document.getElementsByTagName('head')[0]; Head.parentNode.insertBefore(Link, Head); } 

Referring to this guide: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example

For me, this has greatly improved even small Interactive.css files.

Hope this helps!