As you may have already noticed, our preferred platform when it comes to e-commerce is OpenCart. Besides offering a wide range of functionalities, extensions, having good modular structure, convenient and intuitive user interface, easy navigation, it is also a platform that works rather quickly. But as Winnie the Pooh has said: “The more it snows, the more it goes”.
The time for loading is extremely important. If you really think that the users will be patient enough to wait as long as needed to load you website, you are greatly mistaken. At the moment the standart for loading is up to 5 seconds. This period of time is of great importance for your SEO performace, the quantity of conversions and online income, too. According to Amazon, every delay of 1 second lowers the amount of online conversions by 7%.
In this article we will give you a few tips how to speed up your online store.
Compression
The importance of compression is taken into account by the OpenCart’s creators as they have added a field for it in the administrative panel. We can find it in
Settings -> Your store -> Server
In this field we can put in values from 0 to 9 (the middle ones are preferrable). We recommend value of 5 or 6. After each change, always test to see if your online store is still working.
Counting of categories
OpenCart shows us how many products there is in each category by default.
This functionality makes requests in many different tables and considerably slows our website. We recommend (if you fail to see its importance) to just turn it off. You can do that by visiting the administrative panel’s settings:
Settings -> Your Store -> Options
From here, you just have to choose option “Yes” or “No”.
Better hosting plan
If you currently on the most economical hosting plan, but you can afford a higher one, we strongly suggest to upgrade immediately.
How to determine if you need a more expensive hosting plan?
We will give you an example with a store using hosting by SuperHosting. Go into Cpanel and then through statistics.
In a case in which the CPU usage is above 0 or in yellow, this means that it’s recommended (if not mandatory) to upgrade your plan. Or in other case – if your website makes a lot of request that must be optimized by a technician.
Indexes in tables
By default your OpenCart tables do not have indexes, but everyone can remedy that, if needed. Here we can’t give you an universal formula (because there isn’t one) but we can give you the closest one to it.
First, and this is a must-do, you do a backup to your database. After that you go to phpmyadmin, choose your database and then SQL tab. Then in the text field you can copy the requests and press “Go”.
Table for categories
ALTER TABLE `oc_category` ADD INDEX ( `parent_id` ) ;
ALTER TABLE `oc_category` ADD INDEX ( `top` ) ;
ALTER TABLE `oc_category` ADD INDEX ( `sort_order` ) ;
ALTER TABLE `oc_category` ADD INDEX ( `status` ) ;
ALTER TABLE `oc_category_description` ADD INDEX ( `language_id` );
ALTER TABLE `oc_category_to_store` ADD INDEX ( `store_id` );
In case you have many subcategories with subcategories, with subcategories, put this index in the path_id column:
ALTER TABLE `oc_category_path` ADD INDEX ( `path_id` );
A product table
ALTER TABLE `oc_product` ADD INDEX ( `sku` ) ;
ALTER TABLE `oc_product` ADD INDEX ( `upc` ) ;
ALTER TABLE `oc_product` ADD INDEX ( `manufacturer_id` ) ;
ALTER TABLE `oc_product` ADD INDEX ( `sort_order` ) ;
ALTER TABLE `oc_product` ADD INDEX ( `status` ) ;
ALTER TABLE `oc_product_option` ADD INDEX ( `option_id` ) ;
ALTER TABLE `oc_product_option_value` ADD INDEX ( `product_option_id` ) ;
ALTER TABLE `oc_product_option_value` ADD INDEX ( `product_id` ) ;
ALTER TABLE `oc_product_option_value` ADD INDEX ( `option_id` ) ;
ALTER TABLE `oc_product_option_value` ADD INDEX ( `option_value_id` ) ;
ALTER TABLE `oc_product_to_category` ADD INDEX ( `category_id` );
ALTER TABLE `oc_product_attribute` ADD INDEX ( `attribute_id` );
ALTER TABLE `oc_product_attribute` ADD INDEX ( `language_id` );
ALTER TABLE `oc_product_description` ADD INDEX ( `language_id` );
ALTER TABLE `oc_product_to_store` ADD INDEX ( `store_id` )
A table for product’s options
In case you have a large set of options, add indexes in these tables:
ALTER TABLE `oc_option` ADD INDEX ( `sort_order` ) ;
ALTER TABLE `oc_option_description` ADD INDEX ( `name` ) ;
ALTER TABLE `oc_option_value` ADD INDEX ( `option_id` ) ;
ALTER TABLE `oc_option_value_description` ADD INDEX ( `option_id` ) ;
Table with Pretty URLs
| 1
2 3 |
ALTER TABLE `oc_url_alias` ADD INDEX ( `query` ) ;
ALTER TABLE `oc_url_alias` ADD INDEX ( `keyword` ) ; ALTER TABLE `oc_url_alias` ADD INDEX ( `url_alias_id` ); |
These requests will significantly speed up your website.
GZIP compression
This compression is different from the one mentioned above. Here you compress the pages on the server and by doing this you can lower their size by up to 80%. This will significantly speed up your online store and is mandatory.
How do you compress if your server is apache and you have a .htaccess file in the folder that contains your website? Download the file and open it in text editor.
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plai
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
Add this code to your .htaccess file and upload it to the server. You will immediately feel your website sped up after you do that.
We recommend right after you upload the file to check if your website is working. .htcaccess if extremely sensitive and can “break” your website easily. If your store crashes, delete what you added and save your file as it was.
The code from above can be used in all online stores, not just ones on OpenCart. The only requirement is your server to be Apache.
Leverage Browser cache
We can allow our browser to cache resources such as Javascript, CSS and images. This way, if the client visits often our website, his/her browser will download some of the files and won’t need to reload or download them again.
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##
You can edit this in the .htaccess file.
Different tools that you can use in order to track the loading speed of your website
As sometimes is difficult to manually assess whether the things we do work (sometimes the difference is in miliseconds), we will give you a few way to check if you’ve been successful.
Minification
The minification is a process in which we take a CSS or Javascript file and make it so that it visualizes in a single line. In this way we lose the comments, variables and the function’s names are shortened. The file’s size is also reduced significantly.
The online tool with which you can minify your files is: http://www.minifier.org/.
The best option is to minify all files and unite them into a single CSS or Javascript file – this way we make less requests.
Another tool that we recommend is Google Page Insights.
https://developers.google.com/speed/pagespeed/insights/
This tool rates your website with a score from 0 to 100 points. It is extremely precise and demanding (as is everything even remotely connected to Google), so it’s really hard to score high points. 80 (or more) points is considered good result – your website is fast and well optimized for any device. With it we can even get a rating for the user experience we offer. Again in point (with a maximum 100 points) – everything above 90 is considered a win.
GTMETRIX – https://gtmetrix.com/
This tool has many criteria, but for every one there is an detailed explanation how to be passed. It shows (in percents) what’s your website’s speed, what’s the size of the page, how much request you have to make in order to get all the resources.
Bear in mind that most of these websites and tool operate often operate from a remote place. For example, if your website is in Bulgaria, and the tool tests and rates from the USA – there will be a delay caused by the distance that can’t be avoided.
