Improving Your TomatoCart Store’s Performance – Boost TomatoCart Speed

Site_Performance

It’s significant to improve your store’s performance to satisfy the visitor who may become your next customer.  The web users often navigate away from sites that take an average of 3 seconds or longer to load. It means you are losing the potential customers.

It’s impossible to enhance the performance of your web server except you pay more money for upgrading your server. But, there is another way to boost TomatoCart speed – reduces the number of HTTP requests required to render the page. This is the key to faster pages. 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. In this article I am going to give you few easy guidelines to enhance your TomatoCart’s performance a little bit more.

Combine and minify CSS

For the default glass gray template, it is necessary to load the stylesheet.css and Autocompleter.css for the home page. We should combine them into one file and minify it to remove unnecessary characters from code to reduce its size. This improves response time performance because the size of the downloaded file is reduced. On the other hand, the only one css file will be cached by the visitor’s browser after the page has finished loading. Subsequent pages would reference the same file that should already be in the browser’s cache. It means the visitor’s browser won’t ask the same file from the web server.

How to combine the two files and minify it? There are online tools are available to do this. I recommend you to use the online YUI Compressor tool.

compressor

Once you open the online compression interface, please choose the css file type and click the File(s) tab. After that, you just need to add the css files need to be combined and compressed.

files

Now, we need to add the following two css files into it:

  • templates/glass_gray/stylesheet.css
  • ext/autocompleter/Autocompleter.css

Once added, just click the compress button to generate a new combined and compressed css file.

compressed

After that, you just need to click the Download Compressed File button to download it. Generally, I will save it into templates/glass_gray directory. You could give it a new name – all.min.css.

Finally, you have to find the original tags to load the css file in the templates/glass_gray/index.php:

<link rel="stylesheet" type="text/css" href="templates/<?php echo $osC_Template->getCode(); ?>/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="ext/autocompleter/Autocompleter.css" />

Then, please replace it with the following code:

<link rel="stylesheet" type="text/css" href="templates/<?php echo $osC_Template->getCode(); ?>/all.min.css" />

Done. Only one minified css file need to be downloaded when the new visitor access your home page. Subsequent pages would reference the same file that should already be in the browser’s cache. For the other css files generated by some modules, it would be better not to touch them.

Combine and minify Javascript

For the default glass gray template, it is necessary to load many javascript files for home page:

  • ext/autocompleter/Autocompleter.js
  • ext/autocompleter/Autocompleter.Request.js
  • ext/autocompleter/Observer.js
  • includes/javascript/auto_completer.js
  • includes/javascript/popup_cart.js
  • includes/javascript/bookmark.js

As the css files, we should combine them into one file and minify it. You just need to choose the JS file type in the online compression tool and then add the javascript files to generate a new js file. Please save it into templates/glass_gray/javascript as all.min.js.

Finally, you have to find the original tags to load the css file in the templates/glass_gray/index.php:

<script type="text/javascript" src="ext/autocompleter/Autocompleter.js"></script>
<script type="text/javascript" src="ext/autocompleter/Autocompleter.Request.js"></script>
<script type="text/javascript" src="ext/autocompleter/Observer.js"></script>
<script type="text/javascript" src="includes/javascript/auto_completer.js"></script>
<script type="text/javascript" src="includes/javascript/popup_cart.js"></script>
<script type="text/javascript" src="includes/javascript/bookmark.js"></script>

Then, please replace it with the following code:

<script type="text/javascript" src="templates/glass_gray/javascript/all.min.js"></script>

Done. This will speed up your store.

Enable Gzip Compression

Compressing your site pages with gzip typically saves around 50 to 70 percent of the file size. This means that it takes less time to load your pages, and it also means less bandwidth is used over all.

It is easy to enable the Gzip Compression in TomatoCart because there is an Output Compression system service under admin panel > Modules > Services. You just need to install it and set the GZIP Compression Level.

gzip

If the web host allow you to set the gzip directive in the .htacess file (If you don’t know it, please find an article named how to use .htaccess in this blog. It is also wrote by me), you could add following code into the .htaccess to gzip all the static resources for your web pages:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

After that, your store will be gzipped as follow:

gzip

As you can see, after compressing the page with GZIP, 79.4% bandwidth was saved. That’s great.

Setting the Expires Header

Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.

You could add the following code into the .htaccess file to set the expires header for scripts, stylesheets and images etc in your store:

# Set expires header and Remove ETags
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header set Expires "Thu, 15 Apr 2014 20:00:00 GMT"
Header unset ETag
FileETag None
</FilesMatch>

# Set cache-control header
<FilesMatch "\.(ico|jpg|png|gif)(\.gz)?$">
Header set Cache-Control "public"
</FilesMatch>
<FilesMatch "\.(js|css)(\.gz)?$">
Header set Cache-Control "private"
</FilesMatch>

In the above code, I set the expires date to “Thu, 15 Apr 2014 20:00:00 GMT”. You could adjust it depending on your own requirement. It means the cached resources in the client browser will be expired until “Thu, 15 Apr 2014 20:00:00 GMT”.

After applying the expires header for the resources in your store, you could verify the header changes with firebug:

etag

As you can see, the Expires header is added for the images.

These guidelines should be very useful to improve Your TomatoCart Store’s Performance. Please try it. If you can’t do it by yourself, please contact me:

Gmail: support@tomatocart.com

Looking for quality TomatoCart Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

3 Comments on Improving Your TomatoCart Store’s Performance – Boost TomatoCart Speed

  1. Kristoff Rand says:

    Thanks for this easy to follow tutorial… I got each of the settings done. Can I combine even more java in the same way?

  2. Kevin says:

    Thanks for this.

    I do have a question,

    isn’t there a way to automatically change the expire header date?

    As i see this now, i would have to change this by hand each time it expires.

    • Jack Yin Jack Yin says:

      Hi,

      In fact, you should just set the expired header data for static resources such images, css and javascript. So, i don’t know why you need to change the expire header frequently.

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 4 = 8

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>