Loading Form...
Sep 24, 2010 | 5 minute read
written by Armando
Site performance is a key factor in turning virtual window shoppers into paying and loyal customers. In fact, a Get Elastic post on performance according to some recent research, online shoppers will only tolerate about two seconds' worth of page load time. Shoppers are unlikely to return to poor performing sites, and consumer expectations have been rising steadily since 1999.
A joint Bing and Google study demonstrated the negative impact slower loading search engine results pages had on user experience. Users became less likely to click and less likely to refine a search query when page load times increased by as little as 450 milliseconds.
With so much at stake, it's vital to reduce page load times while still doing everything possible to include great site aesthetics, video, and graphics. Even if you're not a developer, it's important to understand what might be dragging your page load speed down.
Measuring Page Performance
The first step is to measure your current page performance, and there are a number of tools that should be in your measurement arsenal.
The first of these is WebPagetest. This free service gives you a waterfall view of your site's performance, along with other reports. This resource will give you an idea of which page dependencies are the biggest hold-ups to your site performance. Knowing where the problems are is a huge part of working toward a solution.
In the example above, image files were some of the slowest loading page items and accounted for most bytes of data required for the page.
Next, you will want to install 3 Firefox plugins designed to measure page performance or review code. Firefox is, perhaps, the best web browser for designing, developing, and updating a website because it provides so many great add-ons that make it easier to learn what a site is doing or how it is coded. So if you're not a regular Firefox user, you will want to download it at least for monitoring site performance.
The first Firefox add-on to get is Firebug. Firebug is the premier, free site inspection, debugging, and analysis tool. It will do a lot more than just help with site performance, and it is a prerequisite for the next two add-ons you'll need.
Once Firebug is installed on your Firefox browser, add YSlow from Yahoo!. This add-on builds on Firebug to analyze your web page, comparing it to known performance best practices. YSlow returns an actual grade for your site along with several suggestions for improvement.
Next, get the Google Page Speed add-on. This tool is very similar to YSlow, with a slightly different rule set. It is a very good idea to compare results from these two tools to learn what areas of site performance are the most critical.
Now that we have some means of measuring a site's current performance, we can start to discuss what you can do to boost your own page's performance. Of course, each site is a unique combination of files, dependencies, and conditions, but these tips are generally a good way to get better performance.
1. Make Fewer HTTP Requests
Steve Souders, a world-leading expert on site performance, starts his book High Performance Web Sites: Essential Knowledge for Frontend Engineers with an HTTP overview, perhaps because HTTP requests can be a leading cause of slow page load times.
You can think of an HTTP request as a conversation between the browser and the web server. The browser requests a file or URL and the web server responds with the requested data. Generally speaking, it is better for performance to make fewer requests even if those requests are for larger files.
Specifically, try these 3 techniques to cut down on HTTP requests.
First, load JavaScript files with LABjs. LABjs is a free tool that loads JavaScript files in parallel, meaning that your pages could load much more quickly, especially if you have a lot of JavaScript files on your site.
Next, when possible concatenate style sheets or other files. Simply put, consider having one or two larger cascading style sheets instead of several smaller files.
Third, use image sprites. A sprite is a compound image that contains all of the various states of variable site graphics. For example, take a look at the menu in Apple's online store. When you hover over one of the links you are encountering a sprite. Rather than loading lots of images, Apple is loading one image and reusing it.
2. Optimize Images
Image files can be a major contributor to slow loading pages, so after your designers have created your page graphics, do your best to optimize the file size and format of each image. For example, if you're designer used GIF files (which should probably be avoided) try converting them to PNG files. Often this can result in a file size savings, especially when you're using transparency. PNGs are much higher quality than GIF too.
Also, consider using Pngcruch, an image file optimizer that can squeeze every wasted bit out of a PNG file. In many cases, a "crushed" PNG will be the smallest image file you can find.
For product photographs or similar you may find that JPG files offer the best balance of image quality and file size.
3. Use a Content Delivery Network
A content delivery network is essentially a series of data depots that store copies of some files. When a user makes a request the requested data is pulled from the depot nearest to the client, shaving milliseconds off of site load times.
*Linda's note: There are a number of free and enterprise CDN's out there like CoralCDN (free), Akamai and Strangeloop Networks.
This post was contributed by our guest columnist Armando Roggio. Armando is a journalist, web designer, technologist and the site director for Ecommerce Developer.