Question

I have a CSS file which styles the entire page, and it’s getting Gzipped and it’s minified, but it’s still 200kb. Is there anything else I can do?

Answer 1

I took at look at your profile and found http://www.charliecarver.me, took a look at that and found a css file. If this is your website and the css file you are talking about, you repeat a lot of statements. For example, line 1 to 13 of your css file looks like this:

body {
/** css code... **/
}

Line 15 to 17 looks like this:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,input,textarea,p,blockquote,th,td {
/** css code... **/
}

Line 432 to 434:

html>body #content {
/** css code... **/
}

Line 826 to 828:

body,td,th,.metadata a:link,.metadata a:visited,.navigation a:link,.navigation {
/** css code... **/
}

All that could be done with one block of code referencing the body. So, Reduce the amount of repeats you have. Just to give you an idea of what’s repeating:

The elements:

• “div” appears 35 times
• “dt” appears 50 times
• “dd” appears 30 times
• “ol” appears 49 times
• “li” appears 6 times
• “yui” appears 315 times

Also, using only what you need will greatly reduce the size.