Site Reference Forums

Northie · 2008-01-23 11:23:23

CSS and Javascript can be bulky

Here are two tools for compressing your code for smaller downloads

For CSS
http://www.codebeautifier.com/

For JavaScript*
http://dean.edwards.name/packer/

This morning I had 49 Kb of CSS; now it's 29 Kb

The javascript packer can get large files to about a quarter of it's original size. (eg 80Kb to 20Kb)

*Javascript may need tidying with the yuicompressor (google it!) before being "packed"

matte · 2008-01-23 16:11:15

or on a minimal site
Input: 3.742KB, Output:3.121KB,

ColoEagle · 2008-01-23 21:57:25

That's a cool tool there Northie. storstark

Ran my css through it and like Matte decreased my total css by just a few bytes. The thing I liked about it though is the way it structured the css (where possible) to shorthand.

Definitely worth bookmarking.

Ryan_steyn · 2008-01-24 00:54:20

knocked me down 13kb to 7, nice tongue

All it really did was point the nasty finger at my scrollbars, change color codes and change all my "0px" to "0".
Quite cool actually.

EDIT: and to awe the masses even further, the css still works perfectly, none of the glitches that i was expecting to have to weed out after having the code shrunk down tongue Bookmarked tummenupp

Last edited by Ryan_steyn (2008-01-24 00:59:00)

matte · 2008-01-24 02:25:52

knocked me down 13kb to 7

looking at your avatar Ryan, you were pretty bloated to start with!

Ryan_steyn · 2008-01-24 02:57:37

Yeah yeah, thats from my sporty days when i was fitter...
(its not like i put my face on some giant squash players body just so i could print it out and scare the crap out of my fiance.. i would never do such a thing curious )

Last edited by Ryan_steyn (2008-01-24 02:58:09)

Northie · 2008-01-24 03:30:59

Did you select highest compression?

Ryan_steyn · 2008-01-24 03:38:58

What... is that a fat joke! lol

No, i just added my code and clicked process. I didn't try anything fancy - i figured that was just asking to have key items stripped from my css.

I reckon if your css is written decently and the size is small enough to keep neat then there isnt all that much the css cleaner can do. Surely?

Steven_A_S · 2008-01-24 12:50:55

Input: 4.386KB, Output:3.737KB on Highest

Just removed extra spaces I use for formatting (in fact, all spacing), simple remarks, and changed all bold font-weights to 700. Got to say I prefer the way I have it formated. Most other optimizations I do myself.

Northie · 2008-01-24 13:53:12

Well, when you work with designers...... you get bloated code.

As a develeper, it's my responsibility to develop what's given to me

Steven_A_S · 2008-01-24 14:30:15

Ryan_steyn wrote:
Yeah yeah, thats from my sporty days when i was fitter...
(its not like i put my face on some giant squash players body just so i could print it out and scare the crap out of my fiance.. i would never do such a thing )

offtopic
Actually, from the shape of the racket, it looks like you (or whoever's body you might have pasted your face to if you were so inclined) were playing badminton not squash tongue

Ryan_steyn · 2008-01-25 00:16:04

Steven_A_S wrote:
Ryan_steyn wrote:
Yeah yeah, thats from my sporty days when i was fitter...
(its not like i put my face on some giant squash players body just so i could print it out and scare the crap out of my fiance.. i would never do such a thing )

Actually, from the shape of the racket, it looks like you (or whoever's body you might have pasted your face to if you were so inclined) were playing badminton not squash

That is entirely possible, i have never played badminton so i cant imagine putting the two together tongue The closest thing to that racket i have seen is a squash racket (i used to play squash) except the neck would probably snap curious Neway.. back to making stuff smaller.

It also removed all the spacing i used for formatting... one day i will climb back in with my finger steadily on the tab key

griffinsbridge · 2008-01-29 14:20:11

Oh I like that CSS beautifier alot!

Got 14.2KB down to 9.807KB, which is splendid.

(lemme do the sums)
4.4KB per download, 50,000 (ish) unique views a month (not counting those who've already downloaded it), divide by KB in MB and we have a saving of nearly 215 Meg a month bandwidth! Get in!!!

need to squeeze more out of this, so I'm gonna shorten some of the class names in the CSS and html, I'd quite like to get it down by another 2 or 3KB if I can

ColoEagle · 2008-01-29 21:13:29

I have reached the final tweaking stage for a user interactive page for a local businesses website. Ran the rather intense CSS through this and was reduced from 79k of CSS to 51k. applause
76k of JS down to 68k. big_smile

Now if there was away to reduce the number of images. (approx 300 for 2.2mb of total images) lol

Sponsored Results

Site Reference Forums

#1 2008-01-23 11:23:23

minifying code for smaller downloads

#2 2008-01-23 16:11:15

Re: minifying code for smaller downloads

#3 2008-01-23 21:57:25

Re: minifying code for smaller downloads

#4 2008-01-24 00:54:20

Re: minifying code for smaller downloads

#5 2008-01-24 02:25:52

Re: minifying code for smaller downloads

#6 2008-01-24 02:57:37

Re: minifying code for smaller downloads

#7 2008-01-24 03:30:59

Re: minifying code for smaller downloads

#8 2008-01-24 03:38:58

Re: minifying code for smaller downloads

#9 2008-01-24 12:50:55

Re: minifying code for smaller downloads

#10 2008-01-24 13:53:12

Re: minifying code for smaller downloads

#11 2008-01-24 14:30:15

Re: minifying code for smaller downloads

Ryan_steyn wrote:

#12 2008-01-25 00:16:04

Re: minifying code for smaller downloads

Steven_A_S wrote:

Ryan_steyn wrote:

#13 2008-01-29 14:20:11

Re: minifying code for smaller downloads

#14 2008-01-29 21:13:29

Re: minifying code for smaller downloads

Active Discussions

Review Requests and Introductions

Board footer