How to Speed Up My Site?

I'm currently trying to fix some of the low grades I'm getting from "YSlow" report (firefox/firebug add-in)...
this has led me to try multiple compression methods for CSS and JS files, as well as get rid of the "ETag" error and include an "Expires" header.

I can't seem to get ANY of these methods to work though...
I started with Minify, then onto SmartOptimizer and finally just straight htaccess commands.

Nothing seems to register.

This stuff isn't that complicated to setup, but after testing all these methods I'm certain I'm being roadblocked by something...
either something with ZenCart, or something with my web host (HostGator).

So why can't I get my CSS and JS files compressed?

Insight would be appreciated...

You problem isn't with Zen Cart :) guess what that leaves ...

I figured as much, but I don't understand why...
HostGator is a very open system, they allow quite a bit and seem to have everything I've needed so far (particularly with ZC), already setup.

Why would they disallow gzip compression on CSS and JC files?
For that matter, why doesn't ZenCart's use of the gzip function include this feature already?

Ultimately, why would anyone NOT want to compress these files?
All I'm trying to do is get my site running faster...which is something that everyone should want.

Compressing CSS files is not something in Zen Cart's control. They're served directly from the webserver.

How big is your CSS that it matters?

Hi Kim,

on a site I'm working over (Lida took a look at it too), the 'gzipping' of css and js would just give an help to improve performances, not so great alone, but you know one byte here one there, putting all together (and multiplying for the 'first-access' visitors), there would be benefit both for the visitors and for the server load and bandwidth consumption.

So, is there a side effect causing to prefer not to gzip css and js files?

