Stumble Digg Technorati Delicious

YSlow Optimization Part 1 – Make fewer HTTP requests

Welcome to part one of my little series on using YSlow to optimize your website, if you haven’t read and followed the instructions in my previous post titled How To Use YSlow To Speed Up Your WordPress Site please go check it out now, follow the instructions to get the needed tools and plugins before returning to this post for the meat and potatoes portion of today’s instruction.

In this series I will be breaking down the different categories and information you can obtain by using YSlow for Firefox and providing step by step instructions on how to best implement fixes, modifications, settings, plugins or tweaks to get the most out of your website. Most of the information provided in this series will apply to any type of website but some of it will be WordPress specific.

On a typical website 80% of the time it takes to load a website is a direct result of front end processing, which consists of making requests to the server and downloading static content, the remaining 20% is taken up by a combination of back end processes such as executing scripts and things you don’t actually see, this shows the importance of properly optimizing the 80% that is directly in your control and there are a few ways you can make drastic improvements in this area with minimal work.

First off we will look at the items that YSlow shows us for the category named “Make Fewer HTTP Requests” after running the plugin, at the very top you will see something similar to this image,  it provides you a very specific snapshot of exactly what your website is doing as it loads the page you are looking at.

YSLowhttp1

As you can see, the site that I used to grab this image from is in need of some serious help in this department. There are a number of ways you can optimize your site such as manually grabbing your javascripts and condensing them into as few separate files as possible and then doing the same thing with your css files, make sure to change any references in your code to the new files after doing this. And skipping ahead a bit in the lessons, if you decide to do this the manual way it would also be a good time to minify (remove the extra whitespace) and/or compress your css and javascript files at the same time to save work later. However, I do recommend reading on and using the method in the next paragraph over doing this the old fashioned (read hard) way.

Now, this method is a much much easier way to accomplish this task. You can use a wonderful piece of work that is called PHP-Speedy that will do many of the tasks that are needed all by itself. You can obtain PHP-Speedy by going to http://aciddrop.com/php-speedy/ and downloading it from their site. They have a stand alone version available as well as a WordPress plugin for easy upload and go use for those who want to use it on a WordPress site.

PHP-Speedy is amazing, it will grab your scripts on the fly, minify them, combine them and serve them up as one file. This alone will usually move your site up from an F to a B grade for the category named “Make Fewer HTTP Requests.” PHP-Speedy will also have an effect on other categories of your YSlow score, but I will address those when we get to them specifically. If you have any questions about configuring PHP-Speedy please read over the documentation that is available on their website, and if you still have any questions after that feel free to post them here and I will assist you as best I can.

For reference, there are a few options to configure in PHP-Speedy, on this site I have them set like so:

  1. All JS Libraries show checked.
  2. Minify Javascript, Page and CSS all set to Yes.
  3. GZIP off for all options as I do that on the server, which is recommended.
  4. Far Future Expires for Javascript and CSS set to Yes.
  5. Data URL’s set to No.
  6. Cleanup On set to No.

Don’t forget to test out the configuration in the settings page then activate it, you will love the results. This one step all by itself makes a huge difference in the overall performance of your website.

For the next portion of this category, we need to address the number of external background images that are present. Each image that has to be downloaded will count as a separate http request, and each one will be downloaded separately which is a terrible waste of time. The best fix this is to take all your background images and combine them into what is called a “Sprite” image and position them using CSS. This may seem very confusing at first but it’s not that difficult to do if you have the right tool and patience to get it set right. By taking all of your background images and combining them into one image they can be downloaded with one request instead of 16, 20 or however many background images you have on your site.

The steps required to do this require Photoshop or another graphics program with similar features and abilities (you won’t be able to do this with MS Paint)

sprite_1First off, you need to gather up every background image that is in use on your site which is not part of a repeated background. Once you have this done, open up your graphics program of choice and create an image that is large enough in height and width to accommodate all your images with at least 100 pixels separating them vertically. You want to set grid lines on this image to aid in your placement and space them equally every 100 pixels from top to bottom. This is important because we will need to know the relative position of each separate image in the overall image in order to properly position them using css. You should have something like this, but on a much larger scale.

sprit_2Once you have the grid line, you simple start pasting in your background images and use the grid lines to evenly space them on the overall background. It will save you a lot of time later if you figure out how far apart certain images need to be ahead of time, for example… If you have a background image that is for your date on your posts you will want to be careful where or if you use it, the image that shows will show for the entire height so it is quite possible to have one image show where you want it then the next and the next showing that you don’t want to show because you are unable to limit the height of the post box, for this reason I recommend you leave those types of images out of the sprite. If you want to experiment and see what your specific limitations are, please feel free to do so. Once you have your images on the background you will have something similar, but much larger and with more images than this. As you can see, each separate image is set at equal distances vertically and are aligned to the left. This will allow us to control their placement using css much easier than just throwing them in there anywhere.

The next step, after saving and uploading your neat new sprite image to your themes image folder will be to do the css edits to position them on your pages. This is the time consuming part and will take some tweaking to get things just how you want them to be. Initially each of your background images will be specified separately in your css, you can change this by gathering up all the classes or id’s that have background images and specifying your new sprite image for all of them, as an example if you at one point had

[php].MyBg1 {
width: 50px;
height: 50px;
background: url(images/image1.gif) ;
}
.MyBg2 {
width: 50px;
height: 50px;
background: url(images/image2.gif) ;
}
.MyBg3 {
width: 50px;
height: 50px;
background: url(images/image3.gif) ;
} [/php]

You can now get rid of the background on each of the css entries affected and specify one background image for all of them with one css entry. You will want this entry to be before any of the related entries in your cdd file so the background sprite image will be picked up first, the line to add will look something like this:

[php].MyBg1, .MyBg2, .MyBg3 {
background: url(images/YourSpriteImage.png) ;
} [/php]

Once you have that done, you simply alter the affected css entries to specify the position, so it will look something like this:

[php].MyBg1 {
width: 50px;
height: 50px;
background-position: 0px -100px;
}
[/php]

Each image will have its position specified separately based upon their position in your sprite, so the negative position portion of the css will be even numbers, like -100, -200, -300 etc or whatever spacing you used when you created your sprite image. This may also require some tweaking to get things just right, and can be quite the process. Patience is a virtue and one that will be required for this task. I will stop rambling now and let you get to it.

If you are confused by this, there is quite a bit of information available online, I would advise reading up on it or practicing on a test site before trying it on your main sites. If after doing that you are still hung up on something, please feel free to post your questions and I will assist you as best I can. This concludes Part 1 of this series, make sure to stop back on Friday, July 24th for Part 2 that will focus on categories 2-5 in your YSLow results pane titled  “Add Expires Headers, Compress Components with GZIP, Put CSS At Top and Put Javascript At Bottom.” You can also ensure you don’t miss any posts in this series by subscribing to my FEED and getting notified right in your inbox when posts are made.

width: 468px;
height: 100%;
text-indent: -10000px;
background: url(images/domainergal.png) left top no-repeat;
}

2 Responses to “YSlow Optimization Part 1 – Make fewer HTTP requests”

  1. Comment by online tech support (Twitter name: ) posted on December 14th, 2010

    Thanks for this. We have been tweeking our site like crazy for speed.

    Reply to this comment


Leave a Reply