CODEWITHSUNDEEP
css
ProDraz
ProDraz

Reputation: 1281

How to optimize CSS file for speed

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.

Upvotes: 8

Views: 14327

Answers (10)

Robert
Robert

Reputation: 541

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!

Upvotes: 0

mas-designs
mas-designs

Reputation: 7536

Try to compress your css

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

Upvotes: 2

Surreal Dreams
Surreal Dreams

Reputation: 26380

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.

Upvotes: 13

Dave McHale
Dave McHale

Reputation: 59

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!

Upvotes: 2

Icarus
Icarus

Reputation: 63956

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).

Upvotes: 0

Patrick
Patrick

Reputation: 7712

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.

Upvotes: 2

Stanley
Stanley

Reputation: 4035

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.

Upvotes: 2

dotoree
dotoree

Reputation: 2993

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

Upvotes: 1

Andriy Budzinskyy
Andriy Budzinskyy

Reputation: 2001

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

Upvotes: 5

bechbd
bechbd

Reputation: 6341

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.

Upvotes: 1

Related Questions