Make this CSS more efficient

Hello all,
I was wondering if soemone could help me edit this CSS file to make it load faster and be more efficent.

Here is the stylesheet: http://www.asksteved.com/wp-content/themes/aqueous-lite/style.css

Thanks in Advance!

A client, who uses this stylesheet for their blog, asked that I make it faster in loading, more efficent, and less messy.

Best Regards,
Team 1504

Let’s see: on line 23 you had declared on body. Is good because all elements will inherit the props.
On 112, 138, 158, 166, 202 you have same font declaration. Maybe are more, and i’ve missed them.
At my second look i’ve noticed that you reset font one or two times. Maybe my previous affirmation is wrong and those lines are re-reseting font.

Download yslow that I mentioned above as it has this and other options built in for you. :slight_smile:

Johnny,
Could u give me some line numbers or code from my stylesheet to refer to. I am currently on vacation and off my computer but this is something a crucial client of mine needs me to finish soon. So ill use sitepoint forums on my phone.

Also Paul,
Thank you for smushing / making smaller the images for me. I believe the links you posted are to smaller versions of the images right?

Thanks for all your help and in Advance!

Regards,
Team 1504

I looked a little bit over your css. It might be not a big issue but i’ve noticed you declared the same font-family for several times. CSS proprieties are inherited from parents so it is enought to declare font-family one time and then use proprieties like font-size, font-weight where is needed

The biggest savings will be in the images so I suggest that you download yslow for firefox and perform the optimisation techniques it mentions there.

Smushed Images

right.png
96 bytes - result
3.33 KB - saving
97.26% - %saving

grad.png
135 bytes
622 bytes
82.17%

gloss.png
97 bytes
82 bytes
45.81%

headermain.png
6.97 KB
623 bytes
8.03%

reflectgrad.png
151 bytes
622 bytes
80.47%

reflect.png
5.28 KB
543 bytes
9.13%

sidebar.png
300 bytes
654 bytes
68.55%

comment.png
403 bytes
13 bytes
3.13%

date_written.png
724 bytes
53 bytes
6.82%

category.png
612 bytes
53 bytes
7.97%

well the css applies to wordpress blog

The url is here, asksteved.com, which goes to the physical file [URL=“http://asksteved.com/index.php”]asksteved.com/index.php

The php interperets the html which should help the CSS

The client specifically said, “I want to make the CSS more efficent so that when I test it with PageSpeed it loads my blog faster and something that would help this, and be good anyway, would be if you could make the CSS more neat.”

I hope the links will help you find any redudancies to better fix the CSS

Thanks for all you help so far and in Advance,

Regards,
Team 1504

Hi,

The css you showed is only 1k so if we give you a blank css file you will have saved 1k.:slight_smile:

The css could be tidied up a bit of course but is unlikely to be the reason why your clients site is slow. We’d need to see the html to know if you have redundant rules anyway.

First thing is to make sure the images you are using are correctly optimised and where possible use sprites instead of multiple images. This reduces their file size in most cases and saves on server requests.

I notice you are using 3 images for normal, rollover and active states. These should be one image and swapped via background position only. You should never load a new image on hover.

Just shaving the images will save you far more than looking at the css but there’s no reason why the css couldn’t be smaller also except that it will hardly make any difference to the speed on a file that small.

Next look at the html and remove any redundant code and validate.

Finally you can optimise the CSS but on a 1k file you are not going to save much time. Use shorthand and group elements where possible. You can remove whitespace and put single rules on one line. Don’t declare block elements as display:block because that’s what they already are.

This is just rough and whether its better or not is debatable (I would usually organise this differently anyway as I hate separat rules for typography etc.) .


/* Begin Various Tags & Classes */
acronym, abbr, span.caps {cursor: help}
acronym, abbr {border-bottom: 1px dashed #999}
blockquote {
    margin: 15px 30px 0 10px;
    padding-left: 20px;
    border-left: 5px solid #ddd;
}
blockquote cite {
    margin: 5px 0 0;
    display: block;
}
.center {text-align: center}
hr {display: none}
a img {border: none}
.navigation {
    display: block;
    text-align: center;
    margin-top: -30px;
    margin-bottom: 60px;
}
/* End Various Tags & Classes*/

/* Begin Images */
p img {
    padding: 0;
    max-width: 100%;
}
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
}
img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
}
.alignright {float: right;}
.alignleft {float: left}
/* End Images */

