Post by Skyhigh » Mon Dec 07, 2009 3:35 am

I've been working with a few techniques over the past week to try and speed up the loading time of my site.
Mostly working with Firebug + Google Page Speed.

You can also use: http://www.webpagetest.org
to test your site too, for some more in-depth stats.


This is to make the user experience better and in anticipation of Google's recent announcement that page-loading-time will take more of a role in search results.

These are all pretty simple to do. Always backup ALL files before making any changes.
If you're not sure about any of these changes, or they don't work for you, don't do them. Simple.

By adding caching timestamps (see below) I removed about 4 seconds from page load time.

By implementing a content sub-domain (see below) I cut page load speed by another 4-5 seconds according to Google Page Speed.


Optimise Images
Obvious to some, but not others!

I'm not sure if Opencart does this by default when you upload an image, because I always compress images before uploading, but.....make sure your images are optimised!

Use PageSpeed to see how much more your images could be compressed. This is quite important for an online store with loads of images.
Or download a optimisation application like this one:
http://www.imageoptimizer.net/Pages/Home.aspx


Enable GZipping
By default your Apache install should gzip/deflate most media types, make sure it gzips css and js too - as this can help.

Code: Select all

<IfModule mod_deflate.c>
<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Caching
This one's really simple and just involves updating your .htaccess file.
Basically all the files your site uses (jpgs, gifs, css, js, etc) need to be able to tell your PC how long they should keep them for before checking for a new file.

If we don't tell the browse a "cache time" then it will get a fresh copy of the file every time....which means more bandwidth usage and getting a 'fresh' version of the site every time - which takes longer to load.