In the example above, total size of js is 131Kb and css is 194Kb (ok there will be some work to optimize both js and css, but gzipping 'em would be a benefit aswell, or not?)

194Kb

For CSS? It is all text! That needs more than just some compression - it needs cleaning. Remove anything that isn't being used, learn the CSS shortcuts and put each declaration on one line.

Kim:

For CSS? It is all text! That needs more than just some compression - it needs cleaning. Remove anything that isn't being used, learn the CSS shortcuts and put each declaration on one line.

Yeah Kim, I know. I'm preparing a relation on what must be done and then I'll give it to the client (and we'll see who'll take care to adjust things, me or who created the site...).

Other than cleaning, shortcuts and one row declarations, there's also one stylesheet_old.css (funny eh?)

Not speaking about prototype and scriptaculous (not yet understood why are there...) not minified...

Not speaking about png images not optimized and so on.

Well, this said, again the question: is there a reason for which is better not to gzip js and css files? (the only one I know of would be cpu usage, but I believe that having a problem with cpu usage from using gzip is very hard). More: actually gzip should compress just the only one html file present in Zen Cart, so if it is worth for the html file surely will be also for css and js.

Bye

Your real problem is not likely how fast the files are downloaded. It's likely either a result of a slow connection or server and/or the sheer size of the files.

You can probably gzip the css and js files without adverse side-effects ... if you can figure out how. That's a function of your webserver, not Zen Cart.

If you're referring to gzip compression provided by PHP (which Zen Cart uses), then in order to cause the compression, you have to serve the files via PHP, instead of as direct files that are loaded and cached by the browser. Thus, you'd have to completely change how you deliver your content.

If you're simply referring to compacting your CSS by removing spaces and line-breaks in the physical files that are downloaded by the browser, there are various tools available to assist with that after you've optimized the file content by removing anything that's not needed.

DrByte:

Your real problem is not likely how fast the files are downloaded. It's likely either a result of a slow connection or server and/or the sheer size of the files.

You can probably gzip the css and js files without adverse side-effects ... if you can figure out how. That's a function of your webserver, not Zen Cart.

If you're referring to gzip compression provided by PHP (which Zen Cart uses), then in order to cause the compression, you have to serve the files via PHP, instead of as direct files that are loaded and cached by the browser. Thus, you'd have to completely change how you deliver your content.

If you're simply referring to compacting your CSS by removing spaces and line-breaks in the physical files that are downloaded by the browser, there are various tools available to assist with that after you've optimized the file content by removing anything that's not needed.

Oh, well! I was speaking in general, since I know that the main problem of the site I referred is related to the server (at 90%).

What I was looking for (since I never worried about gzip before) was what you said: the need to serve those files via PHP, so the need to change a lot.

At this point I may see that it's not worth it!

Thanks Doc!

I hope not going OT with next question, since is performances related aswell.

Do you know how to understand if the (quite big) number of HTTP_REQUESTS is really a problem, so it's worth to try to reduce them and to set (very carefully) the header: expires, to remove most of them after the first visit?

Since for pages after the first, the heavy of files is not a problem since with gzip and cache, less than 10Kb are downloaded for each page (without new images of course) (but there are still all the HTTP_REQUESTS of course).

Thanks

s_p_ike:

I hope not going OT with next question, since is performances related aswell.

Do you know how to understand if the (quite big) number of HTTP_REQUESTS is really a problem, so it's worth to try to reduce them and to set (very carefully) the header: expires, to remove most of them after the first visit?

Since for pages after the first, the heavy of files is not a problem since with gzip and cache, less than 10Kb are downloaded for each page (without new images of course) (but there are still all the HTTP_REQUESTS of course).

I'm not sure I fully understand your question.
But, if your server is performing slowly, I'd suggest focusing on the server rather than the number of hits.

DrByte:

I'm not sure I fully understand your question.
But, if your server is performing slowly, I'd suggest focusing on the server rather than the number of hits.

Well, I'm speaking both about that particular site (server) and in general.

Not always is an option to improve server performances (in this case they have their own server, so is not a matter of choosing another provider and they'd like to see if something may be done at application level, before considering to change the server (actually they have a Xeon 3Ghz, 1Gb Ram, 2Mbit bandwidth), so is not properly a very poor situation, but of course they don't have just Zen Cart on that machine ...

I'm just making myself a culture about performances and learnt many interesting things (yeah, I know, I was one of those geecks fascinated by win95 defrag screens...)

I found a very interesting php class to improve performances (it takes care of reducing HTTP REQUESTS by concatenating all js files in one file and all css files in one file, minifying 'em and gzipping too...). I'm taking a look at it to see if it's easy to integrate in Zen Cart.

Here it is: aciddrop.com/php-speedy

A bit about HTTP_REQUEST I learnt these day: a browser may handle only 2 contemporary requests to the same domain (this (with another, related to cookies) the reason why huges sites deploy their static content (mainly images) under different domains), so less request your page need to be displayed, less possibility to introduce a cause of delay (indipendent from the size of the 'objects' requested).

I'm not speaking about milliseconds, but seconds (not considering the cut of the server load...)

Ouch! I didn't read carefully the object of who started the thread, so I missed the magic word smartoptimizer.

Now I discovered it from elsewhere and I must say that this is a truely great piece of software.

Replying to who stareted the thread: It's a server problem. I'm using smartoptimizer over every kind of site (Zen Cart included) and it works like a charm.

It's incredible how it increases performances without the need to touch your code...

Features?

• minify, concatenate and gzip css and js files
• cache (server side) the files gzipped, so there's only 1 process requiring cpu time to process those files, then they're served from server cache. Plus: it understands if you modify your files so it processes them again
• embeds files included in css files using data URI scheme (with possibility to specify the max filesize to embed)
• adds Expire headers
• removes Etag

Quite everything is customizable

Just try it (30 seconds to have it working on your site) and if it works on your server you'll have nothing more to do than remember to close your mouth :O :D

Does smartoptimizer work with Windows-based sites??
How does one make it work with ZC??
I found the site, I will read it more...just asking anyway.
Thank you, Tom

I've been on a mission the last few days optimizing every possible millisecond on page load times, here's some ideas:

#1 - Clean up your CSS and then run it through Code Beautifier
a. Create a backup, something like stylesheet_readable.css for when you want to make changes
b. Use highest compression, leave everything else default
c. Rename CSS scripts that only need to load say on the product_info page to "product_info.css"
I combined the Tabbed Products Pro and Fual Slimbox CSS files and named it product_info.css and significantly sped up the rest of my site.
#2 - Run your Javascript through Javascript Compressor
a. You can also speed up portions of your site by moving JS that only needs to load say on a product_info page by moving it to:
./includes/modules/pages/product_info/jscript_scriptname.js
I moved Tabbed Products Pro and Fual Slimbox and significantly sped up the rest of my site. These are great addons but they should be put in their place!
#3 - Turn on Gzip in the store admin at Configuration->GZip Compression->1=On
#4 - Gzip support in ZenCart only deals with html output so you need to Gzip your JS and CSS manually. Get an idea for just how much you can compress at GID Network. For JS I saw around 50% reduction, only about 20% on the CSS. This is not an easy chore to explain as so many hosts have it setup differently. For some things to try on your host read this Sitepoint Article. On 1&1 I was able to:
a. Create a .htaccess file with "AddType x-mapp-php5 .js .css". This tells the host to process any php it see's in the CSS and JS files.
b. Edit every single js and css file at the beginning with:

<?php
ob_start("ob_gzhandler");
$path = pathinfo($_SERVER['SCRIPT_NAME']);
if ($path['extension'] == 'js')  {
   header('Content-type: application/x-javascript');
}
if ($path['extension'] == 'css')  {
   header('Content-type: text/css');
}
?>

#5 - Pictures...Personally I like to name my pictures to the product for SEO reasons so image addons don't work well. Use something like BIMP Lite and get your pictures optimized. Keep your images in a folder such as ./original that you batch from. Any images in ./images should be in their smallest form, I like to use 80px height and let width do whatever it wants. Run a batch job and create ./images/medium/name_med.jpg and use something around 120px height. Finally run a batch job and create ./images/large/name_lrg.jpg and use a reasonable limit, something like 600px height. BIMP makes it extremely easy to add suffixes like _med and _lrg and it takes no time at all to get used to the program.
#6 - For some mildly boring ideas that are more recommendations run your site through WebsiteOptimization. It might point out a few things you had not thought about. My personal goal was a measurement of 10 seconds for ISDN and 30 seconds for 56k. The result on my cable and dsl is somewhere around 2 seconds cached and 5 on a clean browser.
#7 - Lastly stuff your site through the W3C Validator and fix all the stuff that breaks it.

Another good idea is to keep an eye on your latency with a tool like mon.itor.us. If you consistently get ping times over 1500ms consider talking to your host about moving to another shared server, or consider upgrading. Most of the shared hosting accounts I monitor run 700-1400ms, the dedicated servers run 600-900ms. Yes those numbers are higher than plain ping tests which should run no more than 100ms.
Amazon found every 100ms of latency cost them 1% in sales. Google found an extra .5 seconds in search page generation time dropped traffic by 20%.
These numbers are important and make a difference in sales, it may be minimal to you and me but it does make a difference!

Lastly I'm gonna throw in a shameless plug, go checkout the Credit Card Fraud module I threw together and keep yourself from getting ripped off :)

ses707:

#4 - Gzip support in ZenCart only deals with html output so you need to Gzip your JS and CSS manually. Get an idea for just how much you can compress at GID Network. For JS I saw around 50% reduction, only about 20% on the CSS. This is not an easy chore to explain as so many hosts have it setup differently. For some things to try on your host read this Sitepoint Article. On 1&1 I was able to:
a. Create a .htaccess file with "AddType x-mapp-php5 .js .css". This tells the host to process any php it see's in the CSS and JS files.
b. Edit every single js and css file at the beginning with:

If you append the js files and css files like that it throws up errors in internet explorer 7 and lower for all users.

Thanks to ses707 for all the suggestions.. I am around 13s for ISDN and 29s for 56K so still some work to do.

I have found that turning off SEO URL's makes a difference as well - any thought on this?

I've just implemented this and it make a difference straight away:

Step one

Save the snippet provided below in a file called 'gzip-css.php' to the directory that contains your CSS files.

<?php 
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " . 
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>

Step two

Add the following to an .htaccess file and save the file to the same directory as your CSS files:

AddHandler application/x-httpd-php .css
php_value auto_prepend_file gzip-css.php
php_flag zlib.output_compression On
This code does 3 things:

The first line tells Apache to send all .css files to the PHP script handler.
The second line prepends the code snippet to your CSS file.
Optional: The third line tells PHP to use its built-in negotiated output compression automatically for every page it parses. If you use this method for compression, there is no need for having ob_start ("ob_gzhandler"); in the code snippet.

TEST TEST TEST TEST TEST

After a new install on a shared server, I found that it was so slow that sometimes the connection timed out. So i switched to a linux server over a windows server and its not even believable how much faster its running now.