How to speed up OpenCart store? Opencart optimization and Improving SEO

My website has 400 over products and it runs damn slow. The page speed testing site shows it takes average 14 second to load 1 page which is not acceptable at all. At the beginning I thought it was server problem as each time when I approached server tech support they say they won't help increase the loading speed unless I pay them extra.

Lucky I browsed some related articles in the internet before I hire someone or purchase any speed up extension which could easily cost 100-1000 dollars. One guy writes: Believe me you need not buy any of those silly extensions...just understand the below mentioned steps and you save almost $100.

Now let's take a look at how slow my website performed initially.

This is the snapshot from Google PageSpeed Insights. The 3 simple steps to Opencart optimization and Improving SEO are

1) Minify / gzip your css, javascript and jquery files
- increases 40-50% of Pagespeed points & reduces almost 40-50% of your 1st request data loading size and time
2) Enable browser caching
- increases around 5-15% of pagespeed points and almost 40-50% of your 2nd request onwards load time
3) Optimize images / image size
- increases 5-15% of pagespeed points and almost 20 - 30% of your 1st request data loading file size and time

As newbies, I roughly understand the meaning but how to do that.

1) Minify CSS, javascript and other files using gzip/ Enable GZIP Compression

This is the most important part of opencart optimization. To do this, we need to do 2 things which allow the site to work it’s magic on the files. Firstly, log into OpenCart store and go to: System->Settings->Edit->Click the "Server" Tab and set the "Output Compression Level" to between 4 and 6. The option offers a number between 0 and 9 but in my experience I’ve found that a more mid-range number works best as a high number compresses the file more but spends more time doing it which makes the whole thing pretty pointless.

Secondly, (most important step) is to add a few lines to .htaccess file which provide a second compression option in case the OpenCart default one has no effect (which has been reported before). So, open up the .htaccess file and add the following code underneath the ReWrite rules:

# compress text, HTML, JavaScript, CSS, and XML
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# remove browser bugs
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

You should notice there is 1 line writes # 2. In your opencart directory rename htaccess.txt to .htaccess.
Here is where you can find htaccess file. Need to log into cPanel->file manager

After adding in the code and saved the changes, let's run the analyze again:

Can see some improvement?

2) Enable browser caching

Once again we will be dipping into the .htaccess file to set cache lengths for browsers to keep images and external scripts. This time we will be specifying the browser to keep elements for 7 days before requesting everything again which should increase the load time considerably. Remember, this will make things very difficult for development so if you are making lots of development changes to your site then it is perhaps best to finish that up before using this to speed up your OpenCart store.

## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/pdf "access plus 1 week"
ExpiresByType text/x-javascript "access plus 1 week"
ExpiresByType application/x-shockwave-flash "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 week"
ExpiresDefault "access plus 1 week"
## EXPIRES CACHING ##

After pasting this code to htaccess file, the analysis shows

3) Optimizing the images

Ideally each product image should be somewhere between 20 - 70 kb.
it is best if you optimize your images to a size no more than 50 KB.
you just need MS paint skills and try to keep the max product image attributes(height x width) to 500 x 500
Providing image width and height in the image tag will further help to efficiently load the page.