Google recommends (or Page Speed does) that files are cached at least a month - to be honest, this is a bit of a long time but...I'm sticking with what Google tell me ;)
Although I've left JS and CSS at 24 hours since I'm currently changing the site a lot - if you don't make many changes, set it to at least a month.
(PageSpeed and other optimisation tools through a fit about a 'small' 24-hour cache period, but hey...


Before on a 'fresh view' my site was transferring 400kb. On the second view it was still transferring 300kb.
After changing the htaccess, it dropped to 80kb.


So add this to your htaccess file :

Code: Select all


# Turn on Expires and set default to 0
ExpiresActive On
ExpiresDefault A0
 
# Set up caching on media files for 5 weeks
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A3024000
Header append Cache-Control "public"
</FilesMatch>
 
# Set up caching on media files for 5 weeks
<FilesMatch "\.(gif|jpg|jpeg|png|swf)$">
ExpiresDefault A3024000
Header append Cache-Control "public"
</FilesMatch>
 
# Set up 1 day caching on commonly updated files
<FilesMatch "\.(xml|txt|html|js|css)$">
ExpiresDefault A86400
Header append Cache-Control "proxy-revalidate"
</FilesMatch>
 
# Force no caching for dynamic files
<FilesMatch "\.(php|cgi|pl|htm)$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</FilesMatch>

Content SubDomains
Ever noticed that Amazon, Ebay and other sites load resources from places like:
http://imz23.amazon.com ?

This isn't just good organisation, or load balancing with their server farms/content delivery network - it helps speed up page loading.

If you have everything on one domain, like http://www.LoveMoissanite.com, then the text, images and scripts are all requested from the same domain.
This means that the content is downloaded one after another....so your text, then your images, then your scripts... (in any random order).

If split your content on to different sub-domains then your browser can make multiple connections at the same time and download images, script, text....and any other content in parallel to each other - making the page load faster.

So while your text is loading, your images can also be loading and so can your scripts.

This explains it a bit more:
http://www.askapache.com/htaccess/apach ... mains.html


It's really simple to do, just go into your hosts admin panel and create a subdomain like:
http://images123.mydomain.com

Copy the contents of your 'image' folder into your new 'images123' folder in your www root.

Edit both your Config.php in your top level www folder and your admin folder to use the new images location.
Make sure your also update the directory location used to save images to too!

In my example, I've created a subdomain called "images.lovemoissanite.com", which creates a new folder called images.

Code: Select all

// HTTP
define('HTTP_SERVER', 'http://www.lovemoissanite.com/');
[b]define('HTTP_IMAGE', 'http://images.lovemoissanite.com/');

// HTTPS
define('HTTPS_SERVER', 'https://www.lovemoissanite.com/');
[b]define('HTTP_IMAGE', 'http://images.lovemoissanite.com/');

// DIR
define('DIR_IMAGE', '/home2/lovemois/public_html/images/');
Make sure you update all three references to your Images location in both your top level Config.php and the Admin.php.

Check your site still loads - make sure it's using the new image subdomain you've created, try and create a test product with an image to check your Admin section works well too.


If you use SSL...
Unless you can afford a wildcard certificate (which seem to start at $500...!) then you need to make sure that your SSL image location points to a non sub-domain location.
Otherwise your images will not load when someone is viewing a page using HTTPS!

So in my example, your config.php would look like this:

Code: Select all

// HTTP
define('HTTP_SERVER', 'http://www.lovemoissanite.com/');
define('HTTP_IMAGE', 'http://images.lovemoissanite.com/');

// HTTPS
define('HTTPS_SERVER', 'https://www.lovemoissanite.com/');
define('HTTPS_IMAGE', 'https://www.lovemoissanite.com/images/');

// DIR
define('DIR_IMAGE', '/home2/lovemois/public_html/images/');
Notice that if someone is using HTTPS then it will use "www.lovemoissanite.com/images".




Anyone fancy making a few mods...?
It would be helpful if we also had the option to change the directory used for scripts (js and css) so we could create a scripts.mydomain.com subdomain and parallelise those downloads too.

Additionally, if anyone fancies doing a bit more work - being able to use multiple content sub domains would also help speed a site up too.
So instead of having one content subdomain like "images.mydomain.com", we could use up to 5 and browsers could parallel download from 5 locations - making it even faster:
"image1.mydomain.com"
"image2.mydomain.com"
...you get the idea.

This (in theory) could be done fairly easily...

1. Allow users to specify an array of Image directories in the Config.

2. When a product is created, or a product image added, save the image to every image directory - effectively cloning the content of the Image directory to all the new image directories.

3. When a user requests a page, pick a image URL at random (or start at 0 in the array and loop through each entry..).
So images would load from:
image123.mydomain.com
anotherimagedomain.mydomain.com
images333.mydomain.com
images555.mydomain.com


So the config file would end up looking something like:

Code: Select all

// HTTP
define('HTTP_SERVER', 'http://www.lovemoissanite.com/');
define('HTTP_IMAGE_0', '[b]http://images.lovemoissanite.com/[/b]');
define('HTTP_IMAGE_1', '[b]http://images66.lovemoissanite.com/[/b]');
define('HTTP_IMAGE_2', '[b]http://i44.lovemoissanite.com/[/b]');
define('HTTP_IMAGE_3', '[b]http://images87.lovemoissanite.com/[/b]');

// HTTPS
define('HTTPS_SERVER', 'https://www.lovemoissanite.com/');
define('HTTPS_IMAGE_0', '[b]https://www.lovemoissanite.com/images/[/b]');
define('HTTPS_IMAGE'_1, '[b]https://www.lovemoissanite.com/images66/[/b]');
define('HTTPS_IMAGE_2', '[b]https://www.lovemoissanite.com/i44/[/b]');
define('HTTPS_IMAGE_3', '[b]https://www.lovemoissanite.com/images87/[/b]');

// DIR
define('DIR_IMAGE_0', '/home2/lovemois/public_html/images/');
define('DIR_IMAGE_1', '/home2/lovemois/public_html/images67/');
define('DIR_IMAGE_2', '/home2/lovemois/public_html/i44/');
define('DIR_IMAGE_3', '/home2/lovemois/public_html/images87/');


LoveMoissanite.com - Moissanite Rings - Proudly Powered by Opencart
[How To] Speed Up Page Content with Opencart - Opencart advocate since 2009


New member

Posts

Joined
Fri Sep 11, 2009 8:12 pm

Post by moggiex » Mon Dec 07, 2009 7:46 am

Superb post, although in a dev environment I'd not suggest caching anything :)

To add to the above several mods that are required are not enabled by default these are:

1. mod_headers
2. mod_expire
3. mod_headers

See http://www.virtualistic.nl/archives/73 on how to load them, once enabled they'll stop the server 500 errors you've most likely just received (like I just got).

Just remember to reload apache!
/etc/init.d/apache2 force-reload

Matt

Code: Select all

It was like that when I found it, honest!


User avatar
Active Member

Posts

Joined
Mon Nov 09, 2009 9:55 pm

Post by moggiex » Mon Dec 07, 2009 7:53 am

Just to throw some stats out there, using http://www.webpagetest.org/ and a US based server and the site hosted in the UK (Dulles, VA - 1.5Mbps ADSL)

Before:
First View (9.515s)
Repeat View (6.484s)

After htaccess changes:
First View (8.033s)
Repeat View (4.029s)

Great results and thats before I've even tried the subdomains for content.

Matt

Code: Select all

It was like that when I found it, honest!


User avatar
Active Member

Posts

Joined
Mon Nov 09, 2009 9:55 pm

Post by Skyhigh » Mon Dec 07, 2009 9:25 pm

I keep forgetting that the options aren't enabled by default on Apache!

Although many hosts now enable them themselves for new accounts, e.g. FastDomain (aka HostMonster) who I use.

If your doing a lot of dev then you might want to switch back to a plain .htaccess file without the caching - although the caching is only a 'recommendation' to your browser and hitting F5/Refresh will grab a fresh copy for you - but it can get very annoying having to hit F5 constantly.

LoveMoissanite.com - Moissanite Rings - Proudly Powered by Opencart
[How To] Speed Up Page Content with Opencart - Opencart advocate since 2009


New member

Posts

Joined
Fri Sep 11, 2009 8:12 pm

Post by moggiex » Mon Dec 07, 2009 10:27 pm

With an image sub domain and some other work on the extra php code I put in and some more image caching, I have got page load times to down to the 3 seconds realm and most are 3.1 to 3.2 seconds range and repeat page views are a fraction of what they were.

I am sure there is other stuff I could do (altering images for one), but from 9 seconds to 3, lets not be too greedy eh?!

Many, many thanks for the post.

Can a forum OP pin this thread?

Matt

Code: Select all

It was like that when I found it, honest!


User avatar
Active Member

Posts

Joined
Mon Nov 09, 2009 9:55 pm

Post by dbstr » Mon Dec 07, 2009 10:29 pm

moggiex wrote:and some other work on the extra php code I put in
What would that be?

Request Reviews v1.0 released.


Active Member

Posts

Joined
Sun Aug 30, 2009 12:20 am

Post by moggiex » Mon Dec 07, 2009 11:32 pm

dbstr wrote:
moggiex wrote:and some other work on the extra php code I put in
What would that be?
I don't use OpenCart as 'true' shoppingcart, I use it as a shell for another purpose.

Matt

Code: Select all

It was like that when I found it, honest!


User avatar
Active Member

Posts

Joined
Mon Nov 09, 2009 9:55 pm

Post by banane » Sun Dec 20, 2009 12:26 am

I've an issue enabling caching of contents because mod_expires is not loaded on my server and the provider tells he can't do that (may be simply he doesn't want..)
I've seen that there is the possibility to modify the HTTP Headers adding some parameters like "Cache-Control: max-age=3600, must-revalidate" but I don't know which files I need to modify..
Anyone can help me? Thank you

User avatar
New member

Posts

Joined
Fri Jul 31, 2009 6:30 pm


Post by migz » Wed Mar 24, 2010 10:07 am

changing mydomain.com/image to http://images123.mydomain.com really working? is it faster?

Active Member

Posts

Joined
Mon Feb 01, 2010 2:13 am

Post by banane » Sun May 30, 2010 11:08 pm

why not to add

Code: Select all

<?php flush(); ?>
between </head> and <body>?
it speeds up the rendering because sends asap the first part of the page
more info here: http://developer.yahoo.com/performance/rules.html#flush

User avatar
New member

Posts

Joined
Fri Jul 31, 2009 6:30 pm


Post by twuncher » Tue Jun 01, 2010 6:05 pm

great post thanks for the info will be testing it out :)

Newbie

Posts

Joined
Sat May 15, 2010 7:42 pm

Post by smsmarketeers » Fri Jun 04, 2010 7:17 am

Thanks to your post and a few others tweaks in PHP and Apache (I am a Server Administrator) I went from a 73/100 score up to an 87/100 and from 510kB to 316kB. It helps that I own my server and everything is Linux based on the command line no control panels so my server is really stripped down and runs very well anyways. Thanks again!

Adam L Miller
SMS Marketeers
www.smsmarketeers.com
Pioneers of SMS Technology and Applications


User avatar
New member

Posts

Joined
Thu May 13, 2010 7:29 am
Location - Phoenix, AZ, USA

Post by Brook » Mon Jul 05, 2010 10:52 am

I have OpenCart 1.4.7 installed. I am trying to implement a few suggestions that you have made in this post regarding speeding up page content for my website, specfically caching of images and other commonly used files.

I recognize that there is a file named ".htaccess.txt" in the root folder of my website. I am not familar with modifying this file, so I might be doing something wrong. I am assuming that I need to rename the file to ".htaccess" once I have made changes, not sure?

In your post you mention caching images and caching commonly used files, that makes sense to me, so I went and pasted the following code into my ".htaccess.txt" file
(code from your post)

Code: Select all

# Turn on Expires and set default to 0
ExpiresActive On
ExpiresDefault A0

# Set up caching on media files for 5 weeks
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A3024000
Header append Cache-Control "public"
</FilesMatch>

# Set up caching on media files for 5 weeks
<FilesMatch "\.(gif|jpg|jpeg|png|swf)$">
ExpiresDefault A3024000
Header append Cache-Control "public"
</FilesMatch>

# Set up 1 day caching on commonly updated files
<FilesMatch "\.(xml|txt|html|js|css)$">
ExpiresDefault A86400
Header append Cache-Control "proxy-revalidate"
</FilesMatch>

# Force no caching for dynamic files
<FilesMatch "\.(php|cgi|pl|htm)$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</FilesMatch>
After pasting the code above into my ".htaccess.txt" file, I renamed the ".htaccess.txt" file to ".htaccess"
Is this correct, should I rename the file or leave the file with the original file name?

After pasting the above code in my ".htaccess.txt" file my file looks like this

Code: Select all

# 1.To use URL Alias you need to be running apache with mod_rewrite enabled. 

# 2. In your opencart directory rename htaccess.txt to .htaccess.

# For any support issues please visit: http://www.opencart.com

Options +FollowSymlinks

RewriteEngine On
RewriteBase / 
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)\?*$ index.php?_route_=$1 [L,QSA]

