Improve the Performance of Your E-commerce Site, Part 1
Your website’s performance and speed are a huge factor in your online success. Customers hate to wait for slow-loading pages, and slow sites also get a hit in their search engine rankings since Google started using page speed as a ranking factor last spring. Fortunately, there are almost always things you can do to improve the performance of your online store without losing all of the bells and whistles your customers want.
Back-End or Front-End?
Performance problems generally fall into two buckets. Back-end problems have to do with the fact that pages are typically generated “dynamically”, at the time that a browser calls for it, with a good bit of their information coming live from databases or other data stores. If the database is large, not well-maintained, or unoptimized, you can have back-end problems that cause your site to be slow. On the other hand, you may have front-end problems that have nothing to do with the back-end. The first key is to figure out whether your problems are back- or front-end. If you haven’t optimized your store yet, you’ll probably have both.
Consider the page shown here. There are a number of elements that come from the database and are pulled each time the page is loaded. These are our back-end elements. They include the category title tag, name, “blurb”, and list of subcategories; each subcategory’s name, blurb, and thumbnail image; the products assigned to the category and each ones details (name, price, availability, etc). It even loads customer session data into a “minicart” display at the top right. That’s a lot of data, and depending on the software and programming, may be a lot of different calls to the database server.
The best way I’ve found to determine the root of your problems is to make a static copy of the dynamic page you want to optimize. For instance, if you’re SFCable.com and you want to optimize your Networking Cables category page, open it in a browser. Then view the page source, and copy-and-paste into into a text file. Upload it to your server as a complete static page in the same location, so that it’s accessible by a URL such as http://www.sfcable.com/networking-products-copy.html. Now you have an exact copy of the page except that it’s not dynamic and isn’t pulling information from your database. If you compare those two URLs, you can get a feel for how much of your page speed problems are coming from back-end sources, because both pages will have the same front-end problems, but only the “real” dynamic page has the back-end problems.
Tweaking the Front-End
Fixing front-end problems is well-documented. It can be very technical, but it’s pretty straightforward even if it is tedious. Two of the easier resources to diagnose front-end problems are the YSlow extension to Firebox for the Firefox browser, and the website WebPageTest.org. For the most part, they analyze the same factors and provide you with a grade (A is good, F is bad, just like you were back in Algebra II) for each factor. Below is an image showing the grades for one of our clients initially and after a few small adjustments (about 15 minutes of work):
Yahoo provides a wonderful article titled Best Practices for Speeding Up Your Web Site that gives a lot of details you can use to help improve the speed of the front end of your e-commerce site. The highlights are:
- Use a CDN – Use a CDN, short for content delivery network, to host your front-end components such as graphics files and Flash components. A CDN uses distributed servers so that customers in different physical locations receive files from the server closest (geographically) to them.
- Server Configuration – several recommendations fall into web server configuration, such as setting cache-control and expires headers, using mod_deflate to gzip components before sending them to the browser, and configuring ETags. If you’re not familiar with server config, it’s best to have your host help configure these settings.
The list goes on and on, and I won’t repeat all of the possibilities here. But if you’re interested, read through the Yahoo! document in detail or pass it along to your developer or webmaster. It’s a gold-mine of information for optimizing the front-end of your website.
Next time I’m going to discuss how to optimize the backend, and how that can be more complicated depending on your shopping cart and catalog software, and your database server.
How does your site fare? Run it through WebPageTest.org and see what your grade is. If you’ve already optimized your site, what gave you the most bang for your buck? Drop a comment below with your experiences.
Tags: Performance, Speed, Testing