SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Automatic Compression: CSS, JS, Images

    I am looking for ways in which my website can be automatically compressed to improve on load times. I have gzip enabled on my server and also within my .htaccess file, it very easy to turn on, but I don't quite understand how it actually speeds up my website. I am looking for ways in which to compress my .css and .js files to be one line, compressed, to show no white space, and to be automated on the fly. In other words, when I open the css and js files via FTP I would still like to see them laid out with the proper formatting but when I save the files I would like it to be compressed automatically. I am using Coda 2 for Mac as my web editor if that matters at all?

    Also, in terms of site images - are there any ways in which the server can automatically compress them for me too? Let's say all of my images are in the /img folder, can I point the server to compress them whenever a new image is uploaded? It will need to be a lossless compression in order to retain the quality but still have the lowest file size. Will I need to use software in order to do this or can lossless image compression for .jpg, .png and .gif files be automated the same way .css and .js compression is automated?

    On a side note: I am using DD_belatedPNG fix for all of the IE6 image transparencies. I have tried all of the other IE6 transparency fixes, but this one seems to work the best. (No image flicker, works instantly, no problems with background images too). The only downside is that I have to manually update which classes I wish to apply the transparency fixes on. Does anybody know if there is a way to automate the DD_belatedPNG fix for IE6 too? For example, I only use .png files if transparency is needed (otherwise I use .jpg for photos, and .gif for small icons), so if a .png is used in the css file, can it tell DD_belatedPNG to automatically add the class fix?

    I know that this kind of turned into a few questions here.. Automation is what I am really after. If I can get these figured out I believe there will be a lot less headache and maintenance work in the long run.

    Thanks!
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  2. #2
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,524
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by revlimiter View Post
    I am looking for ways in which my website can be automatically compressed to improve on load times. I have gzip enabled on my server and also within my .htaccess file, it very easy to turn on, but I don't quite understand how it actually speeds up my website.
    The speed gain is in the amount of time it takes to transfer data from the server to the visitor's browser. Less data means a shorter amount of time spent downloading files.

    Take a look at the htaccess file of the HTML5 boilerplate: http://html5boilerplate.com/

    There is a very good section for file compression that is better than the single enable/disable command for gzip compression.

    I am looking for ways in which to compress my .css and .js files to be one line, compressed, to show no white space, and to be automated on the fly. In other words, when I open the css and js files via FTP I would still like to see them laid out with the proper formatting but when I save the files I would like it to be compressed automatically. I am using Coda 2 for Mac as my web editor if that matters at all?
    You can keep two copies of your css/js files. One copy is your development copy, the other is your production copy that is live on your site. The production copy can be compressed since it doesn't matter if anyone can read that code or not.

    The industry term is "minify". There are various online tools that can help you do this, such as:
    http://jscompress.com/
    http://www.csscompressor.com/
    Those two aren't necessarily the best, just the first hits on a google search. You can try out various ones and see what you like.



    On a side note: I am using DD_belatedPNG fix for all of the IE6 image transparencies. I have tried all of the other IE6 transparency fixes, but this one seems to work the best. (No image flicker, works instantly, no problems with background images too). The only downside is that I have to manually update which classes I wish to apply the transparency fixes on. Does anybody know if there is a way to automate the DD_belatedPNG fix for IE6 too? For example, I only use .png files if transparency is needed (otherwise I use .jpg for photos, and .gif for small icons), so if a .png is used in the css file, can it tell DD_belatedPNG to automatically add the class fix?
    For *just* image transparency in IE6, I've used this: http://www.twinhelix.com/css/iepngfix/

    Also, make sure you are using IE conditionals so that other versions of IE don't download the HTC behavior file unnecessarily. For example:

    Code:
    <!--[if lt IE 7]>
        <style type="text/css" media="screen">.pngfix { behavior: url('http://example.org/css/iepngfix.htc'); }    </style>
    <![endif]-->
    On a side note, are you aware of how many visitors you have who actually use IE6? The numbers that I've seen on the sites I maintain are so miniscule, it's not worth it any more to sink any time into working with IE6. I'm seeing maybe 3-4 unique visitors out of 1,000 still using IE6.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Force Flow View Post
    The speed gain is in the amount of time it takes to transfer data from the server to the visitor's browser. Less data means a shorter amount of time spent downloading files.

    Take a look at the htaccess file of the HTML5 boilerplate: http://html5boilerplate.com/

    There is a very good section for file compression that is better than the single enable/disable command for gzip compression.
    Are you referring to the HTML5 Boilerplate .htaccess for file compression or something else?
    https://github.com/h5bp/html5-boiler...oc/htaccess.md


    Quote Originally Posted by Force Flow View Post
    You can keep two copies of your css/js files. One copy is your development copy, the other is your production copy that is live on your site. The production copy can be compressed since it doesn't matter if anyone can read that code or not.

    The industry term is "minify". There are various online tools that can help you do this, such as:
    http://jscompress.com/
    http://www.csscompressor.com/
    Those two aren't necessarily the best, just the first hits on a google search. You can try out various ones and see what you like.
    I have tried manual compression using online minify tools before, however I am trying to fully automate it. Can this be done from the server side of things on the fly or will I need to learn something like SASS in order to do it automatically?


    Quote Originally Posted by Force Flow View Post
    For *just* image transparency in IE6, I've used this: http://www.twinhelix.com/css/iepngfix/

    Also, make sure you are using IE conditionals so that other versions of IE don't download the HTC behavior file unnecessarily. For example:

    Code:
    <!--[if lt IE 7]>
        <style type="text/css" media="screen">.pngfix { behavior: url('http://example.org/css/iepngfix.htc'); }    </style>
    <![endif]-->
    On a side note, are you aware of how many visitors you have who actually use IE6? The numbers that I've seen on the sites I maintain are so miniscule, it's not worth it any more to sink any time into working with IE6. I'm seeing maybe 3-4 unique visitors out of 1,000 still using IE6.
    I have also tried Twin Helix method for IE6 image transparency, however it does not support CSS background images and that is a requirement for me. Unfortunately with some of the Analaytics stats on client websites I still need to support IE6. It will never be 100% in IE6 but I still want to support it as much as possible without spending a lot of time with it. I am curious as towards why Modernizr doesn't fix the IE6 image transparencies? It seems to be bringing the older browsers up to date with all of the other things.
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  4. #4
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,524
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by revlimiter View Post
    Are you referring to the HTML5 Boilerplate .htaccess for file compression or something else?
    https://github.com/h5bp/html5-boiler...oc/htaccess.md
    You'll have to look at the actual htaccess file either in the zip file or here: https://github.com/h5bp/html5-boiler...ster/.htaccess

    I have also tried Twin Helix method for IE6 image transparency, however it does not support CSS background images and that is a requirement for me. Unfortunately with some of the Analaytics stats on client websites I still need to support IE6. It will never be 100% in IE6 but I still want to support it as much as possible without spending a lot of time with it. I am curious as towards why Modernizr doesn't fix the IE6 image transparencies? It seems to be bringing the older browsers up to date with all of the other things.
    Then the appropriate DD_* HTC file is fine.

    Modernizr simply doesn't have a png transparency fix included. It is primarily used for HTML5/CSS3 feature detection.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •