I don’t know how interested you are in the tools to measure page performance, but I have been doing some research and thought I would share some of what I found. This is not a strategy for performance optimization, just a diversion I had in my daily fight in this game of milliseconds.

I was given page load test results from an online tool named PingDom. This tool listed all of the images referenced in the tested page’s external CSS file as part of the page load test. All of the images referenced in the CSS selectors aren’t actually used on the tested page. In fact the images belong to many different pages, but they all share the same CSS file (common scenario right?). So why are they all listed in this test. Well I didn’t think that the browser Guru’s would let this happen, but I’m a developer so I can’t assume right? In my mind I know this isn’t so, having looked at HTTP streams daily I know this isn’t happening in the browser. How do I prove it? Do browsers download all images referenced on a CSS file, even if they aren’t needed?

My first area of investigation was to check HTTP traffic. Even though I have never seen this behavior I had to view it again with this purpose in mind. First I opened a page that I knew had background images defined in the CSS that aren’t used on the actual page. I monitored the HTTP traffic starting with a clear cache in Firefox and IE using Fiddler, Firebug, and HTTPFox. I did not see any of the unused background images requested in the HTTP log. One point for me zero for PingDom.

There is no way that the extra images are requested if they aren’t in the HTTP traffic, yet I press on. My second test was a little more involved. I created an ASP.net file that would log visits to itself. In the file I added a Literal control to display the log text in the browser.

In the code behind I added the following code. You can use a simpler logger, this is just something I had.

public partial class test1 : System.Web.UI.Page
{
//THIS IS ONLY FOR TESTING
//Don’t use this logger in production
//Remove logging methods to static class and use locks,
//private consturctors or some other means
//of achieving thread safegy to create an actual production
//logger
string newLine = "\r\n";

protected void Page_Load(object sender, EventArgs e)
{
string path = MapPath(@"text1.txt");
// This text is added only once to the file.
if (File.Exists(path))
{
LogEntry(path);
}
else
{
CreateLog(path);
LogEntry(path);
}
using (StreamReader reader = File.OpenText(path))
{
//When you check this file it will log a hit to itself, so
//you have to check for entries
//before the last entry to see if the file had any activity.
//If you only see an entry for you
//manually opening the file then you didn’t have any
//activity. Could move this to a separate file.
ltLog.Text = DumpLog(reader);
}
}

public void CreateLog(string path)
{
using (StreamWriter writer = File.CreateText(path))
{
writer.WriteLine("Log Created ");
writer.WriteLine(DateTime.Now);
writer.WriteLine(newLine);
}
}

public void LogEntry(string path)
{
string logEntry = "File Requested.";
using (StreamWriter writer = File.AppendText(path))
{
Log(logEntry, writer);
writer.Flush();
writer.Close();
}
}

public void Log (String logMessage, TextWriter writer)
{
writer.Write(newLine);
writer.WriteLine("Log Entry : ");
writer.WriteLine("{0} {1}", DateTime.Now.ToLongTimeString(),
 DateTime.Now.ToLongDateString());
writer.WriteLine("  :{0}", logMessage);
writer.WriteLine("-------------------------------");
writer.Flush();
}

public string DumpLog(StreamReader reader)
{
String line;
StringBuilder log = new StringBuilder();
while ((line = reader.ReadLine()) != null)
{
log.Append(line);
//Format for HTML display.
log.Append("<br/>");
}
reader.Close();
return log.ToString();
}
}

Next, I created a simple CSS file (test1.css) that included two class selectors. One to select our logging ASPX page and the other to call an actual image:

.noGo
{
width:612px;
height:612px;
background: url(test1.aspx);
}
.doGo
{
width:612px;
height:612px;
background: url(test1.png);
}

Now a simple HTML page (test1.htm):

<head>

<title>Test CSS File Downloads</title>

<link href="test1.css" type="text/css" rel="stylesheet" />

</head>

<body>

<h1>Hello from Test 1</h1>

<div></div>

<!-- <div class="doGo"></div> -->

</body>

</html>

OK, we are all set up. Now I opened my browser and opened test1.htm. My test1.png is visible. I open the test1.aspx and I only see one log entry for my current visit to the page, no other traffic hit it. Now I uncomment the doGo div and run my test1.htm again. My test1.png is still visible. I once again check the test1.aspx page and low and behold there is the extra entry from the CSS reference. So there, only the files that are needed to display a page are pulled from the CSS file. Use of time? 30 minutes. Satisfaction from knowing for certain that you are right? Priceless. Plus, it doesn’t hurt to exercise your mind.

Not to be happy with just proving a point, I wanted to know why PingDom would list everything like that. Was it a bad test? Maybe its just what they do (not sure if this was a fluke or normal). OK, here is where this post starts to really say something. After some searching, I did find something that pointed me in a direction that I agree with. I watched a video, Scott Ruthfield, “Jiffy: Open Source Performance Measurement and Instrumentation – http://blip.tv/file/1018527.  He explained that Pingdom uses a custom client to measure load times. This means that it is not getting a real world responses because they don’t use any of the major browsers to do the test. Well that explains enough for me.

After doing all of this research, I decided to look more in to page performance and tools to help me achieve better performance. If PingDom or similar services don’t give real results, who does. I have played around with a few tools and I have some favorites. After researching my tools and a few other, none of these tools, accept a couple, can replace a paid service that can do an actual profile of the site, but they work for me in development and they help me to identify potential problems. To really get close to accurate results the server has to be sent maybe thousands of tests from multiple browsers accessing various pages on the site. This can be expensive if you use third party tools and difficult if you use open source tools, not to mention it will put a serious load on your server so you may not want to hit your production servers with this type of test.

Firebug with YSLow extension – I generally use this tool to get a general feel for what the browser is doing in Firefox.

Fiddler – this is the tool that I use in IE.

HTTPFox – I also use this in Firefox, just as a confirm what I’m seeing type tool.

Jiffy and Episodes – I haven’t really played with them yet, but they looks like they may do what a paid service would do. Although, these tools may be better served as just the front end instrumentation with a paid service providing data collection and analytics. These tools are basically JavaScript libraries and they do require you to instrument pages with their JavaScript beacons. These scripts basically record timing data from actual real world visitors hitting your site. No automated tests or arbitrary servers pounding the site, they give you a picture of the download times your actual visitors are experiencing. Of course adding the JavaScript to instrument pages would add a little overhead to the pages, but it may be worth it to get this data. I already have an idea that would allow me to dynamically add and remove the scripts, so I can switch on testing when I need it, so tools like these may be a great addition to my testing arsenal. Even without instrumentation, Episodes can provide load times and they have a Firebug extention that you can use to view the time on your site. Jiffy has a Firebug extention too, but I couldn’t get it to work (maybe it needs the instrumentation, too tired to find out right now).

Well, I will leave it at that for the moment. Watch your HTTP and happy testing.

View more posts in: Performance Optimization