forked from Schepp/CSS-JS-Booster
-
Notifications
You must be signed in to change notification settings - Fork 1
/
README
259 lines (173 loc) · 8 KB
/
README
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
Copyright (C) 2009 Christian "Schepp" Schaefer
http://twitter.com/derSchepp
----------------------------------------------------------------------------
Important notice
----------------------------------------------------------------------------
This piece of code has just been published so that others can start testing
and/or using and/or enhancing it.
I'd eat my hat if there aren't enough bugs left, especially regarding
absolute/relative paths when linking and including and so on. That's what
the testing is good for (and no, I don't wear no hat...)
Not a bug is that I don't plan to support browsers older than IE6SP2.
It's also not intended to minify or further compress (like with Dean Edwards
packer) the JS, as I experienced a lot of trouble doing that.
Also most large JS-libraries/frameworks are already heavily minified.
----------------------------------------------------------------------------
Functionality and Benefits
----------------------------------------------------------------------------
CSS-JS-Booster is a PHP-script that tries to automate as many performance
optimizing steps related to CSS and JS embedding as possible.
For CSS these steps are:
- combine multiple CSS-files resulting in HTTP-requests going down
- optimize and minify CSS with CSSTidy
- Embed any CSS-images smaller 24KB as data-URI or MHTML (for IE <= 7)
- Split the output back into 2 even files that can load in parallel
- GZIP-compress the resulting CSS
- Have browsers cache the result as long as it remains unchanged
- If IE6: Issue a JS-command to fix background image caching behaviour
For JS these steps are:
- combine multiple JS-files resulting in HTTP-requests going down
- GZIP-compress the resulting JS
- Have browsers cache the result as long as it remains unchanged
+ GZIP-compress the page itself from where those files are called.
Depending on the amount of CSS, CSS-images and JS, this can significantly
increase loading speed of your site.
Naah, your software stinks! Alternatives? Yes, there are!
There is a nifty piece of software built by some smart people over in russia
called "Web Optimizer" at http://www.web-optimizer.us/ that does what
CSS-JS-Booster does, and a little lot more. And there are Wordpress and
Joomla-Plugins. It is priced quite reasonable at $99.
For any full-fledged web 3.0 company with money, their own servers and some
technical skills (or instead: even more money), there also exists an
enterprise-website-accelerator named "aptimize": http://www.aptimize.com/
Just to have mentioned those...
----------------------------------------------------------------------------
Basic Usage
----------------------------------------------------------------------------
CSS-JS-Booster is - as its name implies - divided into two function blocks:
A CSS-optimizing block and a JavaScript-optimizing block.
For both functionalities you first need to go into the booster-folder and
create a folder named "booster_cache" and have it CHMOD 0777.
Afterwards include
<?php
include('booster/booster_inc.php');
$booster = new Booster();
?>
at the top of your (PHP-interpreted) file.
(Adjust the path according to your folder-structure)
Should you happen to only have static HTML-files, try enabling PHP-parsing
by putting a .htaccess-file into the site's root with following directive:
AddType application/x-httpd-php .html .htm
For the CSS-part, put all releveant CSS-files into a subfolder "css" of your
site. Make sure, all declarations pointing to image-files have their paths
adjusted (i.e. all CSS should be fully functional inside that folder).
If you have multiple CSS-files rename them so that they are alphabetically
sorted in the desired order, e.g.:
01_first.css
02_second.css
03_third.css
Then add this declaration in the HTML's head-section:
<?php
$booster->css_dir = 'css';
echo $booster->css_markup();
?>
for example:
<head>
<title>Webpage</title>
<?php
$booster->css_dir = 'css';
echo $booster->css_markup();
?>
</head>
The argument is the path relativ to the file calling that function. If you
are in a subfolder it should read '../css'.
For the JS-part, put all releveant JS-files into a subfolder "js" of your
site.
If you have multiple JS-files rename them so that they are alphabetically
sorted in the desired order, e.g.:
01_first.js
02_second.js
03_third.js
Then add this declaration either in the HTML's head-section, or - better for
performance and therefore recommended when you experience no errors - right
before the closing </body>:
<?php
$booster->js_dir = 'js';
echo $booster->js_markup();
?>
for example:
<?php
$booster->js_dir = 'js';
echo $booster->js_markup();
?>
</body>
</html>
The argument is the path relativ to the file calling that function. If you
are in a subfolder it should read '../js'.
----------------------------------------------------------------------------
Q & A for Advanced Usage
----------------------------------------------------------------------------
Q: How can I combine files out of multiple CSS- or JS-folders?
A: By setting as directory argument a comma delimited list of folders:
$booster->css_dir = 'css_1,css_2';
echo $booster->css_markup();
or
$booster->js_dir = 'js_1,js_2';
echo $booster->js_markup();
Q: For CSS, how can I define a different/specific target-medium?
A: Yepp, by setting the desired media before echoing the markup:
$booster->css_media = 'screen,projection';
echo $booster->css_markup();
Q: For CSS, can I define a second folder to feed an alternate stylesheet?
A: Sure, e.g. like this:
$booster->css_dir = 'css_2';
$booster->css_rel = 'alternate stylesheet';
$booster->css_title = 'Alternate Stylesheet';
echo $booster->css_markup();
Q: For CSS, can I influence in how many even parts it gets split?
A: Nothing easier than this:
$booster->css_totalparts = 4;
echo $booster->css_markup();
Q: For JS, can I increase the number of parts it gets split into?
A: Yes, by setting the second argument:
$booster->js_totalparts = 2;
echo $booster->js_markup();
Q: For CSS, can I have it output in HTML 4.01 fashion?
A: No problem, do this:
$booster->css_markuptype = 'HTML';
echo $booster->css_markup();
----------------------------------------------------------------------------
.htaccess Acceleration
----------------------------------------------------------------------------
For an even further speed-boost, either add the contents of
/htaccess/.htaccess
to your existing .htaccess-file in your site's root, or the file itself
shouldn't you have any .htaccess-file installed in your site's root yet.
Should you happen to get internal server error 500s, then something went
wrong with my .htaccess and you server-config.
What the .htaccess adds:
- Turns off ETags
- Adds aggressive caching for all sort of assets like images/favicon/flash
----------------------------------------------------------------------------
Copyright and License Information for 3rd party elements used in the scripts
----------------------------------------------------------------------------
CSSTidy 1.3 is taken from here:
http://csstidy.sourceforge.net/
You find its license inside booster's csstidy-1.3-folder
Browser detection is done with Paul Scott's script taken from here:
http://www.phpclasses.org/browse/file/12369.html
----------------------------------------------------------------------------
Copyright and License Information for 3rd party elements used in example1
----------------------------------------------------------------------------
HTML and CSS Template named "Blog Division" is taken from here:
http://www.free-css.com/free-css-templates/page1/blog-division.php
You find its license inside example1's root-folder
The Sansation Font is © 2008 Bernd Montag and taken from here:
http://www.fontsquirrel.com/fonts/Sansation
You find its license inside example1's js-folder
cufón has its home here:
http://github.com/sorccu/cufon
You find its license inside example1's js-folder
jQuery is taken from here:
http://code.google.com/p/jqueryjs/
You find its license inside example1's js-folder