# Turn on Expires and set default to 0
ExpiresActive On
ExpiresDefault A0

# Set up caching on media files for 5 weeks
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A3024000
Header append Cache-Control "public"
</FilesMatch>

# Set up caching on media files for 5 weeks
<FilesMatch "\.(gif|jpg|jpeg|png|swf)$">
ExpiresDefault A3024000
Header append Cache-Control "public"
</FilesMatch>

# Set up 1 day caching on commonly updated files
<FilesMatch "\.(xml|txt|html|js|css)$">
ExpiresDefault A86400
Header append Cache-Control "proxy-revalidate"
</FilesMatch>

# Force no caching for dynamic files
<FilesMatch "\.(php|cgi|pl|htm)$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</FilesMatch>
My problem is that after pasting the code above in my ".htaccess" file my website is unable to find commonly used images for pages on my website, a box with an "x" displays where the image was suppose to display, as if the website can't find the image file

A good example is my store logo in the header of the website. Yes I have an image hard coded in the header, but why would the ".htaccess.txt" code changes cause the image to not load in the header of my website? I also notice that other commonly used images on my website do not load correctly on my website. The issue is not specific to the header logo image.

If I leave the ".htaccess.txt" file alone in my root folder and do not rename the file to ".htaccess" then all of the images load on all of my pages correctly.

