Today we will be looking at useful ways to speed up your OpenCart store. Most of these tricks do not require going into the code but there are a few where you might need to roll up your sleeves and get dug in but we will go through them step by step. By speeding up OpenCart, you offer a better experience for your customers, improve your page speed (and therefore, possibly, your search engine ranking) and make your store appear more stable and professional.
To begin with I will be setting up a test installation of OpenCart 1.5.6 on my server and running a page speed test which gives me an estimate of how quick my store is at the moment which I can use as a baseline to see how much it can be improved by following a few steps. The store is on a speedy VPS, with just the default product data and nothing added to it at all. I came out with an F for page speed and a C grade for YSlow. At the end of every tip I will run another page speed test and show how the accumulative effect is improving the speed of my OpenCart installation.
Speed Tip 1: Turn Off Product Counters For Categories
One of the biggest hits to an OpenCart site’s speed performance is the product counter which shows up on the image above. On the left hand side there is a list of all the site categories along with a number in brackets which indicates all of the products available in that category (although it is recognised that it is more a problem for sites with lots of categories). Whilst it is a nice-to-have feature, it’s not essential for running the site and joining several tables in the database to find the number can be a laborious, and slow, process which adds time to your page loading.
So, let’s turn it off. Luckily, the OpenCart development team recognise the impact this has on page speed so they have added an easy option in the admin section which allows you to quickly turn off the product counter. Simply login to the admin section of your store and go to: System->Settings->Edit->Click the “Option” Tab then set the “Category Product Count” to No and click Save.
Impact: Low
This is more of a tip for stores with lots of categories and subcategories so using the stock data or running a store with just a handful of categories seems to be fine with the product counter.
Speed Tip 2: Enable GZIP Compression
OK, so now we are going to tell the site to compress CSS and JS files down into a file better suited to loading quickly. To do this, we need to do two things which allow the site to work it’s magic on the files. First, log into your 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.
The second step is to add a few lines to our .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
Now our site is set up to compress external scripts, let’s run another speed test and see how we’re doing so far.
Impact: High
This has had a huge effect, although the site still has an C grade for page speed you can see that it has jumped to 72% just by enabling the last two speed tips. The YSlow grade is now B. So, in essence, after two tips our test site is a third faster than it was!
Speed Tip 3: Enable Browser Caching
OK, so 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 tip to speed up your OpenCart store.
Here is the code to add underneath the last block we’ve just added:
## 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 ##
Impact: High
At this stage, pages are loading incredibly quickly but let’s see if we can get towards that elusive page speed A grade by carrying on!
Speed Tip 4: Enable Keep Alive For Multiple HTTP Requests
In this section we will be allowing browsers to send multiple HTTP requests. By default, the browser requests each file then waits for the response and closes the connection before opening up another one. Obviously this can be a low process if there are a lot of files to request, which is the case in OpenCart, so we will be allowing browsers to grab more than one file at a time by enabling Keep-Alive.
On this tip we need to head into the Web Server files itself and ensure that the necessary module is switched on for us to use otherwise you will get a 500 server error. To enable Keep Alive login to your server container and go to: etc/httpd/conf/httpd.conf (assuming you are on an Apache server). Open us the file and perform a search for “Keep” which will take you to the right section of the file. Make sure the values are as they are below:
KeepAlive On MaxKeepAliveRequests 50 KeepAliveTimeout 7
Note: If you’re uncomfortable with making these changes then get in touch with your web host, send them a link to this page and tell them that KeepAlive needs to be set up for Speed Tip 4 and they will sort it out for you.
Next, open up your .htaccess file and add the following code underneath the other blocks then save it:
Header set Connection keep-alive
Now we’ve done that, let’s run another page speed test:
Impact: Medium
Although the page speed has stayed the same in this test experiment, I have seen speeds dramatically increase when the keep-alive setting is switched on so I’d advise you do it! Just remember to check the server is compatible as it will result in a 500 error if not.
Speed Tip 5: Load JavaScript Asynchronously
OK, so when OpenCart first loads up it’s grabbing all of those external stylesheets, JS files and loading all of the page content but it’s not necessary. In an ideal world the site should load all of the HTML and styling first and then load the JavaScript later as it isn’t needed for the structure of the web pages. So, what we are going to do in this Speed Tip is ensure that everything gets loaded without having to wait for the JavaScript files to be fully loaded first. To do this we will simply add a very small parameter to every
Once you have done that for all of the JavaScript files (don’t worry there are only five or so) you will successfully have deferred the JavaScript files loading up and delaying the page speed. They will continue to load after everything has loaded. I did a few quick checks and it looks like the slideshow, compare buttons, addToCart all works fine etc with the async loading so it won’t affect your OpenCart store usability, just speed it all up. Let’s do another page speed test.
Impact: Medium
Wow! Straight A’s now for page speed. We’ve increased the speed rank 92% since we started the test and the site is feeling really snappy. Plus everything is working exactly as it should so let’s go through one more speed tip and see how close we can get to that 100% mark.
Speed Tip 6: Add Image Dimensions To OpenCart
OpenCart has it’s own in-built image processor which automatically resizes all the images. Unfortuantely, it doesn’t include the image dimensions as part of the tag itself, it just supplies the image. We can increase the page speed by warning browsers the exact dimensions of the image before it downloads so it can create the right size space and carry on while the image downloads, to do this we will need to use some code supplied by another OpenCart Developer, Qphoria, at this link.
Open up the following file in your text editor:
- system/library/response.php
Look for the following line of code in the file:
if ($this->level) {
Then add the following code just before the above line:
//Q: Add width/height tags to all images for Google Page Speed tip:
//http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions
preg_match_all('/]+>/i', $this->output, $result);
$img = array();
foreach($result[0] as $img_tag) {
preg_match_all('/(width|height|src)=("[^"]*")/i',$img_tag, $img[$img_tag]);
}
foreach ($img as $k => $info) {
if (count($info) == 3 && $info[1][0] == 'src') {
//if (curl_init(str_replace('"', '', $info[2][0]))) {
$imgfile = str_replace('"', '', $info[2][0]);
$imgfile = str_replace(HTTP_SERVER, DIR_IMAGE . '../', $imgfile);
$imgfile = str_replace(HTTPS_SERVER, DIR_IMAGE . '../', $imgfile);
if (file_exists($imgfile)) {
$image_info = getImageSize(str_replace('"', '', $imgfile));
$k = trim($k, '/>');
$k = trim($k, '>');
$this->output = str_replace($k, ($k . ' ' . $image_info[3]), $this->output);
}
}
}
//
Thanks again to Qphoria (link is his awesome posts in the OpenCart forum) for this code, can’t have been easy to write but it’s awesome and does the job great!
So we perform another page speed test, the results of which are below.
Impact: Low
OK, so in this case it hasn’t really had an effect on the page speed. This would either suggest that it is a pretty low priority speed optimising setting for your OpenCart store or that it is just something Google recommends. That is not to say that it isn’t worth doing, it could be with more images on the site the page speed benefits would be compounding so I would probably still do it to make sure that Google has more boxes ticked when determining things like search rankings!
As an extra check I also ran a test on Google’s PageSpeed web app and I got a very good 93/100 for Desktop browsers in terms of speed which is an incredible jump overall from the 41 I got originally! So, give it a go on your site and let me know how you get on in the comments below, share your old and new speed ranks and enjoy your new faster OpenCart store!