/* Begin Typography & Colors/Backgrounds */
html,body{height: 100%;margin:0;padding:0}
body {
    font:62.5%/1.2 'Lucida Grande', Verdana, Arial, Sans-Serif;
    background: #5AA9FA;
    color: #333;
    text-align: center;
}
#page {
    background: #fff;
    text-align: left;
    position:relative;
}
#headerimg {
    margin: 0;
    padding: 10px 0 0 40px;
    height: 75px;
    background: url(images/blue/headermain.png) no-repeat;
}
#content {font-size: 1.2em}
#main {
    width: 100%;
    position: relative;
}
.widecolumn .entry p {font-size: 1.05em}
.narrowcolumn .entry, .widecolumn .entry {line-height: 1.4em}
.widecolumn {line-height: 1.6em}
.narrowcolumn .postmetadata {text-align: center}
.alt {
    background: #f8f8f8;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
#footer {
    border-top: 1px solid #d6d6d6;
    background: #eee;
}
small {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 0.9em;
    line-height: 1.5em;
}
h1, h2, h3 {
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    font-weight: bold;
}
h1 {font-size: 3em}
#headerimg .description {font-size: 1.2em}
h2 {font-size: 1.6em}
h2.pagetitle {font-size: 1.6em}
#sidebar h2 {
    font-family: 'Lucida Grande', Verdana, Sans-Serif;
    font-size: 1.2em;
}
h3 {font-size: 1.3em}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
    text-decoration: none;
    color: white;
}
h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {color: #333;}
h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {text-decoration: none;}
.entry p a:visited {color: #b85b5a}
.commentlist li, #commentform input, #commentform textarea {
    font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
.commentlist li {font-weight: bold}
.commentlist cite, .commentlist cite a {
    font-weight: bold;
    font-style: normal;
    font-size: 1.1em;
}
.commentlist p {
    font-weight: normal;
    line-height: 1.5em;
    text-transform: none;
}
#commentform p {font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;}
.commentmetadata {font-weight: normal}
#sidebar {font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;}
small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
    color: #777;
}
code {font: 1.1em 'Courier New', Courier, Fixed}
acronym, abbr, span.caps {
    font-size: 0.9em;
    letter-spacing: .07em;
}
a, h2 a:hover, h3 a:hover {
    color: #06c;
    text-decoration: none;
}
a:hover {
    color: #147;
    text-decoration: underline;
}
#wp-calendar #prev a {font-size: 9pt}
#wp-calendar a {text-decoration: none}
#wp-calendar caption {
    font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    text-align: center;
}
#wp-calendar th {
    font-style: normal;
    text-transform: capitalize;
}
/* End Typography & Colors */

/* Begin Structure */
#page {background: url(images/right.png) repeat-y right #fff;}
#header {
    margin: 0;
    padding: 0;
    height: 75px;
    position: relative;
    background:blue url(images/blue/grad.png);
}
#headerimg {width: 500px}
#reflect {
    background:url(images/blue/reflectgrad.png);
    height: 75px;
    width: 100%;
    margin: 1px 0;
}
#reflectimg {
    background: url(images/blue/reflect.png) no-repeat;
    height: 75px;
    margin: 0;
    padding:0;
}
.news {
    width: 100%;
    background: #eee;
    border: 1px solid #d6d6d6;
    margin-top: 30px;
    float:left;
}
.news h2 {margin: 0}
.narrowcolumn {
    padding: 0 0 20px 45px;
    margin: -75px 200px 0 0px;
}
.widecolumn {
    padding: 10px 0 20px 0;
    margin: 5px 0 0 150px;
    width: 450px;
}
.post {
    margin: 0 0 40px;
    text-align: justify;
}
.widecolumn .post {margin: 0}
.narrowcolumn .postmetadata {padding-top: 5px}
.widecolumn .postmetadata {margin: 30px 0}
.widecolumn .smallattachment {
    text-align: center;
    float: left;
    width: 128px;
    margin: 5px 5px 5px 0;
}
.widecolumn .attachment {
    text-align: center;
    margin: 5px 0px;
}
.postmetadata {clear: left}
#footer {
    padding: 0;
    margin: 0 auto;
    clear: both;
    text-align: left;
}
#footer p {
    margin: 0;
    padding: 20px 0 0px 10px;
}
/*menu*/
ul.menu {
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 0;
    right: 0px;
}
ul.menu li {
    display: inline;
    margin: 0;
}
ul.menu, ul.menu li a {padding: 5px 15px 6px}
ul.menu li a {
    font: 1em Verdana, Helvetica, Arial, Sans-Serif;
    color: white;
    margin: 0;
    background: url(images/blue/tabs.png) repeat-x #A9D8FE;
}
ul.menu li a:hover {
    background: url(images/blue/tabs_hover.png) repeat-x #A9D8FE;
    color: #eee !important;
    text-decoration: none;
}
ul.menu li.current_page_item a, ul.menu li.current_page_item a:hover {
    color: #333 !important;
    background: url(images/blue/tab_active.png) #fff;
    text-decoration: none;
}
.admintab {
    position: absolute;
    right: 0px;
}
* html .admintab {padding: 5px 15px 6px}/* IE hack */
/* End Structure */

