Combining Cascading Style Sheets

[COLOR=“DarkOrchid”]I had made some changes to my site a couple weeks ago, but decided to try again in [/COLOR]http://gtmetrix.com [COLOR=“DarkOrchid”]and although my site now loads faster, my YSlow grade when from “B” to “C” (a grade of 78 ). Can’t quite figure out how it all works. The last time I tested I had 2 “B” grades and I haven’t really done anything new to it. It gave me a “C” for compressing with gzip. Not sure why the grade is so low.



But my main concern is the suggestion to combine 6 external css into one. I am a total newbie when it comes to css, so if anyone can perhaps shed some light on this subject for a lot of us who are not sure of the hows and whys. Have any of you done this to appease the SE’s ?[/COLOR]

If you can get the following, you are as close as they come.

Keep in mind that gtmetrix doesn’t factor in eCommerce websites so it’s rather difficult to compare a static page to CS-Cart.



[URL]http://gtmetrix.com/reports/www.southeastauto.com.au/[/URL]



[B]Latest Performance Report for: http://www.southeastauto.com.au/[/URL][/B]



Report generated: Tuesday, February 1, 2011, 1:45 PM

Summary




C

Page Speed Grade:

(79%) 82%[URL=“Frequently Asked Questions | GTmetrix”]

The average Page Speed grade is 82%



B

YSlow Grade:

(87%) 76%

The average YSlow grade is 76%



Page load time: 1.30s

Total page size: 107KB

Total number of requests: 30

[quote name=‘JesseLeeStringer’]If you can get the following, you are as close as they come.

Keep in mind that gtmetrix doesn’t factor in eCommerce websites so it’s rather difficult to compare a static page to CS-Cart.



[URL]http://gtmetrix.com/reports/www.southeastauto.com.au/[/URL]



[B]Latest Performance Report for: http://www.southeastauto.com.au/[/URL][/B]



Report generated: Tuesday, February 1, 2011, 1:45 PM

Summary




C

Page Speed Grade:

(79%) 82%[URL=“Frequently Asked Questions | GTmetrix”]

The average Page Speed grade is 82%



B

YSlow Grade:

(87%) 76%

The average YSlow grade is 76%



Page load time: 1.30s

Total page size: 107KB

Total number of requests: 30[/QUOTE]



[COLOR=“DarkOrchid”]Thanks Jesse…



This sure gets confusing. I didn’t know they didn’t take ecommerce sites into consideration, so I guess that changes the rules a bit.



I tested the same domain 4 times in a row today just as an experiment, and each time the load time increased. It went from 2.8x seconds to 3.47 seconds. I was beginning to question it…unless my host server was fluctuating…and I have no doubts about that.



With those reports they make suggestions, but without having a doctorate in website technology, it would be pretty hard to get “A” grades[/COLOR]

[quote name=‘DawnG’][COLOR=“DarkOrchid”]With those reports they make suggestions, but without having a doctorate in website technology, it would be pretty hard to get “A” grades[/COLOR][/QUOTE]



Not easy but very possible.

all the addons you are using has their own css files you can combine them together with styles.tpl and drop down the http requests of css files

@silverbestbuy - How do you combine them in the styles.tpl template file? Guess you could do it all with a single file and a bunch of @imports that would be linked by styles.post.tpl but one would have to know which were there in order to combine them.



Just curious what the details of your approach would be. I ask because I create quite a few addons and yes, almost all have their own css files. Kind of the nature of the beast, but if there was a better way…

You can tell which CSS to load in styles.tpl but you cannot “combine” them.



Its either a manual process to combine the style-sheets into one.

[url]http://www.minifycss.com/css-compressor/[/url]



Or do something like Google Minify

[url]GitHub - mrclay/minify: Combines. minifies, and serves CSS or Javascript files



WEBO’s addon has this functionality built in as an addon.



Putting every style from all the addons into one style-sheet will cause you to load unnecessary styles.

[COLOR=“DarkOrchid”]The requirements for the Google Minify are:[/COLOR]



PHP 5.1.6.

The commonly installed zlib extension is recommended for HTTP encoding functionality.

Version 1.0.1 required PHP 5.2.1+.





[COLOR=“DarkOrchid”]I just submitted a ticket to my host to see if I have what I need to run this. If they say yes, are there any “landmines” we should be aware of that could implode the cart ? I appreciate knowing in advance so I can book my rubber room BEFORE I lose it[/COLOR] :roll:

