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.
SFCable's Networking Cables Page
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.
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):
WebPageTest.org Results - Before & After
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:
- 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.
- 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.
- 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.
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.