YSlow Optimization Part 4 – AJAX, DOM Elements, 404’s, Cookies and Scaling

This is the forth and final “installment” in my YSlow series, if you haven’t read the previous posts you can catch up at any time as they aren’t going anywhere. Today I am going to go over the final segment in the list of items as shown by the YSlow plugin for Firefox. These elements may not play a big role on your site, but for some they do. If you look at your site and you see an A for any of these categories you can feel confident that you need not worry about anything I have to say about them, if on the other hand you see a C or lower, you should give it a look over.

Make AJAX Cacheable, Use Get Requests

Making AJAX cacheable is pretty self explanatory and most sites won’t have any issues with this. If you are properly using expire headers, minification and ETags as outlined in previous posts in this series you are likely already set in this area. AJAX is growing in popularity every day and can be very handy when used properly, just remember that even though AJAX is created dynamically there is no reason not to cache it when you can. There is much more information available on this topic that is outside the scope of this article so if you are in need of some advanced configuration to accomplish this, Google is your friend.

The method in which you retrieve your AJAX information will vary from site to site but you should always use a GET request instead of POST unless you are actually sending information, this may sound obvious but many sites implement this incorrectly as a POST request will function just like a GET request when there is no information to send. The benefit of using GET instead of POST comes into play because POST is a two stage process whereas GET only uses one TCP packet, in most cases. It just makes sense to use GET unless you are actually sending data to be stored on the server.

Reduce DOM Elements

So, just what does DOM mean you are probably asking, well it stands for Document Object Model and that’s about all you need to know if you don’t already know what is it. This topic could easily be an entire series in itself so I will just give the basic information on this as reported by YSlow. If you have a very complex page, you will have more data to download and as a result you will likely notice slower DOM access in your javascript. The meat and potatoes of this part states that you should limit the elements on your page whenever possible, not usign nested tables when not needed or extra divs just because you want to. Limiting the total number of HTML elements (tags) on a page will obviously speed up your site, so this is just good common sense.

404’s and Cookies

This section shold go without saying, but I will say it anyhow. Check to make sure your site isn’t producing 404 errors. You can look at the YSlow results or even better is to keep an eye on your server logs. If you see a file, image or page that is causing 404 errors fix it, it’s that simple really.

Cookies should only be used when needed, chances are likely that you will be fine in this department but there are a few things you can do to improve upon this. Send static content (images etc) from a cookieless domain. What does this mean, well it means that you setup a subdomain such as images.yoursite.com or a completely different domain all together that points to your images or scripts folder, by doing this you reduce the number of times that a cookie will be sent, saving on traffic and all that good stuff.

The “Everything Else” section

The remaining items in the YSlow report don’t warrant a description here, they are what they are and they say what to do to fix them so I will save you some reading on here now. I hope you have found this series to be helpful and informative, once again if you have any questions or comments please don’t hesitate to post them here.