Optimize Stylesheet

have a question... Is there things that you can do to your stylesheet to optimize a sites performance? Does it make things faster to combine statements rather than having many multiple statements? Here's an example of what I'm trying to get across here...

#something1, something2, something3{
border-image 0;
}

or

something1 {border-image 0;}
something2 {border-image 0;}
something3 {border-image 0;}

which of these ways is the fastest?.... or does it even make a difference?
Thanks for your time everyone...

The first would be the fastest - but if you are having loading issues due to this it is time to seek a new host because this should not be your bottleneck.

kobra:

The first would be the fastest - but if you are having loading issues due to this it is time to seek a new host because this should not be your bottleneck.

Thanks for the reply kobra,

I have noticed in the last day or so my site seems to be loading on the slow side. I don't know if it's something that I did with the code (I work on the site a lot) or could it be my host.

Could you maybe give me some help on the "weboptimzation" web site? I tested it there but the numbers don't mean anything to me because I don't know what's good or bad (where the numbers are concerned).

Can you bring up my site and let me know if you think it's loading slowly? I would really appreciate it!

thanks

In your admin > config > logging > Display The Page Parse Time > set this to on and record the parse time when navigating your pages. If they are not averaging 2 seconds or less - preferably sub second then you do have issues.

You are using IH2 so this should be optimized for the images even though there are many on the home page.

kobra:

In your admin > config > logging > Display The Page Parse Time > set this to on and record the parse time when navigating your pages. If they are not averaging 2 seconds or less - preferably sub second then you do have issues.

You are using IH2 so this should be optimized for the images even though there are many on the home page.

Thanks for pointing that out to me... I didn't know there was a log file for that. I did some page loads and here is what I got:

10/11/2007 19:15:34 [0.093s] /biz/admin/configuration.php?gID=10&cID=245
10/11/2007 19:16:04 - /biz/ (0.750s)
10/11/2007 19:16:22 - /biz/index.php?main_page=index&cPath=30 (1.435s)
10/11/2007 19:16:29 - /biz/index.php?main_page=index&cPath=30_21 (0.754s)
10/11/2007 19:16:33 - /biz/ (0.660s)
10/11/2007 19:16:34 - /biz/ (0.770s)
10/11/2007 19:16:41 - /biz/index.php?main_page=product_info&products_id=642&zenid=5fd15414e5c0ebddf0c3c903e32bee17 (0.528s)
10/11/2007 19:16:49 - /biz/index.php?main_page=shopping_cart (0.678s)
10/11/2007 19:17:15 - /biz/index.php?main_page=shopping_cart (0.470s)
10/11/2007 19:17:22 - /biz/index.php?main_page=login (0.459s)
10/11/2007 19:17:37 - /biz/ (0.588s)
10/11/2007 19:17:45 - /biz/index.php?main_page=shopping_cart (0.485s)
10/11/2007 19:17:46 - /biz/index.php?main_page=product_info&products_id=642&zenid=5fd15414e5c0ebddf0c3c903e32bee17 (0.423s)
10/11/2007 19:17:47 - /biz/ (0.871s)
10/11/2007 19:17:47 - /biz/index.php?main_page=index&cPath=30 (0.447s)
10/11/2007 19:17:50 - /biz/ (0.587s)
10/11/2007 19:17:51 - /biz/index.php?main_page=index&cPath=30_18 (0.677s)
10/11/2007 19:17:57 - /biz/index.php?main_page=index&cPath=30_18&sort=20a&page=2 (0.616s)
10/11/2007 19:18:03 - /biz/ (0.587s)
10/11/2007 19:18:09 - /biz/ (0.580s)

so it looks like everything is not as bad as I thought it was. Only one entry over a second and most of them sub-seconds.

Thanks for the tip about the log file and thanks for checking out my site's performance.

Try this:

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

YOUR ENTIRE STYLESHEET GOES HERE

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

..and rename your stylesheet.css to stylesheet.css.php

Thats it. And see a dramatic decrease in page load time. Should compress ATLEAST (not "UPTO") 70%.

Edit: Ofcourse you need to change stylesheet.css to stylesheet.css.php in the head section.

Nimbuz:

Try this:

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

YOUR ENTIRE STYLESHEET GOES HERE

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

..and rename your stylesheet.css to stylesheet.css.php

Thats it. And see a dramatic decrease in page load time. Should compress ATLEAST (not "UPTO") 70%.

Edit: Ofcourse you need to change stylesheet.css to stylesheet.css.php in the head section.

Hi Nimbuz, I don't know enough about the code to know what file that code is in. Can you nudge me in a direction? And when you talk about the "head" section... are you talking about tpl_header.php?

Sorry for the dumb questions... I'm still new at this.
Thanks a lot!

update: I think I might know what you are talking about now. Do I put the code at the top and bottom of my stylesheet.css then rename it to stylesheet.css.php?... I think that's what you are talking about... now all I need to know is what the "head" file is... I will start looking (smile)

Nimbuz:

Try this:

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

YOUR ENTIRE STYLESHEET GOES HERE

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

..and rename your stylesheet.css to stylesheet.css.php

Thats it. And see a dramatic decrease in page load time. Should compress ATLEAST (not "UPTO") 70%.

Edit: Ofcourse you need to change stylesheet.css to stylesheet.css.php in the head section.

Hi Nimbuz, I was wondering if it would be any trouble for you to describe how one would put the stylesheet.css.php code in the header file. I attempted this, but could not figure how to set up stylesheet.css.php instead of stylesheet.css

Thanks,

~Rain_

Browsers cache css files quite well, so that really doesnt matter.

To reduce sql queries, try the suggestion here:
http://www.zen-cart.com/forum/showthread.php?t=83340 (around post 7 or so)

To reduce page load time:
Check your images size, should be less than 5k each.

yellow1912:

To reduce page load time:
Check your images size, should be less than 5k each.

Does this include the logo, or is the logo an exception that could run 15k for instance?

Thank you very much, you are always quick to help out with the right answers.

Does this include the logo

'
Logo is an image called through the file system and not normally via the stylesheet

We want to make the whole page less than 100k if possible, so that includes everything from pictures to html, css, javascript etc...

However, browsers cache css files quite well, so the css files are reloaded only once in a while(and they are re-used thru out the site). Logo is loaded once, there is a problem with the product pictures on main page though: products appear randomly, so even if some are cached, the next time users reload the page they will have to load new ones. So you want to make sure product images are well optimized.

Also, your server should be well optimized as well. For instance, it happened to me once when I installed a ticket system called otrs which has cronjobs run every 15mins or so, and it slow down my server a lot. So make sure you are aware of that. And then if you use CPanel, it automatically runs updates and backup at 1am or so, which is still peak time on some servers (like mine), so I had to set it to 3-4am.

kobra:

'
Logo is an image called through the file system and not normally via the stylesheet

Doesnt really matter if it is called thru file system or stylesheet, really.

I thought that this was in reference to Nimbuz's suggestion of moving the stylesheet to php