Tips, Tricks, and Hints

[gothstone]

It would be nice it we had a forum called Tips, Tricks, and Hints, then everything below could be separate posts in it. For now, here are several things everyone should try on their site:

Validation:
Before you do anything else, find and fix all the errors on your site. The first 2 places to start are http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/
After you fix any errors, and have validated, I suggest creating a “Certifications Page” and putting up their logos, with links to check your site. Not only will this improve customer confidence, but it makes it a cinch for you to recheck your site any time you make a change.
I also suggest YSLOW - http://developer.yahoo.com/yslow/. It’s a plugin for Firebug, which is a plugin for firefox. It will help you find places to sped up your website.

GZIP – to the max!
Everyone should know by know that you should go to Admin->Configuration->GZip Compression and enable GZip Compression. That’s fine for a start. BUT TURN THAT OFF IF YOU USE THESE NEXT TIPS ABOUT COMPRESSION!!!!!

IMPORTANT DISCLAIMER: these php_flag or php_value settings will cause you problems if the server is running phpsuexec or suphp. Check with your hosting company before implementing them to see if they are allowed, and what the best method is to implement them, if any.

To get the best compression add this to your .htaccess file in the root of the store:

php_flag zlib.output_compression on
php_value zlib.output_compression_level 5 

This allows you to set the compression level. I find 5 to be the best, but you can experiment with any number between 1 and 9.

But wait, that only handles your .php files. That’s a shame since CSS and JS compress so well. To compress your CSS add a .htaccess fine in the includes/yourtemplatename/css directory containing:

<FilesMatch ".*\.css$">
  Order Allow,Deny
  Allow from all
  AddHandler application/x-httpd-php .css
  php_value auto_prepend_file gzip-css.php
  php_flag zlib.output_compression on
  php_value zlib.output_compression_level 5
</FilesMatch> 

This tells php to grab all .css files as they are being sent out, jam some php in them, and compress them. You will also need to add a file called gzip-css.php to the same directory containing:

<?php 
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
?>

This tells the users browser “Look, I know this looks like php, but its really CSS, so cope with it, and don’t cache it forever.”
You can apply the same technique to your javascript files.

CSS shrinking:
Lets get the CSS as small as possible! Copy your /includes/templates/yourtemplatename/css directory to /includes/templates/yourtemplatename/uncompressed-css
Then, put each css file through this webpage: http://cdburnerxp.se/cssparse/css_optimiser.php
Set Compression to highest, and leave the rest of the settings at defaults. Then replace your css with its output. Your new CSS files will be much smaller, and faster to download. The catch is that they are almost impossible to read. So enytime you make a change, change the copy in the uncompressed-css folder, and then recompress it like this again for the css folder.

Double your page rank:
Chances are that Google has indexed your site as least twice. Once for the www.domain.com and once for just domain.com . The problem is that your page rank on each page is separate, its too stupid to add them up. Solution? Send everyone to the exact same page. Since most of us use ssl on the www.domain.com side, here is how to redirect everyone to www.domain.com . Add this to your root level .htaccess:

RewriteEngine On
RewriteCond %{HTTP_HOST} !^[url]www.domain.com[/url] [NC]
RewriteCond %{HTTP_HOST} !^$
RewriteCond %{HTTP_HOST} !^dev\. [NC]
RewriteCond %{SERVER_PORT} !^443
RewriteRule ^.*$ http://www.domain.com/$1 [L,R=301]
RewriteCond %{HTTP_HOST} !^[url]www.domain.com[/url] [NC]
RewriteCond %{HTTP_HOST} !^$
RewriteCond %{HTTP_HOST} !^dev\. [NC]
RewriteCond %{SERVER_PORT} ^443
RewriteRule ^.*$ https://www.domain.com/$1 [L,R=301] 

This will handle the redirect for both http and https requests, and has an exemption for a sub domain (dev.domain.com in this case) that can be expanded just by repeating the line including dev with other sub domains.

Control you cache:
You know better than anyone how often your site is likely to change. If you let everyone else know you will gain control of how long browsers and web accelerators save pieces of your site. Add this to your root .htaccess and adjust the times (in seconds) as needed:

