Speed up your opencart shop

Quote

Post by bertjebel » Mon Jan 23, 2012 3:51 pm

Hello all,

i've been bussy with the speed of my shops. I didn't find a topic with pionts for the speed. These steps speeded up my shop, So lets go.

First test your page. You can do it with these two online tests.
https://developers.google.com/pagespeed/
http://loads.in/
Use http://whichloadsfaster.com/ to check your shop against a known shop like amazone. You can see what's mandatory for shops and how your shop is doing.
This way you can see the improvement you made.

1. Remove category count, product count for specials, best sold, etc. U could use this extention: http://www.opencart.com/index.php?route ... ESC&page=3

2. Use cache from your server. (htacces) http://www.askapache.com/htaccess/apach ... es_Headers

Code: Select all

# turn on the module for this directory
<IfModule mod_expires.c>
    ExpiresActive on
    # set default
    ExpiresDefault "access plus 24 hours"
    ExpiresByType image/jpg "access plus 1 months"
    ExpiresByType image/gif "access plus 1 months"
    ExpiresByType image/jpeg "access plus 1 months"
    ExpiresByType image/png "access plus 1 months"
    ExpiresByType text/css "access plus 1 months"
    ExpiresByType text/javascript "access plus 1 months"
    ExpiresByType application/javascript "access plus 1 months"
    ExpiresByType application/x-shockwave-flash "access plus 1 months"
</IfModule>
3. render your page well (image width and height is mostly forgotten) . Check with https://developers.google.com/pagespeed/

4. optimize your code! Put important files first in line for loading. Load jquery as late as possible!

5. Use as less files you can. Try to merge all css files into 1 css file and try to merge as many as possible .js files into 1 file. This will decrease your server requests.

6. shrink your .css and .js files. http://www.refresh-sf.com/yui/#output REMIND TO BACK UP ORIGINAL FILES

7. shrink your image files. These will consume the most loadtime. So that will improve the total loading time the most. http://www.imageoptimizer.net/. For photo use .JPG For drawn picures use .PNG

8. check if your ISP has GZIP on. And turn it on in your opencart admin. You can do that within the tab "System" --> "Settings" --> "Server".

For what I know is that visitors will leave within 3seconds if nothing is showing. Total loading time is different from the first load where your visitors see what your page is about. A low first loading time will probably decrease your bounce rate. You can see here http://loads.in/ how your page shows on a timeline. Test it with different browsers.

These points will not only speed up your shop but also improve your SERP since loading time is important for ranking.


If there are more points that will speed up a opencart shop, just reply them.

Good luck and get speeding tickets ;)

My shops running Opencart Multistore:
Koptelefoon, audio kabels en speakers kopen
Led lampen en verlichting
Alle kabels- audiokabel, computerkabel, stroomkabel
Koptelefoon en In ear oordopjes / oortjes Apple iPhone, Samsung Smartphone
Smartphone hoesjes en oordopjes Apple iPhone en Samsung
Online Aanbiedingen en Sales
Hoesjes, Covers en accessoires Tablet en smartphone

User avatar
bertjebel
Active Member
Posts
117
Joined
Tue Jun 21, 2011 11:17 am
Top

Re: Speed up your opencart shop

Quote

Post by cosmicx » Mon Jan 23, 2012 5:28 pm

i've bookmarked this one for future use. currently, my site is under a local dev server.
cosmicx
Active Member
Posts
150
Joined
Mon Jan 09, 2012 6:27 pm
Top

Re: Speed up your opencart shop

Quote

Post by bertjebel » Tue Jan 24, 2012 4:40 am

I forgot tot tell that with Google Analytics you can measure the time page load.

You have to add " _trackPageLoadTime(); "

so the part of your tracking code is like this:

Code: Select all

