Experiences, escapades & experiments with Software Quality Assurance at GoDaddy.com

Analyze Web page Performance with YSlow

The Yahoo! Developer Network has a strong voice within the Web development community largely due to great contributions of libraries and best practices. A recent contribution to community from Yahoo! is YSlow. YSlow is a FireFox add-on that analyzes web pages to tell you why they're slow, based on Yahoo! rules for high performance web sites. These Exceptional Performance guidelines come from theYahoo! Exceptional Performance team who evangelizes best practices for improving web performance. The Exceptional Performance site claims that YSlow “has helped improve the performance on over 50 Yahoo! properties by 25-50%”.

Running YSlow against your site will yield pretty graphs like this:

image

And most importantly will grade 13 categories on your site, give you an overall grade, and provide recommendations for categories with bad grades:

image

Notice that this site receives a performance grade of “D” based on Yahoo performance standards! If your site looks like this don’t feel bad, I noticed that the Exceptional Performance site also has a grade of “D”. Some of the rules are awful hard to conform to once your site infrastructure has already been built.

Here is the Yahoo! current list of rules for Exceptional Performance:

Content

  1. Make Fewer HTTP Requests
  2. Reduce DNS Lookups
  3. Avoid Redirects
  4. Make Ajax Cacheable
  5. Post-load Components
  6. Preload Components
  7. Reduce the Number of DOM Elements
  8. Split Components Across Domains
  9. Minimize the Number of iframes
  10. No 404s

Server

  1. Use a Content Delivery Network
  2. Add an Expires or a Cache-Control Header
  3. Gzip Components
  4. Configure ETags
  5. Flush the Buffer Early
  6. Use GET for AJAX Requests

Cookie

  1. Reduce Cookie Size
  2. Use Cookie-free Domains for Components

CSS

  1. Put Stylesheets at the Top
  2. Avoid CSS Expressions
  3. Make JavaScript and CSS External
  4. Minify JavaScript and CSS
  5. Choose <link> over @import
  6. Avoid Filters

JavaScript

  1. Put Scripts at the Bottom
  2. Make JavaScript and CSS External
  3. Minify JavaScript and CSS
  4. Remove Duplicate Scripts
  5. Minimize DOM Access
  6. Develop Smart Event Handlers

Images

  1. Optimize Images
  2. Optimize CSS Sprites
  3. Don't Scale Images in HTML
  4. Make favicon.ico Small and Cacheable

Mobile

  1. Keep Components under 25K
  2. Pack Components into a Multipart Document

That’s quite a list of rules! If these rules find issues for your site but they require some serious changes, just keep in mind the possibility of a 25%-50% increase in performance. Put this tool in your Web testing toolbox, it will find performance defects for you.


The One XSS Attack Vector Your Filter Probably Missed

If your web app is fighting XSS by filtering and validating input based on character phrases like '<script', 'javascript', 'onload', and 'onclick' then you might want to add the following attack vector string to your XSS test case.

<DIV STYLE="width: expression(alert('hello world'));">

This works on IE7.0 and IE6.0 by exploiting the CSS expression function to introduce JavaScript calls.  There are a boatload of many different XSS attack vectors and many of them are designed to bypass the common input filtering.  Check out this list for the most comprehensive source of XSS evasions that I found online.  It includes the one above.

The reason I singled out this particular attack vector is because it does not make use of either '<script' or 'javascript' and it fairly short and easy to test with.  I have found many sites, particularly forum and blog sites that allow users to enter their own HTML comments, posts or signatures.  Most of these simply try to filter out the bad stuff by removing keywords like 'javascript' and blocking '<script' tags or some variant of '<script'.  Because they are allowing a user to enter HTML they can NOT do the proper protection of encoding the output before displaying back to the browser.  This opens these sites to a never ending onslaught of trying to catch all the different variations of escaping and encoding input with injected script.

As testing goes, I have found this particular test attack vector above to be very telling of how thoroughly the input validation has been thought through.

If you have a favorite XSS test string, post it here and share it with the world.


How to View JavaScript Errors in Safari 3.x

It's been a long time running mystery to me how to view JavaScript errors in Safari versions prior to 3.x. I finally dug in again the other day to figure out how to catch these errors, which is oh-so-important for browser compatibility testing! Turns out it's no so hard anymore with Safari 3.x. Here's how:

