Easy Steps and Useful Internet Services to Speed up Your Site on OpenCart

When it comes to test the speed of your website loading, one of the most convenient service is https://gtmetrix.com. It analyses all items of site performance and gives recommendations how to correct. The following actions (from the easiest to more complicated) are required.

1. Gzip compression
You can do the primary easy step directly in administration panel of your OpenCart site. Go to admin -> System -> Settings -> tab Server -> field Output Compression Level. Set some number and it will help you immediately in site speeding. Screenshot 01

2. Images compression
The other action which also doesn’t require specific skills of html coding is to compress images. Gmetrix service will write which images needs to be compressed. So you can download each of them directly on the site. Screenshot 02

Don’t forget to replace your images with new compressed. If this way isn’t good for you for some reasons,  you can use online service to compress images without losing their quality — https://tinypng.com/. It allows you to upload some images and download compressed versions of them as one package.
The small trick to optimise images and have 100% at this item in Gmetrix is to optimise all images even those, which are located in cache folders in OpenCart. Mostly this is connected to images of products which are resized according to image size in admin and placed in cache folders.
Let’s explain more. When you upload in some product image (even if this image is previously resized by you) OpenCart system cuts image and places it to cache folder. But this cached image isn’t compressed. So you need to compress resized images in cache folder.
——————————————————
You should know that even two above mentioned steps will effectively help you. But we will go farther.

3. Leverage browser cache — one of the most important enhancement step.
We will not give here theoretical knowledge about what that means. You can read this in any specific professional article. But our goal is to give quick directions how to do this in practice to people which are not programmers or developers.
So you have to use .htaccess file. Default OpenCart package contains file .htaccess.txt. This file is located on your server after a template’s installation. But if it is invisible in your ftp manager and you don’t have access to hosting management, you can use this file from default package.
-So, rename file .htaccess.txt to .htaccess
— open file in any text editor, for example, Notepad and write in it following code:
## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg «access plus 1 year»
ExpiresByType image/jpeg «access plus 1 year»
ExpiresByType image/gif «access plus 1 year»
ExpiresByType image/png «access plus 1 year»
ExpiresByType text/css «access plus 1 month»
ExpiresByType application/pdf «access plus 1 month»
ExpiresByType text/x-javascript «access plus 1 month»
ExpiresByType application/x-shockwave-flash «access plus 1 month»
ExpiresByType image/x-icon «access plus 1 year»
ExpiresDefault «access plus 2 days»

## EXPIRES CACHING ##
Saying briefly, you write in this file information to browser which types of files should be cached and time of keeping this cache.
Recommended minimum time is one month and maximum time is one year.
-upload file to your server
————————————————
Above steps can be done even by person which doesn’t have at least basic css and html skills. The next steps can be done only by person with some skills. But still not necessary by specialist.

4. Combine images using CSS sprites (assuming that you know what does mean CSS sprite).
Default OpenCart site has all images combined in one sprite image and, maybe, your site doesn’t have images to combine. But if you see such item as not 100 % completed in Gmetrix, you should correct it. There are other the same online services. For example, such service — http://spritepad.wearekiss.com/ gives you an opportunity to upload your images to make one sprite from them and to generate CSS code to use.

5. Compressing of CSS and jquery scripts code
Similarly to the situation with images, Gmetrix service also provides already compressed CSS and jquery files. So you can download them from the page with Gmetrix analyse or use some online compressing service, for example, http://refresh-sf.com/. But please, keep in mind that sometimes jquery files compressing can cause conflicts in scripts. So, you will need to have jquery skills to solve them. Or you can ask for help a jquery programmer.

6. Combine css and jquery scripts in one file
This is the most responsible step because CSS and jquery scripts often have to be analysed before combining in one file. Some jquery scripts in OpenCart are used only on Home Page but some not. Also minifying service encodes jquery code in a specific way. Ssometimes it can be used for some plugins and so on. So similarly to the situation with compressing jquery, maybe you will have consultation with a jquery programmer or should have and use own jquery skills.

P.S. Regarding to the steps 5 and 6, don’t forget what changes and in which files you do. Also good practice is to rename changed files because they can be replaced by uploading of next updated package.

For sure, except mentioned in this article recommendations there are a lot of other actions to enhance your site speed. But you will see really faster parameters even if you make only these steps.

IMPORTANT! This article describes how to make your site faster when it based on Opencart. For those who chose WordPress we highly recommend brilliant guide «How To Speed Up Your WordPress Site — And Increase Organic Traffic By 39.1%» by Tung Tran.

Well, this is all for today. Don’t forget to check if the new tutorial is ready.

Tonytemplates team