I would test it out on a dev cart of yours first.



i have no exp installing GMinify on CS.

[quote name=‘TonyK’]I would test it out on a dev cart of yours first.



i have no exp installing GMinify on CS.[/QUOTE]



[COLOR=“DarkOrchid”]Good idea…[/COLOR]

just like what Tony says. each addon has their style.tpl link them to the main style.tpl and copy and paste all css files in to the main css.



now you have less css requests:)



dont do import as it will be a request too.



only problem would be the upgrading your site as you have to do it all again.

[quote name=‘silverbestbuy’]just like what Tony says. each addon has their style.tpl link them to the main style.tpl and copy and paste all css files in to the main css.



now you have less css requests:)



dont do import as it will be a request too.



only problem would be the upgrading your site as you have to do it all again.[/quote]



Tip: Turn OFF all addons you don’t use. CS-Cart will inject the stylesheets for any addon set to ‘enabled’ regardless of usage.

[COLOR=“DarkOrchid”]Because I know so little about css, this may be a dumb question, but is there somewhere in the templates that request info from a particular style sheet and need updating if all are combined into one ?[/COLOR]

[quote name=‘DawnG’][COLOR=DarkOrchid]Because I know so little about css, this may be a dumb question, but is there somewhere in the templates that request info from a particular style sheet and need updating if all are combined into one ?[/COLOR][/quote]

Yes, Specifically the addons that are enabled, call for their own CSS sheet.



Example that ‘Hot Deals’ is by default installed - Even if you don’t use the block, the CSS will be loaded. If you ‘combine’ all the CSS spreadsheets you are digging yourself an early grave if you plan to upgrade ever



J.

[quote name=‘JesseLeeStringer’]Yes, Specifically the addons that are enabled, call for their own CSS sheet.



Example that ‘Hot Deals’ is by default installed - Even if you don’t use the block, the CSS will be loaded. If you ‘combine’ all the CSS spreadsheets you are digging yourself an early grave if you plan to upgrade ever



J.[/QUOTE]



[COLOR=“DarkOrchid”]Ok…you convinced me. It’s really not that important. I don’t have that many of the addons active. This just made me access what I need & don’t need, and was able to uninstall quite a few things. Pretty sure that should help.



Thanks for the insight…much much appreciated[/COLOR]

[COLOR=“DarkOrchid”]I just did another test on gtmetrix.com and there were a couple things that are kind of confusing…mainly because I have never heard of them before. If anyone could provide a quick explanation, a lot of us would be thrilled to learn I am sure :wink:



I got an “F” for not adding “Expires Headers”. I noticed there was something in .htaccess that mentions the expires info. Is that also supposed to be posted somewhere else as well ? I retested with Crafty Syntax Live Help Disabled, and the grade comes up to an overall grade “B” for YSlow, with a higher number of “23” as opposed to “1”, but still graded “F”.



I got a “D” For “Configure Entity Tags (Etags)”. What are these, and how does one go about configuring them?



What does it mean to “Combine Images Using CSS Sprites”? A quick look showed the images in question were all CS-Cart arrows, etc.[/COLOR]

DawnG, I realize that you’re strapped for cash but with your limited knowledge of how things work and you’re dead set on optimizing (seems that way anyway), then you would be best in investing in WEBO. WEBO does all of these things for you. I believe they even have a free version but I am sure it is limited.

[quote name=‘The Tool’]DawnG, I realize that you’re strapped for cash but with your limited knowledge of how things work and you’re dead set on optimizing (seems that way anyway), then you would be best in investing in WEBO. WEBO does all of these things for you. I believe they even have a free version but I am sure it is limited.[/QUOTE]



[COLOR=“DarkOrchid”]Thanks so very much Tool…



I am probably more dead set on understanding how it all works so I can eventually get up to speed. I am one who enjoys learning the inner workings so I can take care of things when they go pear shaped. Nothing is more frustrating than to be stuck and not know what to do.



I will check WEBO out. Again thanks much[/COLOR] :smiley:

Figure out how the software works by itself then the rest will come natural. You can’t skip the basics. :wink:

[quote name=‘The Tool’]Figure out how the software works by itself then the rest will come natural. You can’t skip the basics. ;)[/QUOTE]



[COLOR=“DarkOrchid”]I hope I have that analytical mind to get me through it. But a determined woman is a force to be reckoned with[/COLOR] :wink: