Speed up OpenCart store

Speed up OpenCart store

Here are some very useful tips that will boost the speed of your OpenCart store and also gain a better page rank in search engines.
There are many websites that will analyze your site’s speed and give some good advice about how to speed it up and one of them is GTmetrix. Of course you should also use the Google Developers Tools which offers many advises too.

Before applying these tips in order to speed up OpenCart store you should first test your starting speed just to have a clear image about what speed tip gives the best result in your case. For this post the following tips are applied on OpenCart store version 1.5.4 and the results can be seen at the end of the post. So let’s see how to speed up OpenCart store.

1. Turn Off Product Counters For Categories

Although this is something I turn off after setting up OpenCart store since I don’t find it useful because customers might not be interested into looking the categories with only one or two items in it, there probably are situations when this feature might come useful to you. Well, consider turning it off because it will speed up OpenCart store. After logging into your store’s Dashboard navigate to SystemSettings(Your Default Store) EditOption and then scroll down to Products and check No at the Category Product Count radio button. Save and you’re done.

Turn off product count in OpenCart store

2. Enable GZIP Compression

Compressing files like CSS and JS will contribute to page loading speed so let’s see how this works. From Dashboard navigate to SystemSettings(Your Default Store) EditServer and set the Output Compression Level to some midrange value from 4 to 6. This option is available in values from 0 to 9 and higher numbers are offering more compression, but it also takes more time to compress the files which is not something we are trying to do if we want to speed up OpenCart store.

Compression level

Secondly you have to open the .htaccess file and add the following code to it 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

This ends the setup for compressing the external scripts.

3. Enable Browser Caching

This is one more option that includes editing the .htaccess file and telling the browser to keep the downloaded elements in temporary folder for 7 days before requesting everything again from the server. This will considerably increase the page loading speed. Add the following code just underneath the previous code added in step 2.


## EXPIRES CACHING ##
<IfModule mod_expires.c>
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"
</IfModule>
## EXPIRES CACHING ##

4. Enable Keep Alive For Multiple HTTP Requests

This step is for more advanced users familiar with server setup and if you want to avoid seeing the 500 server error message you might want to get in touch with your web host tech support and tell them that KeepAlive needs to be set up in order to speed up your OpenCart store. Also you can skip this step if you don’t want to experiment too much.

If you are running on Apache server login to your server via FTP/SFTP and locate the file: etc/httpd/conf/httpd.conf (for servers like Debian and Ubuntu you have to change the apache2.conf) and open it for editing. Search for Keep and make sure that the values match these:


KeepAlive On
MaxKeepAliveRequests 50
KeepAliveTimeout 7

Next, open the .htaccess file we previously edited and add the following code underneath the other blocks of code from step 3 and then save it:


<ifModule mod_headers.c>
    Header set Connection keep-alive
</ifModule>

NOTE: Remember to check if the server is compatible with this setting because it will result in a 500 server error if it’s not.

5. Load JavaScript Asynchronously

This is a good tip but it has known issue to not load your image slider(s) at once, which you might want to avoid, so try it and decide for yourself. If you don’t like how the page loads revert or skip this step. This step is to ensure that everything gets loaded prior to waiting for the javascript files to be fully loaded. Most of the javascript files are loaded within header.tpl file so you have to navigate to: catalog/view/theme/[YOUR THEME]/common/header.tpl and search for .js (which hopefully will be at the beginning of the file at line 21 or so and should be around five to seven lines of javascript code) and add the command async right after the opening tag <script. Here’s an example:

This is first of seven lines (in my case) of javascript code before adding the async command:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js">

And here is what it looks like after:

<script async type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js">

Once you add the async command to all the javascripts save the file and reupload it via FTP/SFTP back to the server and overwrite the previous version of the file. Reload your page and see the results how your page is loading/rendering. Mind the loading of the image sliders (main image slider and manufacture logo image slider if you are using one). If you don’t like how the page behaves you can delete the async command and/or skip this tip.

6. Add Image Dimensions To OpenCart

This is a tip about upfront warning the browser about image dimensions on OpenCart store because the built-in image processor does resize them automatically, but it doesn’t include the dimensions in the tags. So navigate to system/library/response.php and open the response.php file in text editor. Find the following line of code:

if ($this->output) {

and just before it add the following code:


//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('/<img[^>]+>/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);
}
}
}
//

Save the file and reupload it back on the server (if you previously downloaded it via FTP/SFTP).

This code is provided by OpenCart Developer: Qphoria. Thanks mate!

Enjoy your faster OpenCart store. Here are my results after applying these tips for speed up OpenCart store.

Speed test results

By janoshke

Web developer and IT consultant. Freelancer with full respect for OpenCart and WordPress. Gamer, (ex)drummer and parent.

8 comments

  1. Hi there,

    Big increase in speed – thank you
    Trying to identify a php error when modifying response.php

    PHP Notice: Undefined offset: 0 in /home/XXX/public_html/XXX/system/library/response.php on line 70

    Any ideas ?

    Thanks

    1. Hi Nick,

      Thank you for your comment. I’m sorry to hear you encountered a problem and I hope you did save a backup copy of the file you edited 🙂
      Now, here is the basic explanation of that error situation:
      You are asking for the value at key 0 of $something. It is an array that does not contain the specific key.
      The array $something is probably not set, so when PHP is trying to access the key 0 of the array, it encounters an undefined offset for [0] and [1] and throws the error.
      If you have an array:

      $something = array(‘1′,’2′,’3’);

      You can now access:

      $something[0];
      $something[1];
      $something[2];

      If you try to access:

      $something[3];

      you will get the error “Notice: Undefined offset: 0”

      As I mentioned in the post that is custom code from an OpenCart developer Qphoria and maybe you should also visit the link (click on his name in the post) to see the original post in OpenCart forum and maybe try to lookup for a solution directly.
      If there is anything more I can assist you I’ll be glad to 😉

      Cheers.

  2. Hi, thanks for this post. I just try to improve google speed score by caching and gziping my opencart store. I hope it works also for opencart 2.X. I m trying to get at least 80/100 from speed test.

    Best regards

    1. Hi there,
      Thanks for the comment. I’m glad if you find any useful info here 🙂
      Regarding the gziping and caching you can try that with any type of CMS platform since it is done within .htaccess file. You can fine tune those sets of commands that you set in .htaccess file to better suite your needs and caching itself has its ups and downs, so might want to monitor this for a while and see if the site performs well and without any bugs. I did encounter some websites that don’t benefit from caching…

    1. Hello Stefan,
      Thank you for your comment, I’m glad you find useful stuff here 😉

      I didn’t get your question though, about the line you are trying to find… Can you repeat please?

      1. Sorry. It was about this line: etc/httpd/conf/httpd.conf…but now its done. I did it. Thanks again.

        Do you know how to setup -Use cookie-free domains for opencart 2.3. I could not find it on google for 2.3

        Have a nice day.
        Best regards,
        Stefan

Leave a Reply