How to Improve the Performance of Your E-commerce Site

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.

There are also a lot of front-end pieces that have to be loaded. The website has a lot of graphics, as well as external CSS and JavaScript files. There’s an external JavaScript file to be loaded for the McAfee Secure trust mark, and another one for the live help script. Each of these has to be downloaded to the browser at least once (on the initial visit to the site, assuming this is the landing page).

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.

Front-End Performance

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 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:

1. Reduce requests – Reduce the number of http requests by combining elements into a single file where possible. For example, you can often combine all of your CSS stylesheets into one file, even if you’re using libraries such as JQuery and other plug-ins. You can combine all or most of your JavaScript into a single .js file. You can even combine images and use the CSS Sprite technique to display the necessary part of the image at the right location.
2. 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.
3. 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.
4. Smart use of eternal files – Rather than including all of your JavaScript and CSS code in the <head> section of your page, save the code off to external files and simply link to those files. Then the individual files can be cached by the browser instead of loaded each time from each page’s source. You should also minify these files, which (depending on the script) does things like reduce the length of variable names, remove comments, and remove extra whitespace. For convenience and safety, make sure to keep a non-minified version on the server under a different filename for when changes are needed.

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.

Back-End Performance

The elements you want to check for back-end performance vary to some extent depending on the shopping cart you use. However, before we take a look at cart-specific issues, let’s discuss some areas of concern that are common to most shopping cart software.

Is Your Software Up-to-Date?

While sometimes it’s perfectly fine to operate under the “if it ain’t broke, don’t fix it” principle, that’s not always the case when it comes to software. You’re probably not still running Windows 3.1, right? So why would you trust your income to software designed in 2001?

Software is often upgraded to add new features, but it’s also often done to improve the software speed. In addition, you may be gaining significant advancements such as PA-DSS compliance.

Of course, you need to upgrade smartly. Create a separate development site, and upgrade to the newest version of your software package (and any add-ons) and then TEST, TEST, TEST.

Keep Your Data Clean

Your e-commerce site is not your garage or your attic, a place to put things that you may decide you use “some day”. Delete old data that you no longer need! Examples are permanently inactive products, orders that have already been downloaded to your fulfillment software, etc. Sure, you should keep a backup of the data – but elsewhere. Copy it to a second database or export to flat files, and let those be your data “attic” instead of your website’s main database.

Test Your Add-Ons / Plug-Ins

If you have third-party add-ons or plug-ins, test to thoroughly to make sure they aren’t significantly affecting your site’s performance. As a Miva module developer myself, I know for certain that add-on products aren’t as significantly tested as the main shopping cart package itself. Most third-party developers don’t have the staff or time for load-based testing.

Whenever possible, test your website’s responsiveness with the third-party plug-in active, and again with it inactive or uninstalled. If the difference is significant, you need to consider whether the added functionality is really worth the compromise in speed. Or perhaps you can find an alternative plug-in that works better for sites with higher traffic.

Tune-up Your Database

It’s possible that the database itself may need some fine-tuning for performance reasons. Although most major commercial e-commerce software has already been optimized, if you’ve added custom programming or plug-ins, those may not be as finely tuned. In fact, late last year I was working on a site whose previous developer had made several custom modules, and one of the tables had no indexes on it WHATSOEVER. Their “advanced search” form was taking 45+ seconds to return results. Simply adding a single index to that table in MySQL took the query down to 0.008 seconds.

If I remember how to calculate percentages correctly, that’s a 5625% improvement. It only affected the advanced search functionality of their site, but imagine if the entire shopping cart had been built by this one developer, and he’d left off major indexes? The site would have slowed to a crawl all-around, and the company would be out of business today.

Hosting and Hardware

Don’t be a cheapskate when it comes to hosting your website, either. If your traffic and sales are very high, you may need a dedicated server, even though it costs more. (If it’s really high you may need multiple servers!) Try to find a hosting provider who has a good reputation for hosting the specific software you plan to use. There are hosts who specialize in Magento hosting, those who specialize in Miva Merchant, etc etc. Talk to other retailers who use the same shopping cart you do, and find out who to consider and whom to avoid.

Shopping Cart Specific Resources

As I mentioned at the beginning, there are lots of things you can do to improve your website that depend on which shopping cart you use. I don’t work with that many different packages, so let me point you to some resources that may be useful instead.

Magento

• Magento provides a whitepaper about performance tuning their software.
• The Magento Forums have a number of discussions on improving the speed of a slow Magento site.

Miva Merchant

• Read our post called Improve Performance on Your Miva Website
• Review and discuss performance-related questions at Miva Merchants’ online forums.
• Consider the Merchant Optimizer plug-in from Phosphor Media that makes static copies of all of your catalog pages.

X-Cart

• QualiTeam’s Performance Tips article gives a number of items to test, turn off, or tune up to make your X-Cart site perform better.
• The X-Cart forums offer a good starting point for troubleshooting performance issues.

Zen Cart

• RubikIntegration’s ZenCart Optimization Guide gives some specific things to look for
• ZenCart Forums has several threads about performance issues.

For others, use Google to search for the name of your shopping cart followed by one of these phrases:

• “performance tuning”
• “performance”
• “slow”
• “speed up”
• “optimization”

Is it worth it?

Performance tuning can take a lot of time or cost good money if you outsource it. But remember that your page response times affect many things – your customers’ perception of your e-commerce business, your SEO rankings, and even your AdSense quality score. It might be tedious, but performance testing and improvements are well worth the investment.

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.