CSS and Faster WordPress

While working on speeding up your WordPress site, CSS will be one of the areas you’ll see reported as a problem. Most WordPress themes have at least some duplicate or repetitive or otherwise unused styles. This isn’t necessarily bad, but can be a worry when you’re reviewing your test scores.

One thing to keep in mind, not all styles will be used on your home page. Most people choose their home page as their primary test, so there are always styles in the stylesheet that aren’t in use there. The most common culprits would be styles for formatting comments, author boxes, alternate sidebars, things that only appear on interior pages of your site. You wouldn’t get rid of those styles, your site would look awful.

Can I Remove Styles?

Are there styles you can safely remove? Yes, but it depends. (that’s the answer to many WordPress questions! ;-)) I’ve been working with the StudioPress Genesis Eleven40 theme, so lets use it as an example.

Eleven40′s Color Styles

This child theme has the option of selecting a Color Style. You’ll find it under Genesis > Theme Settings. Many themes offer something like this – it makes style changes easy to make, especially if you’re not a designer or don’t want to mess with CSS. The convenience comes at a price, it adds extra styles to your stylesheet, making the file larger and larger files take longer to load.

In the stylesheet for the Eleven40 theme, there is a corresponding section for each additional color: blue, green, and red. Eleven40′s default color is orange and those are already in the main styles for the theme, the additional colors override the defaults, when you select “green” as a choice, the theme adds the class eleven40-green to the body tag.

<body class="home blog logged-in admin-bar no-customize-support header-full-width content-sidebar eleven40-green">

This uses the cascade in Cascading Style Sheets – and will use the green styles from that part of the css in addition to the default styles already specified. Basically, it works like this:

The default css for the button will style it orange, and since you selected green as your color style, it will also apply the green style, too. The green style is what you will see, but for that element, if you inspect it, you’ll see the other style is there too. Extra code, which is convenient, if you switch back and forth between color styles, otherwise, it’s just extra and can slow things down.

If you’re using the default color style for the theme, this means you have quite a bit of css for blue, green and red that won’t be used. If you’re trying to pare down your css file size and make your site load faster, you’ll probably want to remove these.

Removing CSS Styles

This is easy to do – just edit your style.css in the eleven40 folder. (make a backup copy first, just in case!) You’ll remove every style that refers to:

.eleven40-blue
.eleven40-green
.eleven40-red

I’d also edit the functions.php file for your theme to turn off the Color Style selector found in Theme Settings. Here’s the bit you’ll want to remove:

/** Create additional color style options */
 add_theme_support( 'genesis-style-selector', array(
 'eleven40-blue' => 'Blue',
 'eleven40-green' => 'Green',
 'eleven40-red' => 'Red'
 ) );

Why remove that? It will keep someone from assigning one of the other colors to your site by accident, once you remove the styles, it won’t look so good.

What if you want to use one of the color styles? Say you wanted to use the blue instead of the default. You can do that, and still clean up the extra styles.

First, I’d do a search and replace for the color I wanted to use. In this case, I’d search for #ed702b which is the default orange, and replace it with #2b97ed, which is the blue.

Next I’d update the images to use the blue set of images that comes with the theme.

.eleven40-blue #title {
 background: url(images/blue/logo-texture.png);
 text-shadow: 0 1px #17579b;
 }
.eleven40-blue #title:before {
 background: url(images/blue/logo-vert-left.png) repeat-y;
 }
.eleven40-blue #title:after {
 background: url(images/blue/logo-vert-right.png) repeat-y;
 }
.eleven40-blue input[type="button"],
 .eleven40-blue input[type="submit"] {
 background: url(images/blue/gradient.png) 0 0;
 border: 1px solid #2b97ed;
 }
.eleven40-blue input:hover[type="button"],
 .eleven40-blue input:hover[type="submit"] {
 background: url(images/blue/gradient.png) 0 -33px;
 }

You’ll take these and change out the image name for the corresponding styles without the .eleven40-blue. (we already took care of the border colors when we did search and replace.)

For example: you’ll update #title with the background image url from .eleven40-blue #title. Repeat for each of the image items. This will give you blue buttons and blue logo/title area.

Once you’re done you can remove the blue, red, and green styles from the stylesheet. You’ve cleaned up over 230 lines of code and made your site a bit quicker!

Speak Your Mind

*

css.php