Speed Up Your CS-Cart eCommerce Website - Combine CSS - Step 4

Store Builder Questions
1

Hello All,



Today, we will combine CSS files.



This step 4 and the previous (step 3) are brothers. They runs altoghter. However, you can use one without the other. This step (step 4) is less important over the previous (step 3).



With this step, you will combine all CSS files into one. Thus, you will reduce the number of HTTP requests, which accelerates the rendering of your site.



This step is quite difficult. If you have a minimum knowledge in the architecture of the CS-Cart templates, and in CSS is a plus.



In fact, only points from #11 to #15 are difficults. Take your time. You need to change every:


<link href="/skins/YOUR-SKIN/customer/NAME-OF-CSS-FILE.css" rel="stylesheet" type="text/css" />
```<br />
<br />
With this only ONE:<br />
<br />
```php
<link href="/skins/YOUR-SKIN/customer/big.css" rel="stylesheet" type="text/css" />
```<br />
<br />
Materially speaking, I forget, and I [B]DO NOT include the CSS file for printing "print.css"[/B]. It is a voluntary forgetfulness:<br />
<br />
```php
<link href="/gg/skins/default_blue/customer/print.css" rel="stylesheet" media="print" type="text/css" />
```<br />
<br />
[B][U][COLOR="Red"]WARNING![/COLOR][/U][/B]<br />
<br />
Save your directory "/skins/.../customer" from your server to your desktop before you follow this step!<br />
<br />
*****<br />
<br />
[B]Preamble[/B]:<br />
<br />
I'll take the demo site of CS-Cart as an example: [url]http://demo.cs-cart.com/[/url]. If it bothers someone I can take a different site.<br />
<br />
Test it with GTMetrix:<br />
<br />
[url]http://gtmetrix.com/reports/demo.cs-cart.com/1j0TQsKJ[/url]<br />
<br />
Click on the "Page Speed" tab, then click the "Combine external CSS" link<br />
<br />
*****<br />
<br />
1 - Open all the CSS files included under the "Combine external CSS" link<br />
<br />
2 - Copy the content of the first CSS file<br />
<br />
3 - Open a new text document with notepad<br />
<br />
4 - Paste the content of the first CSS file in this document<br />
<br />
5 - Do the same with ALL CSS files<br />
<br />
6 - Now you have a large CSS document with the contents of ALL CSS files<br />
<br />
7 - Save it as "big.css" on your desktop<br />
<br />
8 - Copy the content of "big.css"<br />
<br />
9 - Save "big.css" on your desktop<br />
<br />
10 - Upload "big.css" on the root of your site skin "/skins/.../customer"<br />
<br />
11 - Search all files containing text: [B]rel ="stylesheet"[/B]. For this task, I use the free tool for Windows [URL="http://www.mythicsoft.com/agentransack"]Agent Ransack[/URL].<br />
<br />
12 - Delete all: ```php
<link href="/skins/YOUR-SKIN/customer/NAME-OF-CSS-FILE.css" <link rel="stylesheet" type="text/css" />
```<br />
<br />
13 - Remplace them with the only ONE: ```php
<link href="/skins/YOUR-SKIN/customer/big.css" rel="stylesheet" type="text/css" />
```<br />
<br />
14 - Materially speaking, I forget, and I [B]DO NOT include the CSS file for printing "print.css"[/B]. It is a voluntary forgetfulness:<br />
<br />
```php
<link href="/skins/YOUR-SKIN/customer/print.css" rel="stylesheet" media="print" type="text/css" />
```<br />
<br />
15 - When you find: [B]@import url('XXX.css');[/B], you must to delete it, and paste the full "[B]XXX.css[/B]" file here, replacing the statement "@import url('XXX.css');".<br />
<br />
16 - Save your templates.<br />
<br />
17 - Cleanup the templates cache<br />
<br />
18 - Test on your browser[COLOR="Red"][B][U]s[/U][/B][/COLOR]<br />
<br />
19 - Enjoy your GTMetrix results before/after!<br />
<br />
<br />
<br />
Lee Li Pop
2

Note that after the 1st reference, the css files (no matter how many you have) are cached in your browser and no further http requests should occur. Hence after the first access to a site, the penalty is over for further navigation. You might see 1/2 second improvement on the first access, but you will see none in subsequent accesses.



Also note that this is not an automated approach and that every upgrade will require you to analyze what’s changed and then to repeat this process. You should evaluate the effort applied for the value gained.



Li Pop has been very gracious in providing these steps to help improve the peformance of various sites (note that every site is probably different based on graphics used, number of blocks, filters, etc.). It would help if the speed improvement of each step were identified so that merchants can make an effective determination on the value received for the effort applied (repeatedly).

3

Hello Tbirnseth,


[quote name=‘tbirnseth’]Li Pop has been very gracious […][/QUOTE]



Thank you, but I’m not gone yet, and we are on the middle of the way :smiley:



You’re right, this step is very difficult. More, if you always skip from a release to another, DO NOT follow this step, otherwise, you will become certainly crazy…



On another hand, if you’re strong enough in CSS and CS-Cart Smarty templates structure, AND you keep your release for years, so follow this step!



Yep! It’s only 1/2 second (maybe more, but I keep your word) but [SIZE=“3”]1/2 second + 1/2 second + 1/2 second + … makes THE difference between a slow and a fast website[/SIZE] :wink:

[SIZE=“3”]Victories are sometimes won for 1/2 second!

So, let’s run to victory, and let’s catching up this damned 1/2 second![/SIZE]



Remember: Google incorporating site speed in search rankings





Lee Li Pop

4

Hi thank you for the hints, I am at the first step now (only the gzip) and the website is really faster, just only with the gzip compression. But I have a problem. I have some attachments (.pdf files mostly) ain the product page and with the compression i’m not able anymore to open them or it requires more than 5 minutes to do it, even small files. I had to remove the gzip compression at the end of the day, and the attachements opened perfectly…



I had not the mod_deflate originally in Loaded Modules, but I followed the procedure and it worked.



Any idea?

5

thanks a lot for the help you are providing us Lee Li Pop



1)you can use [url]http://zoompf.com/[/url] to test and download all the compressed .css file and some images and then just upload to server. it is easier than copy+paste and their compression is good



2) i also suggets “Windows grep” for searching inside files



and again, thanks for your posts

6

i combine all css but i stack at step 15 about the @import url.

[QUOTE]#15 - When you find: @import url(‘XXX.css’);, you must to delete it, and paste the full “XXX.css” file here, replacing the statement “@import url(‘XXX.css’);”.[/QUOTE]



i seach and found that only styles.css (and so big.css too) has the @import url(styles.base.css);

and what i am going to do now? replace @import url(styles.base.css); with what???



help please…