Improve Website Speed with Yslow

With YSlow, you can easily spot areas to boost the speed of your web site. YSlow is a Firefox plugin developed by Yahoo. I use it in nearly every web site performance case I handle. This is the first post in a series covering YSlow and how we use it to speed up our client’s web sites.

Over the next couple of weeks, I will dissect the Yslow recommendations from the standpoint of a system administrator. For example, we all know we should optimize our images but what impact does that have on your server? By breaking down the results, I hope you can gain a good understanding of how performance requires optimization at ever level of your sites operation. Just throwing bigger hardware at the problem rarely yields the benefits one expects.

Slow Web Sites

I am still trying to find the original paper, but I’ve seen cited many times that the current wait time for a page to load is down to 2 seconds. Once your page takes longer than 2 seconds, you start turning away visitors. With e-commerce sites, you could be losing customers.

I know I certainly bolt from a slow loading site. No matter how great your content, if you site is slow visitors will leave. In Linux server support work, I’ve seen web site traffic increase by 20-30% within a week after performance issues are resolved. So having a fast site is important. I’ve even seen reports that faster sites rank better in the search engines but that is an issue for another blog post.

Getting YSlow

You need to install two plugins: FireBug and YSlow.

Firebug is a tool used to inspect HTML, CSS and other elements on a page. If you are a web developer, I think it is a must have tool. I don’t do too much web development and I find it works great for identifying the right elements to modify in the HTML code or CSS.

Yslow analyzes web pages and recommends improvements. YSlow grades web page based and provides tools for performance analysis, including Smush.it, which is a great tool for optimizing images.

Both tools are FireFox plugins, so you will need the latest version of Firefox as well.

Using YSlow

There are plenty of Yslow tutorials online, so I am not going to repeat those efforts. Just find one you like and that makes sense to you since we all learn differently. After installing YSlow, you should see in in your bar at the bottom of the browser. Just click on the speedometer to get a report.

YSlow Grade

When you first run Yslow, you will get a grade. Don’t stress if you do not get an A. As we will cover in other posts, there are many reasons why you may get a low score but still be doing everything right. While the grade is helpful overall, I don’t pay too much attention to it. I’ve seen people obsess about getting an A when they could be optimizing their databases instead.

Yslow Recommendations

Yslow provides recommendations in several areas. Most of these are related to site design and programming:

• Fix Slow Loading Websites – Yslow Image Tips
• Faster Loading Websites – Yslow’s JavaScript Tips
• Speed up Your Site with Yslow Server Tips
• Content
• Cookie
• CSS

(I will be adding links to each section as they become available.)

What’s Next?

Over the next couple of weeks, I will cover each of the recommendation areas plus some bonus tools. For today, I recommend you get your YSlow installed because I will be covering server level issues later this week.