Even experienced WordPress users may suddenly notice their blogs loading slowly. Despite properly installing WP-Supercache, something just isn’t right. In the case of turnipofpower.com it turned out to be too many objects. Yep, my blog was bloated! Just check out the before image below as measured by Pingdom Tools. 9.4 second loading time, 54 total objects, 3 CSS files, and 38 images. Now compare it to the after image. 3.6 second load time, 28 total objects, 1 CSS file, and 18 images. Great, but the real secret is that visually my blog didn’t change at all. Read on to see how I did it.
1. Run the speed test at Pingdom Tools to get a reference point on what objects are loading. Sometimes looking at the source code you miss the big picture. Luckily, Pingdom Tools saves your tests, so you can always go back and compare your results.
2. Remove any plugins that load a lot of garbage but are rarely used. In my case the culprit was cformsII. Nobody ever had used the form, but every visitor had to load the CSS for it. Plugins take a toll on your blog. Check your load times before and after installing each one.
3. Count the total number of CSS files loading. It should be 1. Each additional call to your server will add time to your page load, even if it’s only a 1k file. Let’s look at how I combined my CSS files into one. First I physically copied and pasted all the CSS code from the plugins into the theme’s style.css file and saved it. Next I prevented the CSS from loading in the blog header by using the following trick. Add a snippet of code to your theme’s functions.php file to remove the function call for each CSS file you want to remove. Shown below is the code to remove the CSS for my page navigation plugin. You may have to use the plugin editor to find the name of the function being loaded.
<?php remove_action('wp_head', 'pagenavi_css'); ?>
4. Next up was lowering the number of images called. Even tiny images can stall the loading of your blog. I went from 38 images to 18 images by creating image maps. An image map works by loading one large image and then dividing it up into smaller areas. This is perfect for rows of icons found in navigation headers or social icons under a post. Below you can view the code I used for the social widgets in the left sidebar. 8 images 2k in size each were replaced by a single image only 5k in size.
<img src="http://turnipofpower.com/images/social.png" alt="social
links" width="250" height="170"
border="0" usemap="#Social2" /><map
name="Social2" id="Social2"><area shape="rect"
coords="0,0,127,45" href="http://feeds2.feedburner.com/TurnipOfPower" target="_blank"
alt="RSS" rel="nofollow" /><area
shape="rect" coords="0,46,127,85" href="http://technorati.com/faves?sub=addfavbtn&add=http://turnipofpower.com"
alt="Technorati" rel="nofollow" /><area
shape="rect" coords="128,46,250,85" href="http://apps.new.facebook.com/blognetworks/blogpage.php?blogid=38833"
alt="Facebook" rel="nofollow" /><area
shape="rect" coords="128,0,250,45" href="http://kimchiman.stumbleupon.com/"
alt="Stumble" rel="nofollow" /><area
shape="rect" coords="0,87,127,128" href="http://friendfeed.com/turnipofpower"
alt="friendfeed" rel="nofollow" /><area
shape="rect" coords="0,129,127,170" href="http://www.cmfads.com/cp/site-view.php?id=2"
alt="CMF Ads" rel="nofollow"
/><area shape="rect" coords="128,87,250,128"
href="http://twitter.com/TurnipofPower" alt="twitter" rel="nofollow"
/><area shape="rect" coords="128,129,250,170"
href="http://www.blogcatalog.com/blogs/turnipofpowercom.html" alt="blog catalog"
rel="nofollow" /></map>
One downside of using this trick in the WordPress loop is that my code no longer validates because “An “id” is a unique identifier. Each time this attribute is used in a document it must have a different value. “ Oh well, you win some and you lose some. Having valid html code is nice, having a site that loads quickly is nicer.
To create the image maps I used Adobe Dreamweaver to make things easier. The code above is for example purposes only and not meant to be a tutorial on the process. The idea is that by combining images located near each other into one larger image, you reduce the calls to your server. Just Google “image map editor” to find a number of free tools online.
5. The final technique used was to compress my CSS file. Google “compress css online” and you will find many free utilities. I backed up my old CSS file just in case, then pasted in the compressed code, saving an additional 2k in space.
Anyone have additional tips to speed up page load times?
Very nice, well done. I still have 3 CSS files loading. I will follow your advice and get this down to one. If you use CSS Sprites instead of image maps you will still get the reduction in total images and also solve the problem of the markup not validating. Unfortunately Sprites are a lot more work. As you said, some you win, some you lose.
I managed to get the 3 stylesheets on my blog combined into 1. This shaved .3 seconds off the load time, every little bit does help. My home page now loads in 2.3 seconds. Thanks again for the advice.
Lyndi, I plan on incorporating CSS sprites in a later project. They work by only showing a small portion of a larger image. There are a few tiny icons still loading that would really benefit from that technique on my blog. First I have to research to see if CSS Sprites can be tiled.
Great tips, Turnip! I’m going to get stuck into some of this later today.
I found one of the biggest time culprits was off-server images, especially as some called a redirect. Solution? Save image to my own server directory so it’s calling from a local file instead of another website. Saving the image on your own server also means you can compress the image if it is particularly large.
Rebecca: Linking to offsite images is called “hotlinking”. It’s a big no-no. Even if you have permission to link to the image, as you said, it will slow your site down. At worse you may get some nasty emails fromt he owner of the image, find the image suddenly gone, or worse, find the image replaced by an x-rated picture just to teach you a lesson
Tahimbo: While some web designers hate image maps, they really do serve a purpose.
Hello, I was able to take care of a few things that you mentioned: compressed my CSS and I removed some rarely used scripts. My load time went from 11.3 seconds down to 6 seconds. Thank you!! I will return to work on some of the other issues you raised…namely the image map.
Thanks for the tips Turnip. I recently had a thorough review by WebBetty on 10thingsihateaboutyoursite.com and the main problem was load time. The pingdom test made it perfectly clear for me where some additional problems are. However, I’m no guru on the techniques used in wordpress…
There is one bit that concerns me though. If you start taking css and scripts from plugins, and the same for pictures and combine them etc. what happens if you update the plugin? All this custom coding makes your site harder to maintain. Any thoughts on that?
Cheers!
If the function called to remove the plugin CSS doesn’t change, then upgrading the plugin won’t matter. If you delete the line in the plugin that adds CSS to the header, then you will have to repeat the process each update. Fortunately, most plugin updates are complete BS. When you read the details, you find out the only change is “donation link updated and Chinese language files included”. If wordpress changes versions, then I expect real plugin changes to occur, but not before. In the end, I prefer to remove plugins from my blog rather than maintain them. Trust me, both you and your readers can live without them.