In the previous post we set plan to bring our website to the extreme performance level up. First of all we need somehow cut our styles (mostly to reduce amount of data:URI). Usually this operation doesn’t bring much web performance, but not in the case of base64-encoded images in CSS files.

What to start with?

We can use either Page Speed plugin for Firebug/Firefox, or Dust-me Selectors directly for Firefox to find CSS selectors which must be removed.

Our main criteria for now will be YSlow statistics chart – and size of the CSS files.

In our case all is very simple – we need to clean up GD Star Rating styles from unused stars / thumbs. OK, going to GD Star Rating plugin settings and remember what sets do we have enabled there. In our case all stars are under ‘Soft’ set. Also you need to remember which star sizes are actually used (in our case it’s 24 – for big ones – and 16 – for small ones). Also we don’t use thumbs in ratings.

Fixing GD Star Rating

After we have remembered all options let’s go to wp-content/plugins/gd-star-rating/css/gdsr.css.php. It seems that author tried to remove unused styles from dynamic styles generation. But without any actual success – generated CSS file link includes all possible sets and all possible sizes. We need to fix this situation.

So in file wp-content/plugins/gd-star-rating/css/gdsr.css.php find $type == "s" (near line 88) and replace this piece of code

if ($type == "s") {
	$folders[] = substr($r, 3);
	$sets[] = $set;

with this one

if ($type == "s") {
	if ($set['folder'] == 'soft') {
		$folders[] = substr($r, 3);
		$sets[] = $set;
	}

Here we added our stars’ set (’soft’) and restrict adding to the final array any other sets. If you use different set – use its name here.

Then a bit lower we need to cut all other arrays from unused values. So just before the line with

echo "/* stars sizes: ".join(", ", $sizes) ." */\r\n";

add the following

$sizes = array(16, 24);
$thumb_sizes = array();
$thumb_sets = array();

Here we cleaned up arrays with thumbs and restricted array with sizes to our actually used ones (16 and 24).

And the final change (actually to reduce amount of different data:URI chunks, not to reduce amount of CSS rules) is near line 154-159. Find there

foreach ($sets as $set) {

And replace this piece of code

echo $class." .starsbar.gdsr-size-".$size." .gdouter { background: url(...";
echo $class." .starsbar.gdsr-size-".$size." .gdinner { background: url(...";
echo $class." .starsbar.gdsr-size-".$size." .gdcurrent { background: url(...";
echo $class." .starsbar.gdsr-size-".$size." a:hover { background: url(...";

with this one

echo $class." .starsbar.gdsr-size-".$size." .gdouter{background:repeat-x 0 0}\r\n";
echo $class." .starsbar.gdsr-size-".$size." .gdinner{background:repeat-x 0 -".(2 * $size)."px}\r\n";
echo $class." .starsbar.gdsr-size-".$size." .gdcurrent{background:repeat-x 0 -".($size)."px}\r\n";
echo $class." .starsbar.gdsr-size-".$size." a:hover{background:repeat-x 0 -".$size."px!important}\r\n";
echo $class." .starsbar.gdsr-size-".$size." .gdouter,\r\n".
  $class." .starsbar.gdsr-size-".$size." .gdinner,\r\n".
  $class." .starsbar.gdsr-size-".$size." .gdcurrent,\r\n".
  $class." .starsbar.gdsr-size-".$size." a:hover{background-image:url('".$url."')!important}\r\n";

Results

Here we have saved 75 Kb of data (and now can merge our CSS files back) – most of this amount was related to data:URI in unused CSS. But during styles cleaning we have found missed background image (blue splash), which must be somehow minified. After converting from JPEG to PNG we have saved additionally 30 Kb but it’s still too large. Need to think how the situation can be improved here.

We have not finished yet with unused selectors – but with large chunks of unused data maybe. In one of the next posts we will completely review how you can determine and remove really unused CSS rules (because 1 CSS file can be applied for different website pages, and each page doesn’t have all DOM elements which are described in CSS).

Conclusion

Removing unused styles can help you to speed up your website, sometimes even significantly. In our case simple actions have saved 75 Kb of data, or about 20%. Also this should increase page rendering speed but not so notably (we will check later how it increases in this case – but it’s about 10 ms gain).

Related Posts

• January 29, 2010 -- Reviewing speedup – from advanced to extreme website acceleration (0)
• January 21, 2010 -- Add more caching with (background) images (0)
• January 20, 2010 -- data:URI is the next generation of acceleration techniques (2)
• March 7, 2010 -- Dynamic CSS / JavaScript files are evil – 8 reasons (4)