_gaq.push(['_setAccount', 'UA-12345-1']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
or

Code: Select all

var pageTracker = _gat._getTracker("UA-12345-1");
pageTracker._trackPageview();
pageTracker._trackPageLoadTime();
More information: http://code.google.com/intl/nl-NL/apis/ ... geLoadTime
Last edited by bertjebel on Wed Jan 25, 2012 2:21 am, edited 1 time in total.

My shops running Opencart Multistore:
Koptelefoon, audio kabels en speakers kopen
Led lampen en verlichting
Alle kabels- audiokabel, computerkabel, stroomkabel
Koptelefoon en In ear oordopjes / oortjes Apple iPhone, Samsung Smartphone
Smartphone hoesjes en oordopjes Apple iPhone en Samsung
Online Aanbiedingen en Sales
Hoesjes, Covers en accessoires Tablet en smartphone

User avatar
bertjebel
Active Member
Posts
117
Joined
Tue Jun 21, 2011 11:17 am
Top

Re: Speed up your opencart shop

Quote

Post by qahar » Tue Jan 24, 2012 2:00 pm

I use something similiar to this from the html5-boilerplate.

But by inserting ExpiresByType your returning visitor will not see any change on your stylesheet or javascript for a month, since it cached.
To get the best result, It's a good practice to versioning the stylesheet and javascript on header.tpl through url parameter. It will force visitor browser to load the new stylesheet.

Code: Select all

stylesheet.css?v=1.14
User avatar
qahar
Expert Member
Posts
2096
Joined
Tue Jun 29, 2010 10:24 pm
Location - Indonesia
Top

Re: Speed up your opencart shop

Quote

Post by Qphoria » Tue Jan 24, 2012 10:26 pm

qahar wrote:I use something similiar to this from the html5-boilerplate.

But by inserting ExpiresByType your returning visitor will not see any change on your stylesheet or javascript for a month, since it cached.
To get the best result, It's a good practice to versioning the stylesheet and javascript on header.tpl through url parameter. It will force visitor browser to load the new stylesheet.

Code: Select all

stylesheet.css?v=1.14
Thats a good tip.. I've been using

Code: Select all

stylesheet.css? . <?php echo time(); ?>
to always force update but the version option makes a lot more sense and cuts down on unnecessary reload. On this idea... perhaps for automated versioning you could generate the md5 hash for the css file and add that to the end.. then it would always automatically change only when you edit the file. The only catch is that you have to run the md5_file() function on the file for each page load which may be more harmful

Image

User avatar
Qphoria
Administrator
Posts
20056
Joined
Tue Jul 22, 2008 3:02 am
Top

Re: Speed up your opencart shop

Quote

Post by qahar » Tue Jan 24, 2012 11:57 pm

Qphoria wrote:to always force update but the version option makes a lot more sense and cuts down on unnecessary reload. On this idea... perhaps for automated versioning you could generate the md5 hash for the css file and add that to the end.. then it would always automatically change only when you edit the file. The only catch is that you have to run the md5_file() function on the file for each page load which may be more harmful
Good idea too. Even it harmfull but we have automatic option, and it's the price of being lazy to versioning manually wkwkwk :D
User avatar
qahar
Expert Member
Posts
2096
Joined
Tue Jun 29, 2010 10:24 pm
Location - Indonesia
Top

Re: Speed up your opencart shop

Quote

Post by Moggin » Mon Feb 06, 2012 11:52 pm

qahar wrote:.....
To get the best result, It's a good practice to versioning the stylesheet and javascript on header.tpl through url parameter. It will force visitor browser to load the new stylesheet.

Code: Select all

stylesheet.css?v=1.14
This looks very useful. Can anyone help with applying this code - what goes where, exactly? Do you have to rename your stylesheet? Many thanks for any advice..
Moggin
Active Member
Posts
1084
Joined
Wed May 05, 2010 4:56 am
Top

Re: Speed up your opencart shop

Quote

Post by 92marriw8 » Tue Feb 07, 2012 2:26 pm

i've bookmarked this one for future use. currently, my site is under a local dev server.






Image
92marriw8
Newbie
Posts
6
Joined
Sun Feb 05, 2012 11:03 am
Top

Re: Speed up your opencart shop

Quote

Post by Moggin » Fri Feb 10, 2012 12:23 am

Moggin wrote:
qahar wrote:.....
To get the best result, It's a good practice to versioning the stylesheet and javascript on header.tpl through url parameter. It will force visitor browser to load the new stylesheet.

Code: Select all

stylesheet.css?v=1.14
This looks very useful. Can anyone help with applying this code - what goes where, exactly? Do you have to rename your stylesheet? Many thanks for any advice..
Visited stackoverflow etc, and am only slightly wiser. :(

Is this how it works:
1) If you're updating CSS, change the CSS version number in the header.tpl
2) upload the new stylesheet - but don't rename it. The query string forces a reload of the stylesheet if you change the version number in the header.tpl
?
Moggin
Active Member
Posts
1084
Joined
Wed May 05, 2010 4:56 am
Top

