How to speed up WordPress blog with CSS sprites?

WordPress has lot of good themes that we can choose from. However, if you are using old WordPress Theme likes mine which has lot of small images. CSS sprites will help to improve your blog loading speed. What are CSS sprites? A sprite combines multiple background images into a single image. This is a technique for making web pages faster because it reduces the number of downloads in the page.

Yes, the more images in your WordPress Theme, the more HTTP requests to server will be made. Therefore, the slower your blog will be loaded.


CSS sprite that use in spBlogger.com

There were 11 images before I combined them into 1 image as above. As result, I managed to reduce 11 HTTP requests into only 1 HTTP request. This will reduce web hosting CPU usage too as lesser requests are made.

How to speed up WordPress blog with CSS sprites?
SpriteMe is a great tool to help you. It is even better if you have CSS knowledge. Else choosing a good optimized WordPress Theme will do the trick.

  • Great share Jayce. I tried CSS Sprite before but it jumble up my background image. Will SpriteMe take care of everything? Or we still need to change something in our CSS file?

    • Nope, SpriteMe will work on simple site only. I modified the sprite and CSS myself.

  • emm..need to learn about css first. Still don’t know too much about it. Huhu..

  • Hello Jayce,

    Thanks for your information. However, I got stuck at SpriteMe Export CSS. Where do I go from here? My WordPress site is http://internettvdotcom.com/ and I’m using a free Semiologic template.

    Here are the two sprites that were created:

    http://www.jaredhirsch.com/coolrunnings/public_images/608e2f56f9/spriteme1.png
    http://www.jaredhirsch.com/coolrunnings/public_images/a8f51dc534/spriteme2.png

    Here is one of several changes…

    **** CROSSED OUT ****
    #optincrusher .attentionarrow {
    background-image: url(“http://internettvdotcom.com/wp-content/plugins/optincrusher/images/arrow.gif”);

    ****REPLACE****
    background-image: url(“http://www.jaredhirsch.com/coolrunnings/public_images/608e2f56f9/spriteme1.png”);
    background-position: -10px -168px;

    But, I don’t quite know how to follow the instructions below and was wondering if you could break this down further on what exactly should I be doing:

    “Make sure to download these sprite images to your own server. These URLs are temporary and will eventually be removed! Replace these URLs with the URLs where you host the images.”

    Any help will be greatly appreciated!

    PS – I have Hostgator and I’ve already uploaded Sprite1 to my folder at http://internettvdotcom.com/wp-content/plugins/optincrusher/images at my host. Although I can find this url in the page source, I found the url in Edit Plugins for OptinCrusher that look like this..

    $optincrusherStylesheet = str_replace ( “ARROWIMG_URL”, get_plugin_url().’/images/arrow.gif’, $optincrusherStylesheet);

    The /arrow.gif appears in two different places in the edit OptinCrusher plugin.

    So my question is… Am I on the right track? If so, how exactly do I replace the above with sprite1?

  • Hi Jayci OOi,

    You have written great blog post about css sprites, but you did not elaborate exactly how to use spriteme.org. However, I’ve written a blog post about the complete use of spriteme. Check it out here