OpenCart Community

Posted: **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

Posted: **Mon Jan 23, 2012 5:28 pm**

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

Posted: **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

Posted: **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

Posted: **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

Posted: **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

Posted: **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..

Posted: **Tue Feb 07, 2012 2:26 pm**

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

Posted: **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
?

Posted: **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.

Posted: **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.

Posted: **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?

Posted: **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/

Posted: **Wed Feb 15, 2012 3:28 am**

Thank you for the clarification.

Posted: **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.

Posted: **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.

Posted: **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

Posted: **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

Posted: **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

Posted: **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

OpenCart Community

Speed up your opencart shop

Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop

Re: Speed up your opencart shop