Any suggestions?

Active Member

Posts

Joined
Wed Feb 24, 2010 12:15 am

Post by kedgetech » Wed Aug 11, 2010 7:15 am

Good details.

User avatar
Active Member

Posts

Joined
Mon Mar 22, 2010 5:20 pm
Location - USA, Australia, India

Post by Moggin » Fri Aug 13, 2010 10:43 pm

Many thanks to Skyhigh for the posting. With Google now emphasising page speed as well as content, I think more people will be taking an interest in this.

I'm totally new to this, but the Pagespeed 1.8 Firebug plugin helped me understand it better. So if anyone's interested, that's one place to start. It includes tools to optimise some aspects of your site on the spot.

I didn't have much luck with the .htaccess changes, and variations on them (eg gzip and caching/expiration dates) - it had no effect, so perhaps the server is not set up to accommodate it. Is there any other way to do it, other than by .htaccess? A fair few sites tell you what to do, but not how - the assumption being, maybe, that you're a pro and you know anyway :)

However, optimising images, combining CSS, minifying, specifying image sizes in the .tpl files etc did pull it up to a respectable 82/100.

Any more hints & tips welcome.

Active Member

Posts

Joined
Wed May 05, 2010 4:56 am

Post by Rattus » Mon Aug 23, 2010 12:20 am

