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 theGoogle 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 System ⇒ Settings ⇒ (Your Default Store) Edit⇒ Option and then scroll down to Products and check No at the Category Product Countradio button. Save and you’re done.
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 System ⇒ Settings ⇒ (Your Default Store) Edit⇒ Server 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.
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 theapache2.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 viaFTP/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->level) {
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 viaFTP/SFTP).
This code is provided by OpenCart Developer: Qphoria. Thanks mate!
Also thanks to Jack for other resource about this topic.
Enjoy your faster OpenCart store. Here are my results after applying these tips for speed up OpenCart store.