collapse
Pages: [1]   Go Down

Author Topic: Compressing CSS & javascript files  (Read 601 times) Bookmark and Share

0 Members and 1 Guest are viewing this topic.

Offline notbanksy

  • Global Moderator
  • ********
  • Posts: 504
  • Reputation Power: 2
  • notbanksy barely matters.notbanksy barely matters.
  • Gender: Male
  • Thought Police
    • a branch of design
  • Referrals: 0
  • Referrals: 0
Compressing CSS & javascript files
« on: 11 August 2009, 20:58:43 »
I've been researching css and js compression in order to speed up page loads.  How many of you do this, and is the difference noticable considering the extra work when it comes to editing your site if you lose track of the uncompressed versions?

Any thoughts?
Logged
Bloomin' good web design and copywriting from a branch of design

Offline Scott

  • Caffeine & Nicotine Addict
  • Administrator
  • ********
  • Posts: 1,428
  • Reputation Power: 2
  • Scott barely matters.Scott barely matters.
  • Gender: Male
  • Extremely Odd Individual!
    • scottsampson
    • The ravings of an internet lunatic
  • Referrals: 0
  • Referrals: 0
Re: Compressing CSS & javascript files
« Reply #1 on: 11 August 2009, 21:25:59 »
I do compress my css and js files, but not to a level that makes them unreadable.

It's a case of finding the perfect balance I find.

With the CSS, I tend to compress it so that each tag, id or class has all the attributes on a single line, with no whitespace between lines.

JS is a bit harder, but compressed to a similar level as CSS
Logged
Please help keep the forum clean - report all spam!
------------------
Artificial Intelligence is no match for Natural Stupidity.
------------------
Some people are like slinkies. They serve no actual purpose, but it's great fun to watch them fall down the stairs!
------------------

Offline notbanksy

  • Global Moderator
  • ********
  • Posts: 504
  • Reputation Power: 2
  • notbanksy barely matters.notbanksy barely matters.
  • Gender: Male
  • Thought Police
    • a branch of design
  • Referrals: 0
  • Referrals: 0
Re: Compressing CSS & javascript files
« Reply #2 on: 11 August 2009, 21:30:41 »
So how much difference would you say it makes realistically to your page load time?  Given that all other page load optimising efforts have been made - CSS sprites and the such like.

I'm really in 2 minds as to whether to do this as I'm working on my employers site!
Logged
Bloomin' good web design and copywriting from a branch of design

Offline Scott

  • Caffeine & Nicotine Addict
  • Administrator
  • ********
  • Posts: 1,428
  • Reputation Power: 2
  • Scott barely matters.Scott barely matters.
  • Gender: Male
  • Extremely Odd Individual!
    • scottsampson
    • The ravings of an internet lunatic
  • Referrals: 0
  • Referrals: 0
Re: Compressing CSS & javascript files
« Reply #3 on: 11 August 2009, 23:15:27 »
Quote from: notbanksy on 11 August 2009, 21:30:41
So how much difference would you say it makes realistically to your page load time?  Given that all other page load optimising efforts have been made - CSS sprites and the such like.

I'm really in 2 minds as to whether to do this as I'm working on my employers site!

One of the sites I recently finished developing, whilst it uses no js, did realise a not insignificant increase in speed by compressing the css. Something like 1.5 seconds (large css file lol)

Don't know if I'd bother on your boss's site, but worth doing for clients or yourself
Logged
Please help keep the forum clean - report all spam!
------------------
Artificial Intelligence is no match for Natural Stupidity.
------------------
Some people are like slinkies. They serve no actual purpose, but it's great fun to watch them fall down the stairs!
------------------

Offline Car

  • Full Member
  • ***
  • Posts: 200
  • Reputation Power: 0
  • Car has no influence.
  • Gender: Female
    • CHouseLive
  • Referrals: 0
  • Referrals: 0
