YSlow Add-on Example
What we have here is an overview of the YSlow performance tool and some website performance best practices.
The YSlow FireFox Add-on provides a performance scorecard and details about the components and load times for web pages. OC runs YSlow checks against our projects because it gives a quick overview of how the site is performing and an easy way to understand what needs to be improved.
The YSlow's Help page already beat me too explaining why these are best practices. However, in some cases the "how to fix it" or "why'd I get an F" is generic or absent. This post covers some practical insights and lays the groundwork for future performance related posts.
The YSlow add-on analyzes 13 performance rules and spits out a letter grade for each factor, plus an overall page score. Most of the rules are aimed at reducing the number, size, or time of transfers between the server and browser.
The goal should be to score A's or B's. Yahoo's help site explains each of the rules in some detail, plus additional best practices, for a total of 34 performance measures in 7 categories.
In my experience, the CDN is an expected "F" because it's neither free nor necessary in most cases. The rules for duplicate scripts, avoid redirects, CSS expression, and DNS lookups are usually easy A's.
Reducing the number of CSS file transfers isn't always a snap when you're using modular code. Enter CSS aggregation, which isn't explicitly mentioned, but is built into some CMSs like Drupal.
The low-hanging fruit on the web server side include Gzip, expires headers, and Etags. These can be set by adding appropriate directives into the web server's configuration files. I intend to provide samples and guidance on this in the future.
Of course, there will be instances where pages require a lot of file transfers and cause a noticeable lower score. Remember, YSlow is just a guide. The important thing is to at least understand the best practices and know when/why rules are passed or violated.