The Need For Speed: Tips for Measuring & Improving Performance (by Mike White)
We live in an age where instant gratification rules, and nowhere is that more evident than on the web. Your e-commerce sites should be tuned like a race car, ready to blaze down the superspeedway that is the world wide web.The benefits from a snappy, performance-boosted site are numerous:
- Fast sites rank better in search engines. Google has specifically stated that one of their ranking factors is site speed. Bing also has focused its webmaster guidelines more towards site speed.
- Speed optimization reduces server load. Say goodbye to capacity problems and crashed servers, and hello to less bandwidth usage. Most optimizations aimed at increasing speed also decrease file sizes, saving storage space and reducing the amount of information that the server needs to send to each visitor.
- A fast website increases conversions. Fast page loads make happy customers, and happy customers buy more. If it takes ages to load up the page, then they are much less likely to hit continue shopping and browse for additional products.
How to determine your site’s speed.
You need some tools in your belt before you start fine tuning your website. The first and most important step is to analyze the current site.
There are a number of other tools out there to test with, one of my favorites is the one at websiteoptimization.com. Their tool sometimes is slow to load, but I like the breakdown they give you and the suggestions that they make. I learned a lot about optimization from these folks.
Webpagetest.org can produce a nice waterfall chart and screenshot using different browsers and locations around the world. I like that they do a comparison between the first page load, and the second after files have been cached.Different tests will invariably provide different results, so I encourage you to test your site using multiple tools.
Speeding up the site.
Right out of the box, modern versions of X-Cart perform decently in speed tests. But by no means all of X-Cart merchants use the latest version, many of them feel comfortable with the previous ones. When I tested an older 4.5.4 installation , it had 204 requests and a total page size of 1350522 bytes. We can do so much better than that by optimizing! Stock X-Cart provides us with a dizzying array of options, some of which we can eliminate to reduce size. The code is distributed in a format that is human readable and easy to work with, which is great when building your site, but not so great for speed. X-Cart already performs some of the heavy lifting by combining CSS and JS and caching files, the backend optimizations are there. What we need to do is concentrate our optimization efforts on the front end of the site.
Image compression can be extremely valuable as well. PNGs GIFs and JPGs can all be compressed for the web, I am consistently amazed at the webmasters that do not pay attention to the file sizes of their images. Make sure that the image is the exact size that it needs to be for the space provided, don’t let the browser scale down the image, resize it in an image editor like Photoshop. If you need a free image editor that can perform most functions, take a look at the GNU Image Manipulation Program, or GIMP for short. Be very wary about filesize, and experiment with different formats to see which will give you the best balance between size and quality. Try out the numerous free image optimizers on the web..
Http requests are one of the biggest killers of speed. A request happens when either the HTML or the CSS files reference a separate file, like an image or a script, and “request” that file be loaded by the browser. Images referred to by CSS are a common culprit, but we also need to take a hard look at the other images loaded on the page. Looking down my list of requests on my example site, I see that by far most of the requests are images. Most of the images are small: icons, navigational images, etc. We need to reduce the references to individual images, by combining them into sprite sheets.
Individual product and category images can be ignored, but all of the images that make up the design of the site should be added to a sprite sheet. The sheet is merely a larger image that contains all of the different images that you need to use in your design. Then instead of referencing the image directly in your HTML and CSS, you provide specific coordinates for the image on the sheet. That way only one request is issued and the browser just looks in the right place on the sheet to display the specific icon or image. The concept here is easier than the practice, it takes some getting used to. Read more about sprites at CSS-Tricks.
As I stated before the code that ships with X-Cart is human readable for your ease of customization. We need spaces and formatting in order to read code properly, and while designing a site it is important that you be able to understand and find the places where you need to make changes. However after the design phase is over, we can reduce that code to a smaller size by sucking out the “air”.
The first step to minifying is to actually remove unwanted and unneeded code. X-Cart uses a skin system, there is a base directory for the templates in skin/common_files, and then there is the currently selected skin directory, for instance skin/ideal_comfort or whatever skin you have selected in your admin. This makes it easy for you to customize your design without overwriting core files, by simply placing new templates in your skin directory that take priority over the common one. This is a handy feature, but it can lead to some “doubling up” of code when it comes to CSS.
Just be sure to keep a human readable backup of the file, so you can make changes in the future. Both your CSS and your JS files can benefit dramatically from minification.
Serve jQuery from Google.
Use a Content Delivery Network (CDN)
Speeding up your site should be a top priority nowadays, it may be a daunting task, but it is sure to be rewarding. Until next time, this is Mike White signing off, and wishing you much success in your e-commerce ventures!