Default CSS Optmization - How do I change CSS File name in header of all pages?

Hello,

I just launch my site, and I'm looking to streamline it a bit. I have been trying to find out a good way to compress my CSS files...which are pretty large.
I found this site after some searching and though it looks like a pretty good method. But I am not quite sure how to implement it into Zen Cart.

http://www.ethanandjamie.com/blog/43-web-dev-freebies/85-php-gzip-css-files

The part I am unsure of is how to: "update the path to the CSS file in the head of your HTML or PHP file to point to the styles.php file that you created"

Does this look like a good way to you? Maybe this could help a lot of people...but I can't figure out how to do this.

Thanks for you time,

Adrian

Hello,

I posted this in general questions a day ago and thought this might be a better place to post this question.

I just launch my site, and I'm looking to streamline it a bit. I have been trying to find out a good way to compress my CSS files...which are pretty large.
I found this site after some searching and though it looks like a pretty good method. But I am not quite sure how to implement it into Zen Cart.

http://www.ethanandjamie.com/blog/43-web-dev-freebies/85-php-gzip-css-files

The part I am unsure of is how to: "update the path to the CSS file in the head of your HTML or PHP file to point to the styles.php file that you created"

Thanks for your time,

Adrian

Beama:

Hello,

I posted this in general questions a day ago and thought this might be a better place to post this question.

I just launch my site, and I'm looking to streamline it a bit. I have been trying to find out a good way to compress my CSS files...which are pretty large.
I found this site after some searching and though it looks like a pretty good method. But I am not quite sure how to implement it into Zen Cart.

http://www.ethanandjamie.com/blog/43-web-dev-freebies/85-php-gzip-css-files

The part I am unsure of is how to: "update the path to the CSS file in the head of your HTML or PHP file to point to the styles.php file that you created"

Thanks for your time,

Adrian

If you keep the name stylesheet.css and location (includes/templates/YOUR_TEMPLATE/css

Then there is nothing more you need to do.

Zen Cart will find your optimized stylesheet as it normally does.

The recommendation that this guy gives is to:

..."create a file called styles.php in the same folder as your CSS files."

then you place the php code he has created, and...

"You will then need to update the path to the CSS file in the head of your HTML or PHP file to point to the styles.php file that you created."

That's why I would like to know how to change Css File name in header. I'm not just trying to optimize the code that is in the stylesheet.

Thanks

Beama:

The recommendation that this guy gives is to:

..."create a file called styles.php in the same folder as your CSS files."

then you place the php code he has created, and...

"You will then need to update the path to the CSS file in the head of your HTML or PHP file to point to the styles.php file that you created."

That's why I would like to know how to change Css File name in header. I'm not just trying to optimize the code that is in the stylesheet.

Thanks

Here are a couple of on-line optimizers that don't require anything more than inputing your stylesheet information and getting an optimized version of the same file.

www.cssoptimiser.com/

www.cleancss.com/

Thank you. What I was also trying to do is compress the CSS files with GZip or something.

do you have any tips for that?

(by the way...i really appreciate you getting back to me so quickly. thanks!)

Beama:

Thank you. What I was also trying to do is compress the CSS files with GZip or something.

do you have any tips for that?

(by the way...i really appreciate you getting back to me so quickly. thanks!)

Not really no.

I usually just try to optimize my stylesheets using either of the on-line options I've mentioned.

Hi Clyde,

I just ran the default 1.3.8a stylesheet through the first of those processes. It went from 13,995 bytes to 10,992 bytes on disk. But I've no idea to what extent that would improve the user's experience. Can you estimate how much faster the file would load? I've often wondered whether such optimization would be useful.

Rob

rstevenson:

Hi Clyde,

I just ran the default 1.3.8a stylesheet through the first of those processes. It went from 13,995 bytes to 10,992 bytes on disk. But I've no idea to what extent that would improve the user's experience. Can you estimate how much faster the file would load? I've often wondered whether such optimization would be useful.

Rob

Rob,

Sorry, I can give you an estimate.

But since the stylesheet has to load completely before anything will be displayed any reduction in size will help the loading time.

Most people when writting their css usually end up with declarations that look like this:

#alert {
margin 0;
padding:0;
color:red;
font-weight:bold;
}
#important {
margin 0;
padding:0;
color:red;
font-weight:bold;
}

un-optimized 12 lines of code have to be read

Optimized only one line needs to be read

#alert, #important {margin 0;padding:0;color:red;font-weight:bold;}

And don't forget that you may be loading more than one stylesheet so any reduction in file size is going to help.

Hi again,

Ever curious, I decided to test the theory. I loaded the home page (of my retail site, below), then a category page and then a product page. In each case, after the page first loaded, I reloaded it twice more.

Then I used the first of the two tools mentioned by Clyde above to optimize both the stylesheet.css and the stylesheet_css_buttons.css files. (I have no others that would load.)

Each time I reloaded the page I recorded the page parse time. (You can turn that on in admin/Configuration/Logging.) Here's the results...

Home    Cat.    Product
1.380   4.193   1.885
0.585   1.384   0.832
0.518   1.371   0.801
(0.9152)

And after optimization...

Home    Cat.    Product
0.617   1.389   0.883
0.513   1.389   0.867
0.519   1.423   0.874
(0.9308)

If you discard the first line in each test because it's the initial loading into memory for many elements, including images, then you can see that there is no significant difference attributable to the css files being optimized. (I didn't purge the browser cache before running the second set of tests, so many of those elements were still in memory.)

The last number in each set, the one in brackets, is the average of the last two figures in each of the three columns above it. It indicates that the set using the optimized css file was slightly slower than the first set. I expect that is attributable to vagaries in transmission time between the server and me, but it might conceivably be due to the fact that the optimized file is not valid CSS and the browser has to work harder to parse it. But I don't know if that's the case.

These results confirm what I've read elsewhere, that such forms of optimization operate on the least problematic part of the problem, the loading into memory of the textual page elements. Server load and back-end code optimization -- the sort of thing being greatly improved in ZC v2 -- are much more likely to yield useful improvements.

YMMV :smile:

Rob

After doing the tutorial https://www.zen-cart.com/tutorials/index.php?help=yes&article=21 the web page analyzer at the end gave me a warning about the size of my css file.

Since the web page analyzer indicated a large css file, I found two good web resources after "googling" the term "how to compress css":

**1) **http://www.cssdrive.com/index.php/main/csscompressor/

I used "super compact" and "strip all comments" and pasted the current stylesheet.css contents into the text field, and made a new stylesheet.css file with the result. I kept a backup of the original file for future editing, and will keep using this website to repeat this process whenever I need to edit the original. This compressed my 11k file by some 25%

**2) **http://www.fiftyfoureleven.com/weblog/web-development/css/the-definitive-css-gzip-method

I used this website and followed Method 2, which **further **compressed the file dramatically from 8k to 610 bytes.

You can check your results again using the Website Optimizer Speed Test that was referenced in the original tutorial.