Gzip CSS and JavaScript files. Help wanted

[choke_nl]

To decrease my total document size of pages i have been compressing and packing all my CSS and JavaScript files. This reduced the size of my pages by 30% which is very nice.

Ofcourse i have Gzip enabled in the administration of Joomla! but this only Gzips my HTML document, no CSS or JavaScript. I have been reading that people Gzipped all their CSS and JavaScript with Joomla, none of them explains how to do it. Therefore i post this now.

For example the Mootools1.1 which are built into the core of Joomla 1.5. They were a whopping 70KB and ive been able to reduce that with the following compressor and packer to just 39KB.
http://shrinksafe.dojotoolkit.org/
http://dean.edwards.name/packer/

Ive read someone gzipped mootools to a size of 18KB, dont know if its true but i want to try it anyway.


Can someone explain how to Gzip my CSS and JavaScript files within Joomla?

[sanelv]

You gzip the files with any extension you want in the htaccess file. Put a few lines to the htaccess found at the joomla root dir. But be cautious coz sometimes server 500 errors occur if you did not do it correctly.

[choke_nl]

Thanks for a push in the right direction!

Ive been able to find more information about what lines of code i need to place in the .htaccess file. The problem is that there are lots of websites which say they have the right code for it, but it doesnt seem to work for me. Can anyone paste the line of code in their reply?

So far ive tried the following bits of code:

btw: I use the firebug plugin for firefox to check the document size and compressions + Yslow plugin to measure load times.

From: http://www.blog.highub.com/apache/http- ... th-saving/

Code: Select all

<IfModule mod_gzip.c>
mod_gzip_on       Yes
mod_gzip_dechunk  Yes
mod_gzip_item_include file      \.(html?|txt|css|js|php|pl|jpg|png|gif)$
mod_gzip_item_include handler   ^cgi-script$
mod_gzip_item_include mime      ^text/.*
mod_gzip_item_include mime      ^application/x-javascript.*
mod_gzip_item_exclude mime      ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

This didnt seem to work for me.

From: http://www.jhuskisson.com/articles/addi ... a-htaccess

Code: Select all

php_value output_handler ob_gzhandler

Also this didnt work for me, document size stays the same.

From: http://betterexplained.com/articles/how ... mpression/

Code: Select all

# compress all text & html:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript

Still the same document size..

I cant seem to figure it out

[SiriusOCT]

Hi all

Here's the best way ever for doing that with joomla (no matter 1.0.x or 1.5.x)

And I've tested a LOT of others boring solutions before this one.

Got a 81 score with YSlow (if no flash banners are on the home at the moment)

So this is very simple:

-Download the archive (1.6beta)
-Unzip
-Upload the "smartoptimizer" in your root

and past that in your htaccess, just after the "RewriteEngine On" line.

Code: Select all

<IfModule mod_expires.c>
	<FilesMatch "\.(gif|jpg|jpeg|png|swf|css|js|html?|xml|txt)$">
		ExpiresActive On
		ExpiresDefault "access plus 10 years"
	</FilesMatch>
</IfModule>
<IfModule mod_rewrite.c>
	RewriteEngine On
	
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteRule ^(.*\.(js|css))$ smartoptimizer/?$1
	
	<IfModule mod_expires.c>
		RewriteCond %{REQUEST_FILENAME} -f
		RewriteRule ^(.*\.(js|css|html?|xml|txt))$ smartoptimizer/?$1
	</IfModule>

	<IfModule !mod_expires.c>
		RewriteCond %{REQUEST_FILENAME} -f
		RewriteRule ^(.*\.(gif|jpg|jpeg|png|swf|css|js|html?|xml|txt))$ smartoptimizer/?$1
	</IfModule>
</IfModule>
<FilesMatch "\.(gif|jpg|jpeg|png|swf|css|js|html?|xml|txt)$">
	FileETag none
</FilesMatch>

Don't forget to verify all the options in the configuration file "smartoptimizer/config.php"

Anyway, all is well explained here:

http://farhadi.ir/works/smartoptimizer

[mariuscmr]

I managed to make mootools.js 18 KB size. First: I compressed the original file with all three options enabeld here: http://dean.edwards.name/packer/ than I used smartoptimizer (thanks for the tip).

Marius

[joeguo]

Try this Joomla plugin, it is really easy to use:
http://extensions.joomla.org/extensions ... 50/details

[frost]

to remove mootools, put the following just after <head> <?php :
// Remove auto generated mootool from header

$headerstuff = $this->getHeadData();

reset($headerstuff['scripts']);

$moo = key($headerstuff['scripts']);

unset($headerstuff['scripts'][$moo]);

$this->setHeadData($headerstuff);

Hope that helps!

[HSPL]

Is there any automatic solution for compressing CSS and JAVA commands for joomla

[frost]

i use the following http://www.catswhocode.com/blog/3-ways- ... -using-php but it seems the database is down at the minute

[laborduck]

Hi all

Here's the best way ever for doing that with joomla (no matter 1.0.x or 1.5.x)

And I've tested a LOT of others boring solutions before this one.

Got a 81 score with YSlow (if no flash banners are on the home at the moment)

So this is very simple:

-Download the archive (1.6beta)
-Unzip
-Upload the "smartoptimizer" in your root

and past that in your htaccess, just after the "RewriteEngine On" line.

Code: Select all

<IfModule mod_expires.c>
	<FilesMatch "\.(gif|jpg|jpeg|png|swf|css|js|html?|xml|txt)$">
		ExpiresActive On
		ExpiresDefault "access plus 10 years"
	</FilesMatch>
</IfModule>
<IfModule mod_rewrite.c>
	RewriteEngine On
	
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteRule ^(.*\.(js|css))$ smartoptimizer/?$1
	
	<IfModule mod_expires.c>
		RewriteCond %{REQUEST_FILENAME} -f
		RewriteRule ^(.*\.(js|css|html?|xml|txt))$ smartoptimizer/?$1
	</IfModule>

	<IfModule !mod_expires.c>
		RewriteCond %{REQUEST_FILENAME} -f
		RewriteRule ^(.*\.(gif|jpg|jpeg|png|swf|css|js|html?|xml|txt))$ smartoptimizer/?$1
	</IfModule>
</IfModule>
<FilesMatch "\.(gif|jpg|jpeg|png|swf|css|js|html?|xml|txt)$">
	FileETag none
</FilesMatch>

Don't forget to verify all the options in the configuration file "smartoptimizer/config.php"

Anyway, all is well explained here:

http://farhadi.ir/works/smartoptimizer

Wow!


That was awesome!

Thank you posters!


My little website went up a grade in page and yslow http://gtmetrix.com with JCH Optimize http://extensions.joomla.org/extensions ... nce/12088. installed all ready.

[deadlydave]

I've struggled with all these options...

That plugin makes stuff on my page not work. Really trying to fix my load times.

[madiesonsmith]

Great blog! You have assembled a tremendous amount of useful information here. I will keenly look further to your future updates.