Re: Speed up your opencart shop

Quote

Post by Brook » Tue Feb 14, 2012 12:13 pm

Can some please explain how to implement CSS versioning? Say that I modify a CSS that is referenced in catalog\view\template\common\header.tpl, what changes do I need to make to implement CSS versioning?

Is this just a matter of renaming the CSS file with a version number tacked on the end of the CSS file name? And then change all references to the CSS in header.tpl the new CSS file name?

Thank you for your help.
Brook
Active Member
Posts
447
Joined
Wed Feb 24, 2010 12:15 am
Top

Re: Speed up your opencart shop

Quote

Post by Moggin » Tue Feb 14, 2012 9:11 pm

Hi Brook. It seems to work by adding a query string to the end of the stylesheet reference in the header.tpl .
stylesheet.css?v=1.14

But the stylesheet keeps its original filename, stylesheet.css.

So when you upload a fresh version of stylesheet.css, you then change the URL in the header.tpl so it reads (eg) stylesheet.css?v=4 and reupload the header. The page will then fetch the new stylesheet.

Have been testing this for a few days and it seems to work this way.
Moggin
Active Member
Posts
1084
Joined
Wed May 05, 2010 4:56 am
Top

Re: Speed up your opencart shop

Quote

Post by Brook » Tue Feb 14, 2012 10:41 pm

Moggin,

Thank you for your response. So basically the only thing that changes is any reference to the CSS file in the header.tpl ? I just add a version number on the end of the code that references the CSS File in the header.tpl file and then reupload both the CSS File with its original file name and the new header.tpl file?
Brook
Active Member
Posts
447
Joined
Wed Feb 24, 2010 12:15 am
Top

Re: Speed up your opencart shop

Quote

Post by Moggin » Wed Feb 15, 2012 3:15 am

...Hi Brook: yes, that's it exactly. Add the ?=v1.17 etc to the end of the css URL in the header.tpl. That will force the page to reload the CSS file, when you make a change to it.

This is what I did, and it worked.

Couldn't find a step by step explanation, though this one is not bad.
http://www.stefanhayden.com/blog/2006/0 ... hing-hack/
Moggin
Active Member
Posts
1084
Joined
Wed May 05, 2010 4:56 am
Top

Re: Speed up your opencart shop

Quote

Post by Brook » Wed Feb 15, 2012 3:28 am

Thank you for the clarification.
Brook
Active Member
Posts
447
Joined
Wed Feb 24, 2010 12:15 am
Top

Re: Speed up your opencart shop

Quote

Post by LEDtopia » Mon Mar 19, 2012 9:26 pm

I was just reading through this all and I was wondering if you can use the server cache and .css version together?
Or is this a problem.
I did the server cache and that alone got my site from 61 to 85 points.

Just wondering what the best route to take is.
LEDtopia
Newbie
Posts
6
Joined
Sat Mar 17, 2012 9:00 am
Top

Re: Speed up your opencart shop

Quote

Post by Moggin » Mon Mar 19, 2012 10:28 pm

LEDtopia wrote:I was just reading through this all and I was wondering if you can use the server cache and .css version together?
Or is this a problem.
I did the server cache and that alone got my site from 61 to 85 points.

