Improving Web Site Performance and Scalability while saving money

Robert Boedigheimer is talking on this and other topics at the DevWeek 2011 conference in March. Full details of all the 100+ sessions and workshops at DevWeek are available at www.devweek.com.

As a web developer, when I used to hear about web site performance I always immediately thought about how to make my server side ASP.NET code run faster. I have used data caching with the ASP.NET Cache object in the past to reduce database load, increase fault tolerance, and improve performance. As I studied recent suggestions on performance improvements, I was very surprised to learn that on most web sites between 70-90% of the time spent waiting for a page on the average web site is actually due to the number of HTTP requests required for images, JavaScript, and CSS files. In this article we will focus on tools and techniques that can dramatically improve performance for a web site, while saving money by reducing server load and bandwidth requirements.

Measurements

The first step in any performance optimization project is to understand where time is being spent on a web site. Fiddler is a free tool that has a timeline feature that shows all requests made to a web site and how long each one took. It is a very eye opening experience the first time you visit your web site and see that a single page request often makes nearly 100 HTTP requests to the server for JavaScript, CSS, and images! A good practice is to save an archive of a Fiddler trace before any performance improvements are made, and then save another afterwards to compare. Another very helpful service is provided by vendors like Keynote which measures site performance from agents across the Internet at selected intervals each day. These measurements can be compared to other major Internet retailers, and show historical timings for a web site.

Http Compression

One of the best performance improving techniques is to take advantage of compression. Everyone knows how .zip files work to compress files and save space, the same concept is built into web servers and web browsers. Virtually all modern web browsers support the ability to decompress content. When we enabled compression on our web servers, we reduced our bandwidth usage by 50% and our pages were 25% faster. IIS web servers can compress both static files (JavaScript, CSS, HTML) and dynamic pages (.aspx), configured using the httpCompression element in the web.config file. Smaller files are simply delivered faster over the Internet.

Content Expirations

Browsers have a local cache location where they store copies of images, JavaScript, and CSS files from web sites. Proper use of a browser’s cache can greatly improve performance. Unfortunately, by default files stored in the browser cache cannot just be used the next time a user visits the same web site. The browser will visit the web site, download the web page, and may see the same files included on the page, but the browser won’t be sure if those files are still “fresh”, so it must contact the web server for each file and ask if the file has been updated. Just checking for each file can still take a great deal of time, and causes load on the web server. An easy way to avoid this problem is to take advantage of expirations. With expirations you just specify (in IIS configuration) how long after the browser first gets a file before it has to check back with the server for freshness. Used properly, a return visitor to your web site might only have to talk to the web server for your web page, and avoid the other 90+ requests for the other files it already has locally in the cache!

Minification and Consolidation

Most modern web sites have many different CSS and JavaScript files (including jQuery plugins, etc) that make up a modern web page. Since browsers have a limited number of connections that can make simultaneously to your web server, it can take a good deal of time to download all of the files. The files also are much larger than they need to be due to comments, whitespace, etc. Luckily there are tools like AjaxMinifier and YUI Compressor that can reduce the file sizes through minification. If you have ever looked at JavaScript files that are all on one line with no spacing, you have seen what minification does. Once these files are minimized, they can also be consolidated into a single (or a couple) files so that the browser only has to make a single request to the web server to get them. We recently used minification and consolidation at build time for our web site to reduce the time required to get our home page by nearly 50%!

CSS Sprites

Another great way to reduce the number of requests needed to get a web page is to combine multiple small image files into a single larger file and use CSS to “index” into that larger image to show just the individual images you need for a web page. There are many tools available that can take a series of images, combine them into one, and even provide the necessary CSS styles to access each image. We were able to combine nearly half of the images on our home page into a single image.

Image Optimization

Modern web pages also contain a large number of images. There are many ways to optimize image files to reduce their size via compression and other techniques. Most JPEG photo images can be reduced by 50% or more without any noticeable impact on image quality. Standard imaging programs like Photoshop provide built in mechanisms to compress JPEG images at various levels. Skeptics often doubt that this can be done without sacrificing image quality so I often create various images at different compression amounts, mix them up, and show them next to one another. People will be convinced that a given image looks better or worse than others, only to discover that when done properly they can rarely tell the difference in quality even though the file size is substantially smaller. Since image files are downloaded so often, simple optimization can not only improve performance for your users, but also reduce you bandwidth costs.

Data Caching

ASP.NET has always provided the Cache object which is great for storing data on the web server that does not change often. When converting our web site from ASP to ASP.NET we took advantage of the Cache to store just our products and category data. The ASP site would always query the database each time a user looked at a product detail page. The ASP.NET site would call the database just once each day, and would keep the results in the Cache object. This simple change cut 50% of all of our database queries, nearly 73,000,000 queries a month! Not only did that make the pages faster because they no longer had to wait for the database response, but the pages could not work even while the database was down.

Performance Testing Tools

YSlow and Google Page speed are two tools that can visit a web site and recommend changes that should be made to improve performance using standard techniques like those described above. They are very helpful for demonstrating what improvements should be made, and can help justify that they are proven industry best practice techniques to site stakeholders.

Learn more at DevWeek

Do these techniques seem interesting to you? Do you want to learn more about how they are implemented? I will be presenting “Improving Web Site Performance and Scalability While Saving Money” at DevWeek 2011 (http://www.devweek.com/) which will go into detail about these and many other techniques. Most of the techniques are free and simple to implement. Do you want to make your users and your boss happy at the same time? Sign up for the conference, stop by, and learn how to do both!

You might also like...

Comments

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Linux is only free if your time has no value” - Jamie Zawinski