Hello All,
[COLOR=“Red”][SIZE=“3”]Updated![/SIZE][/COLOR] on 2010-10-23
[SIZE=“3”]Following your comments, I’ve re-written this step, making it easier![/SIZE]
Today, we will minify CSS files.
This step 3 and step 4 are brothers. They work together. However, you can use one without the other. Nonetheless, this step (step 3) is more important than the next (step 4).
This step is quite easy, but the next one is a bit more difficult. In fact, to follow the next step (step 4) you need a minimum knowledge in the architecture of the CS-Cart templates, and in CSS is a plus. But this one (step 3) requires no special experience.
[SIZE=“3”]WARNING![/SIZE]
Save your directory “/skins/…/customer” from your server to your desktop before you follow this step!
I’ll take the demo site of CS-Cart as an example: [url]Instant Demo - CS-Cart Multi-Vendor Demo Try Free for 15 days. If it bothers someone I can take a different site.
Test it with GTMetrix:
[url]http://gtmetrix.com/reports/demo.cs-cart.com/uaoaPMmL[/url]
Click on the “Page Speed” tab, then click the “Combine external CSS” link
1 - Open the first CSS file included under the “Combine external CSS” link
2 - Copy the content of this CSS file (CTRL + C)
3 - Go to:
[url]http://www.codebeautifier.com/[/url]
4 - Paste the content (CTRL + V) in the “CSS-Code:” field
5 - In the dropdown “Compression (code layout):” select “Highest (no readability, Smallest size)”
6 - Tick “Compress colors” + “Compress font-weight” + “Case for properties: Lowercase” + “Remove Unnecessary backslashes” + “Remove last;”
7 - Click “Process CSS” button
8 - Copy the result
9 - Download your original CSS file from your server
10 - Paste result got at point 8 in your original CSS file
11 - Rename you original CSS file as “*.css.old”
12 - Save your new optimized CSS file under the original CSS file name
13 - Upload this new optimized CSS to replace the unoptimized original CSS file on the server of your website
14 - Follow from point 1 to point 12 for each unoptimized CSS files of your website
15 - Cleanup the templates cache
16 - Test on your browser[COLOR=“Red”]s[/COLOR]
17 - Enjoy your GTMetrix results before/after!
Lee Li Pop
:rolleyes: Oh boy…this one is more difficult indeed… just one question, did you tested this yourself to see if i wont breack up the cart or the design?
thanks again Lee, you’re awsome 
Hello E.Qi.Librium,
[quote name=‘E.Qi.Librium’]:rolleyes: Oh boy…this one is more difficult indeed… just one question, did you tested this yourself to see if i wont breack up the cart or the design?
thanks again Lee, you’re awsome ;)[/QUOTE]
Yes, I did. I have only one CSS file. Nonetheless, I did it from the whole beginning of my websites, because I mastered CSS for years. CSS for me is as easy as write HTML.
For example, my unique CSS file weighs only 13 KB. Much lighter than the original CSS file delivered with CS-Cart. By cons, my design is much more “cold”, without any visual sophistication. A bit like the Google pages. Efficiency first!
Don’t get discouraged. In fact, step number three, four and five are the more difficult.
[SIZE=“3”]Please, if you’re not comfortable with my advice of step, don’t follow this step![/SIZE]
Between you and me, you can follow only some steps, ones you want. That’s why I give them to you in a numerical order.
Pick only those you want!
Free Tricks:
Try WEBO free edition on localhost, maybe you can combine and minify CSS files for free with it… Learn how it do it… And let copycat its success!
Remember, I have only one CSS file minified for years, so I don’t know if WEBO free edition is able to combine and minify your CSS files.
Lee Li Pop
[quote name=‘Lee Li Pop’]You see The Tool, WEBO is easy, isn’t it?! 
Lee Li Pop[/QUOTE]
Okay, this one is definitely beneficial.
I haven’t explored this previously so thanks for the instructions.
Hello The Tool,
Glad to read your kind word, but wait for the next step (#4), even WEBO don’t goes so far on optimization… Wait and see
Lee Li Pop
Won’t this break any custom css that is associated with (or loaded conditionally upon) hooks? I.e. if someone has code in hooks/index/styles.post.tpl like:
```php
{if $controller == ‘checkout’ }
{/if}
```
Seems like combining of JS or CSS is only valid if there are no conditional inclusions.
… I wonder how your faces will look like when you try to upgrade your CS to the latest version?
I see tears and wasted hours to get things back to normal. It is OK to tweak things a bit as long as you know what you’re doing and note all changes you’ve made. Also, it would be good to test it in 5 most popular browsers. If you just follow steps without understanding changes you make - Sayonara!
Yep, I agree with you guys in that these techniques will most likely create a bit of a maintenance nightmare down the road.
In particular:
18 - Search for the templates calling the CSS files, for example “common_templates/styles.tpl”
19 - Change (or delete) calls of the old files with the new CSS, which means “big.css”
So basically we would be making custom modifications to a slew of core template files…:eek: Doesn’t seem too appealing to me.
Especially considering I just re-created all of my css within a custom css overriddes file using the my changes addon to reduce future work!
Regardless, dont mean to sound overly negative as I do commend you Lee Li for your efforts with this project! (We will soon need to give you the nickname of LEEBO)
Hello All,
[quote name=‘tbirnseth’]Won’t this break any custom css […][/QUOTE]
This is why WEBO is quite expensive… It does it automatically!
On the other hand, we are on step 3 over roughly 15. Take a seat, and let’s learn.
That’s always difficult in the beginning. Please, be patient.
[quote name=‘Noman’]I see tears and wasted hours to get things back to normal.[/QUOTE]
Please, remember:
[quote name=‘Lee Li Pop’][COLOR=“Red”]WARNING[/COLOR]!
Save your directory “/skins/…/customer” from your server to your desktop before you follow this step![/quote]
[quote name=‘Lee Li Pop’]
[SIZE=“3”]Please, if you’re not comfortable with my advice of step, don’t follow this step![/SIZE][/quote]
Important comment:
[quote name=‘Struck’][…] a maintenance nightmare […][/QUOTE]
I am 100% agree with you, that is why my “solution” is NOT an alternative to WEBO. A solution made by hand can NOT compete with a software in terms of ease of implementation.
However, for those who want to go further in performance, and exceed the results of WEBO, so, my “solution” compete successfully. More, some of my steps can be used in addition to WEBO Free Edition, as Step 1, about Gzip.
Please, keep in mind, my “solution” is free but you must work hard to get there. Nothing is easy in life, apart from paying your taxes. That is the harsh law of Life.
Like “Tour de France”, undoubtedly one of the most difficult race, but one of the most wonderful competition of the year: You can sit down in front of your TV for pleasure, or ride your bicycle to compete in the race for victory :o
Or, take only the best steps!
[quote name=‘Struck’](We will soon need to give you the nickname of LEEBO) :D[/QUOTE]
Thank you!
Lee Li Pop
Hello Tbirnseth,
[quote name=‘tbirnseth’]
Seems like combining of JS or CSS is only valid if there are no conditional inclusions.[/QUOTE]
You need include every “conditional inclusions” in your “big.css”. And everything becomes ok
Lee Li Pop
My point was that the site is no longer “dynamic” and one better be well prepared for some complex debugging where Javascript is used in overrides for some of the addons…
I think the accumulation of JS and CSS is beneficial on a static site but to me, the risks far outweigh the benefits on a dynamic site.
Whitespace compresssion of the html pages will get the biggest bang for the buck. The CSS and JS is noise… IMHO.
Hi Lee Li Pop,
So you’re saying that WEBO can make these changes and revert them back when it’s time to upgrade cs-cart? All automatically? That would be awesome…
Hello Gugga7,
[quote name=‘gugga7’]Hi Lee Li Pop,
So you’re saying that WEBO can make these changes and revert them back when it’s time to upgrade cs-cart? All automatically? That would be awesome…[/QUOTE]
Sorry, I don’t know.
Please, consider this:
1 - I am NOT a WEBO representative
2 - I am NOT a WEBO user (I’ve tried it before and I’ve removed it)
3 - I am NOT a WEBO expert
4 - I am NOT a WEBO reseller nor affiliate
Nonetheless, I say WEBO is a perfect tool for optimization newbie or in hurry people or everybody looking for a “no trouble optimization” solution.
Please, ask your question on the official WEBO thread:
[url]http://forum.cs-cart.com/showthread.php?t=17664[/url]
Lee Li Pop
Hello Tbirnseth,
I understand your worries and complaints. I’m going to re-write this step, splitting it in two steps:
The first (Step 3) as an easy access for everybody, with intermediary optimization.
The second (Step 4) as an advanced optimization step for full performance.
[quote name=‘tbirnseth’]I think the accumulation of JS and CSS is beneficial on a static site but to me, the risks far outweigh the benefits on a dynamic site.[/QUOTE]
Please, understand my websites are optimized like I show you in these steps and fully dynamic. But, it’s true, this optimization needs some hard work.
Remember, WEBO minifies and combines CSS automatically. If you’re afraid to do it by yourself, use WEBO!
Lee Li Pop
Hello All,
[COLOR=“Red”][SIZE=“3”]I’ve updated this step!
Now, it’s easier to follow.
Please, read the new release![/SIZE][/COLOR]
[url]http://forum.cs-cart.com/showthread.php?p=98619#post98619[/url]
Lee Li Pop
Okay, so now this step has changed to minifying CSS. SO already does this so it is not required correct?
Hello The Tool,
[quote name=‘The Tool’]Okay, so now this step has changed to minifying CSS. SO already does this so it is not required correct?[/QUOTE]
Yes, Smartoptimizer minifies CSS, but not in a maximum way.
It’s easy to see how.
Please, let go trough point 1 to 7:
[quote name=‘Lee Li Pop’]1 - Open the first CSS file included under the “Combine external CSS” link
2 - Copy the content of this CSS file (CTRL + C)
3 - Go to:
[url]http://www.codebeautifier.com/[/url]
4 - Paste the content (CTRL + V) in the “CSS-Code:” field
5 - In the dropdown “Compression (code layout):” select “Highest (no readability, Smallest size)”
6 - Tick “Compress colors” + “Compress font-weight” + “Case for properties: Lowercase” + “Remove Unnecessary backslashes” + “Remove last;”
7 - Click “Process CSS” button[/quote]
Take note “Messages”.
Look “Compression Ratio:”.
“Compression Ration” can be between 28% without Smartoptimizer and 4% with.
28% is nice, 4% is little. By reducing a little here, a little there, we improve our global performance. Any athlete can confirm this
This step does NOT reduce HTTP requests, that’s OK. However, it reduces (a few) size.
In fact, The Tool, you are one of the few whom understand that the best way to increase performance is reduce HTTP requests. Step 4 will reduce HTTP requests, however, the level is a little bit harder to implement. This is why I split this step in two part, an easy step (this one, step 3) for everybody, an harder (next, step 4) for those who want more speed.
Lee Li Pop
What about the MAXCDN ??
I realise this post is more than a year old, but I am going through the forum finding all the 'speed up' tweaks, seems this one is irrelevent in 2.2.3 due to the setting in config.local.php for 'join_css' which should be set to true to get a 100% score on GTmetrix.