Re: Compressing CSS & javascript files
« Reply #4 on: 11 August 2009, 23:33:10 »
I am not really an expert on this, but will add my two cents.  Recently I have started compressing my css similar to how Scott describes.  Interestingly I have found it easier to work with in this format as it is much quicker to find things.  Whether it actually increased the page load time is debatbale! 

I also compressed my js, but will not do that again untill I am far more proficient where js is concerned as the result is I know have no idea what is going on, and find myself simply hoping I never have to make any changes!
Logged

Offline Jake

  • Jr. Member
  • **
  • Posts: 27
  • Reputation Power: 0
  • Jake has no influence.
  • Gender: Male
    • JD&Co.
  • Referrals: 0
  • Referrals: 0
Re: Compressing CSS & javascript files
« Reply #5 on: 12 August 2009, 18:57:27 »
I use this, takes about 5 minutes to set up and allows you to keep all your code as is, and it'll compress/minify on the fly and then cache it. http://code.google.com/p/minify/

'Tis awesome, discovered it on my quest to getting a full yslow score :)
Logged

Offline Scott

  • Caffeine & Nicotine Addict
  • Administrator
  • ********
  • Posts: 1,428
  • Reputation Power: 2
  • Scott barely matters.Scott barely matters.
  • Gender: Male
  • Extremely Odd Individual!
    • scottsampson
    • The ravings of an internet lunatic
  • Referrals: 0
  • Referrals: 0
Re: Compressing CSS & javascript files
« Reply #6 on: 12 August 2009, 19:00:06 »
Quote from: Jake on 12 August 2009, 18:57:27
I use this, takes about 5 minutes to set up and allows you to keep all your code as is, and it'll compress/minify on the fly and then cache it. http://code.google.com/p/minify/

'Tis awesome, discovered it on my quest to getting a full yslow score :)


Oooh nice find there. Cheers Jake!
Logged
Please help keep the forum clean - report all spam!
------------------
Artificial Intelligence is no match for Natural Stupidity.
------------------
Some people are like slinkies. They serve no actual purpose, but it's great fun to watch them fall down the stairs!
------------------

Offline Jake

  • Jr. Member
  • **
  • Posts: 27
  • Reputation Power: 0
  • Jake has no influence.
  • Gender: Male
    • JD&Co.
  • Referrals: 0
  • Referrals: 0
Re: Compressing CSS & javascript files
« Reply #7 on: 12 August 2009, 19:18:19 »
Just for example if anyone wants it

http://www.jdandco.co.uk/css/style.css

That's the css i uploaded, and this is the one that's served up

http://www.jdandco.co.uk/min/g=required&v=0.07

(the served up one contains some additional style sheets as well)
Logged

Offline notbanksy

  • Global Moderator
  • ********
  • Posts: 504
  • Reputation Power: 2
  • notbanksy barely matters.notbanksy barely matters.
  • Gender: Male
  • Thought Police
    • a branch of design
  • Referrals: 0
  • Referrals: 0
Re: Compressing CSS & javascript files
« Reply #8 on: 12 August 2009, 19:33:58 »
Nice one! Thanks Jake! Will definitely be looking at this for my next personal project.
Logged
Bloomin' good web design and copywriting from a branch of design

Offline mickeyc

  • Newbie
  • *
  • Posts: 1
  • Reputation Power: 0
  • mickeyc has no influence.
  • Referrals: 0
  • Referrals: 0
Re: Compressing CSS & javascript files
« Reply #9 on: 28 October 2009, 22:05:08 »
I recently wrote a mod_perl output filter which sits inside Apache. It intercepts requests for .css files and then “compresses” them on the fly before sending. It’s not gzip compression, what it does is strip whitespace, comments, newlines etc. Check it out here: https://secure.grepular.com/blog/index.php/2009/10/28/compressing-css-on-the-fly/
Logged
Pages: [1]   Go Up
 

* Featured Tutorials