Hello there,

I'm new to OpenCart and quite the novice.

I have a shop setup and then came across this post.

I've made a image subdomain.
Copied all the files from the original image folder to the subdomain image folder keeping the original directory structure.
I then went in and changed the config.php on both the cart's root and in the admin folder.

I renamed the original image folder, just as a test.

I went back to a catagories and products to see if the images were being pulled from the new folder or the old.
Most of the images are being pulled from the cache folder in the original image folder.

What am I missing here??

**I see that the image manager hasn't changed. How do I get this to store in the new dir?***

Newbie

Posts

Joined
Mon Aug 23, 2010 12:13 am

Post by Moggin » Tue Sep 21, 2010 10:21 pm

I tried referencing the jquery-1.3.2.min script from Google's CDN. (Here's why). As Google now offers https: transfer I felt it was worth a try.

It seems to work, and my page loaded faster, but does anyone have views on this? Obviously it's no good if you sell to a country that blocks Google. (Does anyone else block Google?)

This is the code change:
catalog/view/theme/YOUR-THEME/template/common/header.tpl

this:

Code: Select all

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>
was replaced with:

Code: Select all

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
The http is missing so that the content is sent over http or https as appropriate. ( Reference here, credit to Aaron Wagner). Views or advice welcome.

Active Member

Posts

Joined
Wed May 05, 2010 4:56 am

Post by konservasi » Fri Oct 08, 2010 12:00 pm

Rattus wrote:Hello there,

I'm new to OpenCart and quite the novice.

I have a shop setup and then came across this post.

I've made a image subdomain.
Copied all the files from the original image folder to the subdomain image folder keeping the original directory structure.
I then went in and changed the config.php on both the cart's root and in the admin folder.

I renamed the original image folder, just as a test.

I went back to a catagories and products to see if the images were being pulled from the new folder or the old.
Most of the images are being pulled from the cache folder in the original image folder.

What am I missing here??

**I see that the image manager hasn't changed. How do I get this to store in the new dir?***
may be you just wait a second to make the change effect

Thanks for the tutorial, my opencart is faster right now..but my javascript in home, can't load..what is the mistake?

by the way, I follow the tutorial, make htaccess change, make the subdomain, but I still keep the original directory

need suggestion

thanks before

http://galerigis.com

http://galeritiket.net


Active Member

Posts

Joined
Wed May 05, 2010 2:29 am


Post by jty » Sat Oct 09, 2010 2:16 pm

konservasi wrote:..but my javascript in home, can't load..what is the mistake?
You need to point the javascript to the new location. I think it's in header.tpl.

jty
Active Member

Posts

Joined
Sat Aug 30, 2008 8:19 am

Post by fireatwire » Thu Oct 14, 2010 5:29 pm

What about serving the static content from another domain. It shouldn't be a big problem changing the header.tpl file and serve stylesheets and javascript from another domain. But how shall I do if I use SSL, can I put a SSL check in the header.tpl and either take the files from my secure domain or from the static (non-SSL) domain?

New member

Posts

Joined
Wed Feb 03, 2010 5:21 am
Who is online

Users browsing this forum: No registered users and 50 guests