Speed up your Virtuemart to avoid failure of add product to cart

Hi,

I have seen that many people has been suffering from the same problem, and this question has been asked many time:

When someone tried to add a product to basket, the basket seemed to be empty. This happened sometimes and but not always. What is going on?

When it comes to “sometimes but not always”. It is really hard to find a solution,  you might not be aware if the problem is fixed or not, because it happens “sometimes”.

As you might know, the product is added to cart through by AJAX loading in Virtuemart. vmprice.js (which is a JS file that comes with Virtuemart Component) is responsible to run this AJAX loading. If you click the “add to cart” button right away (without waiting the page is fully loaded) it is likely you will experience this problem. This is why increasing the page loading performance is extremely important in Virtuemart. So this kind of behavior would be minimized.

There are many ways to increase the page speed performance (in general). Those are:

1- Analyze Your Website through Google PageSpeed Insights

Google has an awesome tool for webmasters, called PageSpeed Insights. It can be found here:

https://developers.google.com/speed/pagespeed/insights/

Type your URL in the field and click the ANALYZE button. PageSpeed Insights will analyze your website and will provide you some TIPS about how to speed up your website. Those can be:

  • Using client-side Cache
  • Activating server-side Cache (such as; XCache)
  • Migrate CSS and JS file to reduce HTTP request
  • Compress CSS and JS files to reduce their sizes
  • Optimize pictures (reduce file size without losing the quality)

and so forth. The analyze tool will give you some suggestions with details. It will make more sense when you see them.

2- Minimize the HTTP requests

While developing, always see the “Source Codes” and check what CSS and JS files your website loads. You might see that your website is loading more than one jQuery library (with different versions). It is going be little out-of topic, but this is also important. Loading multiple jQuery in a single page (most of the time) causes a Conflict Problem/ Console Errors. It is a critical bugs for the performance of jQuert-based extensions and must be resolved! In the console, you probably see a error code similar to this:

TypeError: $(something).something is not a function

*something = can be anything.

Resolving jQuery conflict can be tricky sometimes. But the first of all, you have to check the source codes and see how many jQuery library your website is loading. If you are seeing 2 different ../jquery.min.js then you got it. This multiple jQuery library loading is the reason of the conflict. (normally the no.Conflict methods should have been used to avoid conflict). Take a look at this topic and apply the patch:

http://www.flexiblewebdesign.com/forum-virtuemart-2-template-puremart-support/523-the-easiest-way-to-solve-jquery-conflict-issues

anyway, let’s get back to our original topic: Migrate and Compressed the JS and CSS files.

IF some of those CSS and JS are pretty useless, then try to eliminate them being loaded. If they are not used. But if they are mandatory and be used somehow. Then should migrate them JS and CSS files (make them all 1 file) and compressed them (GZIP). There are plugins to do this pretty much automatically, so you don’t need to do anything further, the extensions take care of it. The one that i can recommend is:

JCH Optimizer: http://extensions.joomla.org/extensions/core-enhancements/performance/site-performance/12088

It is a freeware plugin and it does its job. But there are others as well. Check: http://extensions.joomla.org/extensions/core-enhancements/performance/site-performance

NOTIFICATION: Migrating and Compressing the JS files may cause a jQuery conflict problem. You should check your website when plugin is enabled/disabled situations. And use the migrate/compress plugin only if they won’t cause Conflict issue.

3- Use CACHE

You actually don’t need a 3rd party components/plugin to for Cache. Joomla Built-in cache is pretty good and does the job. So, enable the CACHE from “Global Configuration”.  You may take a look at JED and try some 3rd party CACHE plugins/components. But i wouldn’t recommend any of them. The less 3rd party extensions you have, the more secured and lighter Joomla! you will have.

There are many other things that you can follow to speed up your website. Yahoo has a spectacular article about this topic. Please refer to this page and try: http://developer.yahoo.com/performance/rules.html

If you speed up your website, you won’t just minimize the risk of “failure of adding product to cart” but also you will increase the user-experince. Fast and reliable websites are always attract more customers.

There is one more thing you can do to reduce that risk. Which is; disabling the “modal popup upon add to cart” option from Virtuemart Backend >> Configuration >> Checkout

Regards,

 

 

This entry was posted in HTML, jQuery, Virtuemart. Bookmark the permalink.

Leave a Reply

Your email address will not be published.