Why do you need tools like YSlow?
The key to evaluating your Ning Network’s speed is understanding that every visitor to your social network has a different experience. Gauging the speed of your main page based on your own experience can be misleading, because visitors to your social network use different internet connections with different web browsers on different hardware. The main page might load fairly quickly on your T3 connection, but it will be an entirely different story on a member’s DSL connection.
For this reason, page size is the best indicator of your Ning Network’s performance. Smaller page sizes mean universally faster load times. Your main page should not be more than 500 KB in size – on a 128 Kbps DSL line, you can expect a page to take at least 30 seconds to load for every 500 KB.
This guide will introduce you to YSlow, a powerful diagnostic tool for the web browser Firefox. YSlow won’t just tell you the size of your Ning Network’s main page. It will provide a detailed breakdown of what’s weighing down your main page most, give your main page a report card, and offer suggestions to trim down your page size and improve your grade.
Getting started: Install Firebug and YSlow
To get started, first add the right diagnostic tools to the web browser Firefox. If you don’t already use Firefox, you can download a copy here.
- Install Firebug. Before installing YSlow, you need to install the Firefox extension called Firebug. Firebug is a powerful and free tool that lets you edit, debug, and monitor CSS, HTML, and JavaScript on any webpage. You can download Firebug here.
- Install YSlow. YSlow is an add-on to Firebug that allows you to analyze your social network’s performance. YSlow rates your social network on 22 different recommended performance rules and assigns an overall performance grade to the page you are currently viewing. You can add YSlow here.
- Restart Firefox. Once you restart Firefox, your new diagnostic tools will be automatically installed and ready to go.
You should now see YSlow in the bottom right corner of your browser. Click the YSlow icon to open it:
Next, configure YSlow so that it’s perfect for your Ning Network. By default, YSlow grades your social network on 22 different categories. Many of these won’t help you optimize the main page of your social network and should be ignored. In the latest version of YSlow, you can create your own Rulesets and choose to be graded only on the categories relevant to your Ning Network. Here’s how you create your own Ruleset:
- Click the “Edit” button in the middle of the YSlow console, next to “Rulesets”
- Click “New Set” and enable the same rules that are enabled in the screenshot below
- Click “Save” and name your Ruleset something like “Ning Network”
Now you’re ready to run YSlow on the main page of your social network and evaluate its performance.
Get your Report Card
First, go to your Ning Network and open up YSlow. Click the yellow “Run Test” button, and you’ll see a progress screen while YSlow analyzes your social network. Once it completes, you will see an overall letter ratting for your social network, along with a letter rating in each category that you enabled during configuration. Clicking on any of the ratings will explain the category and provide additional details:
The important thing here isn’t your letter grade — it’s identifying the places where you can improve performance. For example, if you receive an “A” overall but get a “D” in making fewer HTTP requests, you should look into simplifying your main page and making fewer HTTP connections. For a detailed explanation of each of YSlow’s best pracitices, see this documentation.
Pinpoint the components that are weighing you down
Your report card is a great way to see which best practices you can implement more effectively. But for a detailed breakdown of what’s going on, you’ll want to click the “Components” tab. This is where you can see the total number of components being loaded on the page, and the total size of the page itself. You can also sort components by their size and the time they take to load, allowing you to track down the troublemakers:
Another useful tool on YSlow is Statistics, which breaks down the total main page size by type of component. It also shows you how heavy your main page is to first-time visitors (Empty Cache) and how heavy it is to returning visitors (Primed Cache). Remember that “heaviness” and “weight” are just words to describe how big the size of a page is in KB.
Roll up your sleeves!
Nice work — you’ve added diagnostic tools for your Ning Network, you’ve received your report card, and you’ve pinpointed those components on the main page that are weighing it down. You’ve also calculated your main page’s total weight — its size in KB. Now it’s time to optimize performance and trim your main page down to a maximum of 500 KB.
