Gzip CSS and JavaScript files. Help wanted

General questions relating to Joomla! 1.5 There are other boards for more specific help on Joomla! features and extensions.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
choke_nl
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Mon Jul 28, 2008 4:24 pm

Gzip CSS and JavaScript files. Help wanted

Postby choke_nl » Fri Nov 14, 2008 2:41 pm

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
Joomla! Intern
Joomla! Intern
Posts: 58
Joined: Mon Oct 06, 2008 4:35 pm
Location: Sri Lanka
Contact:

Re: Gzip CSS and JavaScript files. Help wanted

Postby sanelv » Fri Nov 14, 2008 3:21 pm

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.
Sanjaya Elvitigala
Freelancer
Web Design Guy : http://www.mclanka.com

choke_nl
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Mon Jul 28, 2008 4:24 pm

Re: Gzip CSS and JavaScript files. Help wanted

Postby choke_nl » Fri Nov 14, 2008 4:05 pm

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-server/htaccess-gzip-for-faster-loading-and-bandwidth-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/adding-gzip-compression-to-your-site-via-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-to-optimize-your-site-with-gzip-compression/

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 :(

User avatar
SiriusOCT
Joomla! Intern
Joomla! Intern
Posts: 61
Joined: Sun Jan 14, 2007 1:18 pm
Location: Paris
Contact:

Re: Gzip CSS and JavaScript files. Help wanted

Postby SiriusOCT » Fri Nov 14, 2008 5:49 pm

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
Joomla 1.5.21 Fr/En

mariuscmr
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Mon Jan 26, 2009 10:43 am
Location: Romania
Contact:

Re: Gzip CSS and JavaScript files. Help wanted

Postby mariuscmr » Sat Jan 31, 2009 12:52 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 38
Joined: Thu Apr 24, 2008 6:14 am

Re: Gzip CSS and JavaScript files. Help wanted

Postby joeguo » Tue Mar 24, 2009 7:50 am

Try this Joomla plugin, it is really easy to use:
http://extensions.joomla.org/extensions ... 50/details
See forum signature rules viewtopic.php?f=8&t=65

frost
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 102
Joined: Thu Aug 24, 2006 8:54 am
Location: Manchester, England
Contact:

Re: Gzip CSS and JavaScript files. Help wanted

Postby frost » Wed Jan 27, 2010 3:45 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Fri Jan 15, 2010 8:57 am

Re: Gzip CSS and JavaScript files. Help wanted

Postby HSPL » Sun Jan 31, 2010 11:04 am

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

frost
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 102
Joined: Thu Aug 24, 2006 8:54 am
Location: Manchester, England
Contact:

Re: Gzip CSS and JavaScript files. Help wanted

Postby frost » Sun Jan 31, 2010 1:20 pm

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

laborduck
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Thu Dec 24, 2009 10:20 pm

Re: Gzip CSS and JavaScript files. Help wanted

Postby laborduck » Sat Jun 12, 2010 6:51 am

SiriusOCT wrote: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!
:eek:

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/site-management/site-performance/12088. installed all ready.

deadlydave
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Thu Oct 25, 2007 6:23 pm
Location: London UK
Contact:

Re: Gzip CSS and JavaScript files. Help wanted

Postby deadlydave » Thu Jun 30, 2011 10:59 pm

I've struggled with all these options...

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

User avatar
madiesonsmith
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Fri Jul 01, 2011 3:36 am
Contact:

Re: Gzip CSS and JavaScript files. Help wanted

Postby madiesonsmith » Fri Jul 01, 2011 3:48 am

Great blog! You have assembled a tremendous amount of useful information here. I will keenly look further to your future updates.
Let the experts give you good solutions and advice about cannot delete file problems.


Return to “General Questions/New to Joomla! 1.5”

Who is online

Users browsing this forum: No registered users and 8 guests