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.
So now that I have you ready to optimize your site, where do you start? Read on.
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.
If you use Google Chrome (and you should), then you can use the built in PageSpeed tool. Just open the developer tools by hitting F12 (try it now), or right-clicking and selecting ‘inspect element’ on a web page. One of the tabs should be “Audits”, which can make suggestions as to how to optimize the page you’re checking.
Now take a look at the“Network” tab.This is a list of all the resources that were downloaded for this page, their size, and the time they took to load (you may need to refresh the page to see the report). At the bottom of the page you should see a total: 100 requests | 1MB transferred 6.50s -example of a slow site. These numbers represent the requests, individual files that must be downloaded from your site, and then the total file size of the page, and finally the time in seconds that it took to load.
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.
You always have the primary CSS file skin/common_file/main.css and your secondary CSS file skin/yourskindir/altskin.css being loaded, and sometimes these two have duplicate entries where the altskin style sheet is overriding the core styles from the main sheet. They are both combined into one cached file by X-Cart, so there is no reason to have those styles defined once in the main sheet, and then overruled by the altskin style sheet. I suggest making a backup of your original main.css and going in and stripping out all the styles that are defined again in your altskin.css. In some cases you will need to transfer styles from one to the other, as it may be only partially defined in the secondary sheet. A handy way to spot styles that are over-defined is by using the “inspect element” feature in Chrome.
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)
This is the final step, but perhaps the most important. A content delivery network can take a major load off your server, and speed up delivery of your pages enormously. With a CDN, many of your images and scripts can be stored on their distributed network of servers, with the closest server to the client actually sending the content. This way your client gets the content from a local server and removes the latency associated with traveling around the world.
Popular CDNs are MaxCDN, CloudFlare and EdgeCast. There is a lively X-Cart forum thread on integrating with MaxCDN and you can get a discount code from the X-Cart marketplace. AmazonCDN is another option, and X-Cart team offers a module which integrates your store with it.
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!