How to optimize CSS file for speed

Question

I wonder how it's possible to optimize CSS file for faster loading, at the moment my CSS file is arround 2400 lines and it size is 54kb. None of the graphic elements is bigger then 4kb, so I believe CSS is reasson my website is rendering/loading slow.

That's just main CSS, on some pages, I'm loading additional CSS files.

54k is miniscule. You can always run your css through a compressor, and that will save a little size. But if you're having slow load issues - teh size of your css sheet is not the issue. On the other hand, thats a lot of rules, and the sheer volume of rules applied may lengthen a page render. — Bosworth99
– Bosworth99, Commented Mar 12, 2012 at 14:42
Depends on your rules' design. It looks like you have a very inefficient way of creating those, but without some examples, we can not tell. — Sirko
– Sirko, Commented Mar 12, 2012 at 14:42
I may be a blasphemer, but 2400 lines of CSS sounds like overkill. Are you using Sprites to reduce the # of images you're uploading on pageload? [spriteme.org/] Have you looked at making a CSS hierarchy our of your code so you're not wasting code applying the same styles 50 times in 50 different classes? All-in-all though, this sounds like a code review question. — Duke Hall
– Duke Hall, Commented Mar 12, 2012 at 14:43
2400 lines is not unreasonable for an Ecom site, for example. The stock magento style sheet has like 2000 single line rules. That being said - efficiency is probably the culprit here. — Bosworth99
– Bosworth99, Commented Mar 12, 2012 at 14:45
I browsed around a lot and found a new tool CSSBurner (cssburner.com) that locates redundant/repeat selectors and rules and all other types of CSS that can be removed or reduced. I was able to remove dozens of kB from my CSS files — The One and Only ChemistryBlob
– The One and Only ChemistryBlob, Commented Sep 25, 2017 at 13:37

Surreal Dreams · Accepted Answer · 2012-03-12 14:51:53Z

13

That's a lot of CSS. While a CSS "minify" tool is a good idea, you may want to take a manual pass over the file and look for rules that can be combined. 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 to:

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 such that they are much shorter and more efficient. Here's a good article on CSS Shortcuts.

The CSS minifiers are useful tools, but I'm not sure they are able to rearrange your code into the shortcut format.

answered Mar 12, 2012 at 14:51

Surreal Dreams

26.4k4 gold badges49 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ProDraz Over a year ago

I've gained 1sec 12sec avg. only by doing that and also like 600 lines are gone now :D I will try to use some tools aswell tommorow...

Surreal Dreams Over a year ago

Great, glad this was helpful. There's another good reason to use this technique - it may be manual, but the code is still readable. Minified code can be tough to read.

Andriy Budzinskyy · Accepted Answer · 2012-03-12 14:42:37Z

5

You can minify CSS code using the following tools:

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

Minify 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

answered Mar 12, 2012 at 14:42

Andriy Budzinskyy

2,00125 silver badges30 bronze badges

Comments

Stanley · Accepted Answer · 2012-03-12 14:43:42Z

2

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

I wouldn't say 2400 lines of css is excessive. So maybe the speed issue is something else? Check out a web developer plug-in for your browser and see how many resources are being loaded.

Try combining images into sprites, using SmushIt to compress images and minifying your css/js.

answered Mar 12, 2012 at 14:43

Stanley

4,0652 gold badges21 silver badges23 bronze badges

Comments

Patrick · Accepted Answer · 2012-03-12 14:44:48Z

2

On top of compressing, you should consider splitting your CSS file down into multiple files. If you have specific classes that are only ever used in a specific page you should have a CSS file for THAT specific page that isn't loaded anywhere else.

You should also make sure that you are correctly inheriting style items so that you are not re-writing the same elements over and over again.

answered Mar 12, 2012 at 14:44

Patrick

7,7227 gold badges42 silver badges50 bronze badges

1 Comment

tomasz86 Over a year ago

This sounds like an anti-pattern... Downloading all the small CSS files will take much longer than just using a combined one, even if some of the styles will not be used. If you really want to optimize like that then putting site-specific styles into the <style></style> tag is one way to do it (but difficult to maintain later).

Dave McHale · Accepted Answer · 2012-03-12 14:47:12Z

If the site is loading slowly, I doubt a 54K CSS file is the worst of your troubles. That's not THAT large, really - plus once a user has loaded it once, the browser will have it cached so it wouldn't create consistently slow page loads. Have you used any tools to analyze what your load times are for individual resources on your site? Check the Net panel in Firebug; you could have a slow response from an external site if you have any external resources being referenced, slowing down everything on your own site.

That said, you could still benefit from minifying your CSS file to compress it which will help your load times if you still want. Google for "minify CSS" for a host of good resources on the subject, including downloadable and online tools for creating a minified version of your stylesheet :) Good luck!

mas-designs · Accepted Answer · 2012-03-12 14:58:20Z

2

Try to compress your css

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

You should also look that you don't write the same code over and over again, 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 that classes to your div's

Other things that you could do are :

Using sprite images:

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

Always put your CSS file to the top of your header

"While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively. "

Use Link instead of @import
Reduce Line Breaks
Remove the 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

Use CSS Shortcuts:
http://cssdog.com/css_shortcuts.html

edited Mar 12, 2012 at 14:58

answered Mar 12, 2012 at 14:42

mas-designs

7,5311 gold badge33 silver badges56 bronze badges

1 Comment

Bosworth99 Over a year ago

This is the right direction. But doing this heavily can result in overly complex class application in the markup if you take it too far (an element with a dozen rules).

bechbd · Accepted Answer · 2012-03-12 14:42:29Z

1

You could always try minifying your css using something like the link below:

Online YUI Compressor

I would also suggest using Firebug to see what is taking you so long. You can see how the files are being loaded and how long they take under the NET tab.

answered Mar 12, 2012 at 14:42

bechbd

6,3713 gold badges31 silver badges47 bronze badges

Comments

dotoree · Accepted Answer · 2012-03-12 14:42:57Z

1

Try http://www.minifycss.com/ to compress css. Use chrome's inspect element to measure css loading time

answered Mar 12, 2012 at 14:42

dotoree

2,9911 gold badge26 silver badges29 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:15:54Z

0

You can use CSS-minimizer to reduce the size, you should also enable compression on the Web Server and you should cache the CSS (something you can also achieve by configuring the web server to do so).

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Mar 12, 2012 at 14:46

Icarus

64k14 gold badges102 silver badges116 bronze badges

Comments

Robert · Accepted Answer · 2015-03-26 13:25:01Z

I know this question has received a lot of answers but I use a little trick (which requires JavaScript to be enabled) that appears to be really effective - even for a browser such as Chrome which tries to render pages ASAP.

If your compressed and optimised file is still too slow, this might do the trick.

Often a lot of CSS is 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 is fully loaded.

Therefore I would recommend moving all the :hover and :focus styles or simply any class style that is used for content only visible through interaction into a seperate CSS file. Then load this separate file after the main HTML content is 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 to this guide: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example

For me this has made substantial improvements, even for small Interactive.css files.

Hope this helps!

Collectives™ on Stack Overflow

How to optimize CSS file for speed

10 Answers 10

2 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

2 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related