ExpiresActive On
# Set default expiry to 7 days after last access:
ExpiresDefault A604800
ExpiresByType image/x-icon A86400
ExpiresByType application/x-javascript A2419200
ExpiresByType text/css A2419200
ExpiresByType text/html A86400 

For beginners, just a quick explanation that might help: For the Expires, the numbers like A604800 signify the number of seconds before the user's PC will request an update of those files. You can change the numbers to reflect days or months or years if you like. You can also specifically define individual types of files, like:

# Set expiry for image files to 30 days:
expiresbytype image/gif A2592000
expiresbytype image/jpeg A2592000 

Kill etags:
Etags are another way to control caching, but they generally don’t work. They also add a lot of overhead to your headers. To kill them add this to your root .htaccess:

FileETag None 

Image optimization:
If your page loads slowly, people will leave. ZenCart can handle different sizes of images, but you have to create and upload them all manually, which is a pain. Try ImageHandler 2 to take care of all of this for you.
Now that your product images aren’t taking forever to download, look at your template. 90% of zencart users are using the tile_back.gif (or a variation of it) that comes with the classic template. This image repeats from left to right wherever you use it, and it tends to get used a lot. The problem it that’s its 11 pixels wide, but it only needs to be one pixle wide. Without changing compression, cropping it down to 1 px wide takes the file from 233b to 145b. Better yes, look into replaceing this repeating gif with a css gradient.
Get a good photo editor (I suggest Photoshop cs3, but to each his own) and play with compressing your other template images. Just today I saw someone with a logo.gif that was over 100k. 2 seconds in an image editor can reduce that to 25k with no visible loss. If you are using Photoshop, remember that the save button is evil. Always use save for web and devices.

That ought to keep everyone busy for now, I’ll add more as I think of them. If anyone else has any suggestions, please post.



Edit: disclaimer added as suggested

[Ajeh]

Suggest you read up on GZip ... GZip 1 is the best setting ...

[gothstone]

9 is the most compression, 1 is the least compression. The tradeoff here is more compression make a smaller download, but takes more CPU to zip and unzip. On the server side, this could become an issue, on the client side it is negligable. I tried 1 through 9 on my site, and had the best speed with 5, but I think each site should do their own testing, as the size of the CSS, CPU of the server, and bandwidth of the server will all affect what the best option is for a given site.

[Merlinpa1969]

you should also put a little disclimer about your htaccess improvments
that these will bust your site all to heck if the server is running phpsuexec or suphp

cant have any php overrides in the htaccess files

[gothstone]

Merlin is right of course, each change should be tested individualy and thoroughly as any one of them could conflict with something. Backups should be made frequently. I take no responsability for broken zencarts, but I will try to help.

[barnamania]

Thanks, very helpful, I had no problems with my server when implementing the above, and speed is good. I particularly like the css tool. Thanks!

[yellow1912]

To force www, the below code is simpler:

RewriteCond %{HTTP_HOST} !^www [NC]
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

--> this is to force www (without any exception, so use the code posted by gothstone for sub domain exception.

RewriteCond %{SERVER_PORT} !^443$
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]

--> this is to force ssl in case you need

[Diavire]

Before compression my html size was around 21000 bytes (according to the checker at www.websiteoptimization.com)

First I tried enabling the compression bit in .htaccess alone, this resulted in 4300-4400 bytes. I then disabled it again.

Then I tried only enabling GZip compression in the admin, this made size go down to about 4126 bytes.

Then I put turned both GZip in admin and the compression bit in my .htaccess file on and size went over 4600 bytes.

Not a big difference, but why stress your cpu more to get a bigger overall size? I went with just GZip compression in the admin.

The CSS bit was very handy though.

[Diavire]

here's an update:

Turns out the CSS compressor changed something in the code causing IE6 and 7 to color my categories list incorrectly, turning off Compress colors didn't have an effect, so I went back to uncompressed css.

[gothstone]

As to why stress the CPU for faster access, Ifigure I'm paying my host for the CPU so that my visiters can get the best experiance. Of course in a random stroke of irony I have had to change hosts, I'm now hosting on Merlins Camalot, and can't use some of these tricks. :) His hosting is in all other ways wonderfull though, and the servers are so fast it doesn't matter much.

As for the CSS optimizer messing up your code, that should not be possible. My guess is that you have an error in your CSS. Did you use the w3c validator first?