In the top menu bar select 'Develop' and then 'Show Web Inspector':

image

This will open the 'Web Inspector':

image

Now, go ahead and test. As JavaScript is used you will see the file names listed in the 'Scripts' node. If an error is present you'll see a colored icon next to it. In that icon will be the number of JavaScript errors present:  

image

To view the error details, select 'Console' in the left pane:

image

The console will display the errors in the right pane: 

image


Link Checking Gone Wild

Web links. We've got a lot of  them here at Go Daddy. Too many to test manually, even with our fairly large QA team.

In the past we used the tool Xenu to do link validation, which is fast and best of all free. However it doesn't do form posts. This really limited us from getting into the depths of our sites since many of them require authentication. We needed something better...

About a year ago I scoured the search engines looking for something that filled our needs. What I found was:

  • The seemingly good link validators are attached to to a test tool suite, and those test tool suites cost a lot of money.
  • The inexpensive and free tools lack needed features (form posts, SSL support, works with thousands of links, etc).
  • Most were slow as a turtle in molasses.
  • Many that had the needed features didn't multi-thread which left the GUI in a locked and half painted state leaving me wondering if the scan would ever complete.

After wading through all the junk, we ended up choosing Web Link Validator (WLV) from Rel Software, to help clean up and keep clean our many Web links strewn throughout our many Go Daddy Web applications.

How many links you ask? We are scanning for, and validating an average of 40,000 links a day!

To pull off said feat... One, it's automated, and two we rely on our home-grown automation ecosystem: TestAutoSmoke; a server that queues, delegates tests to multiple test boxes, and then sends out reports on completion. The overall process looks like this for the most part (click for larger view):

image

Pretty exciting and cool stuff eh?!

We've learned a lot along the way and I'm glad I didn't go with my initial thought of "let's just build our own". After seeing and using the features that WLV provides it's obvious that good link checking is a complex process. It's not as simple as scanning a page for the HTML <A> tag and making a request to that URL.  If you're looking for a link checking tool, here are a few things to consider before you make your decision:

  • How is the performance:
    • Does the GUI lockup?
    • How fast can it scan your site? (I've seen WLV do 28,000 links in 2 1/2 hours)
  • Does it allow form posts?
  • How many forms can be configured and how deep?
  • Does it have SSL support?
  • How many links can it scan before it runs out of memory or croaks?
  • Does it allow lists of links for inclusion and exclusion?
  • Does it allow retries on broken links?
  • Does it find various link types:
    • Links embedded in CSS?
    • Links embedded in JavaScript (<script>)
    • Links embedded in HTML events (onMouseOut)?
    • RSS links?
    • Absolute and relative path links?
  • Does it detect custom error pages that return a http status of 200 as broken?
  • Does it scan all file formats?
  • Does it allow you specify only the formats you want to scan?
  • Does the resulting report format fit your team or company needs?
  • Can it get to pages that require JavaScript method calls to get there?:
    <a id="ctl00_ContentPlaceHolder1" href="javascript:__doPostBack('ctl00$Content')" mce_href="javascript:__doPostBack('ctl00$Content')">Go Here</a>
  • Does it scan links on error pages?

As far as I know, a perfect tool doesn't exist (yet?). For example, WLV doesn't do the last two bullet items listed. But still, we are content with it and it finds a LOT of broken links/defects!

If you're shopping around for a link validation tool give WLV a try, it has has a free 30 day trial. There is also REL Link Checker Lite for those who don't need all the features or ability to save complex scan configurations. Happy Testing!


Welcome to BugCrushers!

Glad to see you made it this far. I'd like to introduce the new weblog for the quality and testing team at GoDaddy.com. We plan on using this to share some of the experiences and the learning that we have done over the years and to help foster the ‘quality karma’ attitude. This started with a home-grown phrase ‘Friends don’t let friends not unit test.’ Basically the attitude of caring about quality will bring quality things to you.

We will be blogging about our tools, testing techniques, automation, programming, team building and other things of interest to the quality community.

As our company has grown (we have 20x the number of employees now compared to six years ago) we have found hiring the right people is a key part of our success. This blog will be an excellent way to keep tabs on our quality happenings as well as stir up interest in joining our team. The only thing left to do is to ask you to participate by commenting on the articles (all comments will be read and appreciated) and if you are interested in being part of our company, check out these jobs and careers.