/*    Begin Headers */
h1 {
    padding-top: 0px;
    margin: 0;
}
h2 {margin: 30px 0 0}
h2.pagetitle {
    margin-top: 30px;
    text-align: center;
}
#sidebar h2 {
    margin: 5px 0 0;
    padding: 0;
}
h3 {
    padding: 0;
    margin: 30px 0 0;
}
h3.comments {
    padding: 0;
    margin: 40px auto 20px;
}
/* End Headers */




/* Begin Lists */

.postmetadata ul, .postmetadata li {
    display: inline;
    list-style-type: none;
    list-style-image: none;
}
#sidebar ul, #sidebar ul ol {
    margin: 0;
    padding: 0;
}
#sidebar ul li {
    list-style-type: none;
    list-style-image: none;
    margin-bottom: 15px;
}
#sidebar ul p, #sidebar ul select {margin: 5px 0 8px}
#sidebar ul ul, #sidebar ul ol {margin: 5px 0 0 10px}
#sidebar ul ul ul, #sidebar ul ol {margin: 0 0 0 10px}
ol li, #sidebar ul ol li {list-style: decimal outside}
#sidebar ul ul li, #sidebar ul ol li {
    margin: 3px 0 0;
    padding: 0;
}
/* End Entry Lists */

/* Begin Form Elements */
#searchform {
    margin: 10px auto;
    padding: 5px 3px;
    text-align: center;
}
#sidebar #searchform #s {
    width: 108px;
    padding: 2px;
}
#sidebar #searchsubmit {
    padding: 1px;
}
.entry form { /* This is mainly for password protected posts, makes them look better. */
    text-align:center;
}
select {width: 130px}
#commentform input {
    width: 170px;
    padding: 2px;
    margin: 5px 5px 1px 0;
}
#commentform textarea {
    width: 100%;
    padding: 2px;
}
#commentform #submit {
    margin: 0;
    float: right;
}
/* End Form Elements */

/* Begin Comments*/
.alt {
    margin: 0;
    padding: 10px;
}
.commentlist {
    padding: 0;
    text-align: justify;
}
.commentlist li {
    margin: 15px 0 3px;
    padding: 5px 10px 3px;
    list-style: none;
}
.commentlist p {margin: 10px 5px 10px 0}
#commentform p {margin: 5px 0}
.nocomments {
    text-align: center;
    margin: 0;
    padding: 0;
}
.commentmetadata {
    margin: 0;
    display: block;
}
/* End Comments */

/* Begin Sidebar */
#sidebar {
    width: 190px;
    float: right;
    margin: -30px 0;
    min-height:800px;
    background: url(images/blue/sidebar.png) repeat-x #eee;
    display: block;
    border-left: 1px solid #D6D6D6;
}
#sidebar form {margin: 0}
/* End Sidebar */

/* Begin Calendar */
#wp-calendar {
    empty-cells: show;
    margin: 10px auto 0;
    width: 155px;
}
#wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
}
#wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
}
#wp-calendar a {display: block}
#wp-calendar caption {
    text-align: center;
    width: 100%;
}
#wp-calendar td {
    padding: 3px 0;
    text-align: center;
}
#wp-calendar td.pad:hover { /* Doesn't work in IE */
    background-color: #fff;
}
/* End Calendar */


There are probably redundant elements in there also but I don’t know without seeing the html.

I’m guessing the problem is mainly the images you are using or the clients other files.

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/