Just wondering what the best route to take is.
yes, that should be fine.
The thing is, if you use caching, the css is cached as well - as qahar mentioned above. Stylesheet versioning gets around caching by forcing a reload of the CSS, without your having to actually rename the stylesheet. If your stylesheet hasn't changed though, no need for versioning.
Moggin
Active Member
Posts
1084
Joined
Wed May 05, 2010 4:56 am
Top

Re: Speed up your opencart shop

Quote

Post by harpoonlouis » Mon Mar 19, 2012 10:51 pm

I just got an initial improvement adding the standard code to my htaccess but the speed test on tool.pingdom.com/ftp still reports a need to specify an expiration of at least a week on seveal page elements.

It looks as if gifs pulled from Worldpay aren't responding to the htaccess instruction nor are .js called from on site

Examples

https://secure.worldpay.com/jsp/shopper ... rldPay.gif
http://www.google-analytics.com/ga.js
http://mydomain.com/catalog/view/javascript/common.js

htaccess exerts

ExpiresByType text/x-javascript "access 1 month"
ExpiresByType image/gif "access 1 year"

Do I need to moduf the address for the gif as they are offsite and is this the right code to cache .js files?

Thanks
harpoonlouis
New member
Posts
20
Joined
Thu Dec 01, 2011 9:16 pm
Top

Re: Speed up your opencart shop

Quote

Post by expanism » Tue Mar 20, 2012 2:42 am

Take a look at http://code.google.com/p/minify/

Features

- Combines and minifies multiple CSS or JavaScript files into a single download
- Uses an enhanced port of Douglas Crockford's JSMin library and custom classes to minify CSS and HTML
- Caches server-side (files/apc/memcache) to avoid doing unnecessary work
- Responds with an HTTP 304 (Not Modified) response when the browser has an up-to-date cache copy
- Most modules are lazy-loaded as needed (304 responses use minimal code)
- Automatically rewrites relative URIs in combined CSS files to point to valid locations
- With caching enabled, Minify is capable of handling hundreds of requests per second on a moderately powerful server.
- Content-Encoding: gzip, based on request headers. Caching allows it so serve gzipped files faster than Apache's mod_deflate option!
- Test cases for most components
- Easy integration of 3rd-party minifiers
- Separate utility classes for HTTP encoding and cache control
expanism
New member
Posts
50
Joined
Fri Sep 30, 2011 8:43 pm
Top

Re: Speed up your opencart shop

Quote

Post by harpoonlouis » Tue Mar 20, 2012 6:23 am

Thanks for that, I have the WP Miify running elswhere didn't realise their was a generic , looks a bit more fiddly but will have a go
harpoonlouis
New member
Posts
20
Joined
Thu Dec 01, 2011 9:16 pm
Top

Re: Speed up your opencart shop

Quote

Post by Moggin » Tue Mar 20, 2012 8:34 am

harpoonlouis wrote: It looks as if gifs pulled from Worldpay aren't responding to the htaccess instruction nor are .js called from on site

Examples

https://secure.worldpay.com/jsp/shopper ... rldPay.gif
http://www.google-analytics.com/ga.js
http://mydomain.com/catalog/view/javascript/common.js
.htaccess only works on your server AFAIK. Not much you can do about content pulled from elsewhere (I don't think, anyway).

There are some good code samples at ardamis and stackoverflow to check syntax for caching in .htaccess. The examples suggest 2 lines for js, if you use ExpiresByType

Code: Select all

ExpiresByType application/x-javascript "access plus 2 month"
 ExpiresByType text/javascript "access plus 2 month"
expanism wrote:Take a look at http://code.google.com/p/minify/
@expanism - thanks, good stuff :good:
Moggin
Active Member
Posts
1084
Joined
Wed May 05, 2010 4:56 am
Top
Post Reply
Return to “Installation, Upgrade, & Config Support”
Who is online

Users browsing this forum: No registered users and 24 guests