Geekie.org is making available a clone of Robson’s CSS Compressor using the GPL-licensed source code available at http://iceyboard.no-ip.org/showcode/code/css_compressor.php.
Just so that I didn’t have to go and search the Internet for this excellent CSS compressor every time I wanted to use it, I decided to host the code and frontend on our site. You can find it at http://www.geekie.org/tools/css.compressor. Bookmark it for future use! There are no advertisements on the frontend and the backend works exactly as it was intended to work at the original site.
Previously I talked about a long method of compressing JS or CSS on-the-fly with PHP’s zlib.output_compression. What this tool does isn’t “compress” in the sense of changing the output between the server and your browser, but rather optimize Cascading Stylesheets by changing the way that colours are defined to the shortest form possible, combining different declarations that are similar or identical, and removing useless measurements like 7.00 em. The result can be compressed to as little as 30% of the original code, depending on how it was written.
We recommend that you try this tool, and speed up your site. It’s easy; just copy and paste your CSS into the box and press submit. The default settings work fine for most stylesheets, and help you reduce your filesize significantly. The only downside is that the resulting code won’t be as easy to edit as before, so always keep your original, pre-optimized stylesheet backed up!
Loading ...
Today, a newly-registered user “jcapshaw” noted (on an older blog post about using zlib for output compression in PHP) that he wanted to send JavaScript, CSS, and HTML files through PHP for gzip compression. Clearly, as I pointed out in that blog post, the PHP developers prefer zlib.output_compression over the ob_start(’ob_gzhandler’) method, even though the zlib.output_compression method takes more work to set up. Why shouldn’t we apply it to other text-based files as well?
On one of my developments, RHHSMusic.com, I use several optimization methods recommended by the Yahoo! Developer Network, including:
- CSS sprites (combining navigational images into one larger file and using CSS to show only part of the image)
- Expires header (telling the browser how long the file would be valid, and for how long it wouldn’t need to re-fetch the file)
- Gzipping components of the site, including normal PHP/XHTML documents, ALL CSS stylesheets, and most JavaScript files
- Placing stylesheets in the <head> section
- Placing JavaScript includes at the very bottom of the page, just before </body>
- Not including site-wide CSS & JS in the HTML page
- Using multiple hostnames (javascript.rhhsmusic.com and media.rhhsmusic.com) to encourage parallel downloading
- Using ETags to identify when a file has changed
The majority of the above are accomplished through PHP; whether it’s PHP includes, PHP classes, or using PHP to gzip CSS & JS.
This article discusses how that is accomplished.
(more…)
Loading ...
