PDA

View Full Version : Compress all output and speed up JS file download - Apache


ffzhuang
4 Nov 2009, 7:20 AM
Hi, All:

Today we add the following config in our Apache server,

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript
application/javascript

And our js file size are huge reduced. The big one reduce as follow:

ext-all.js - from 609 k to 167 k
home_mini.js - from 523 k to 101 k

It makes our site load really quick and it is really help. You can try it at our site to see the js file size: www.feyasoft.com
(http://www.feyasoft.com)
Notice

Enabling filters with AddOutputFilterByType may fail partially or completely in some cases. For example, no filters are applied if the MIME-type could not be determined and falls back to the DefaultType setting, even if the DefaultType is the same.

However, if you want to make sure, that the filters will be applied, assign the content type to a resource explicitly, for example with AddType or ForceType. Setting the content type within a (non-nph) CGI script is also safe.

Maybe your guy already know this, but I just know this - for share in case.

Regards!

Fenqiang Zhuang
Foggy
13 Nov 2009, 8:32 AM
I didn't know that and it decrease the page load enorm. Thanks for the tip...
mvbressler2008
18 Nov 2009, 1:04 PM
Hi, its looks great but its didn't work for me... can u explain me??? where i have to put this code???

Sorry i am new in this...
mschwartz
18 Nov 2009, 1:46 PM
In httpd.conf or your vhost configuration file. Depending on the OS, the files are in different places.
ffzhuang
18 Nov 2009, 7:35 PM
Here it is the detail steps about how to create it:

http://ffzhuang.blogspot.com/2009/11/compress-all-output-and-make-js-file.html

It work for me.

Regards!

Fenqiang Zhuang


Hi, its looks great but its didn't work for me... can u explain me??? where i have to put this code???

Sorry i am new in this...
calebos
16 Dec 2009, 4:53 AM
How do i make deflate work with apache2 and extjs files ?

I have


<Location />
SetOutputFilter DEFLATE
AddOutputFilter DEFLATE js css htm html xml
</Location>

And it seems to be working with in index.html but size doesnt change for ext-all.js

snipp from my indext.html:


<html>
<title>xWRIS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<script type="text/javascript" src="js/date-functions.js"></script>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/source/locale/ext-lang-pl.js"></script>

<script type="text/javascript">
<?php
ffzhuang
16 Dec 2009, 6:24 AM
See this:

LoadModule deflate_module modules/mod_deflate.so
< Location / > AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript application/javascript
< /Location >

You forget added javascript.

Regards!

Fenqiang Zhuang


How do i make deflate work with apache2 and extjs files ?

I have


<Location />
SetOutputFilter DEFLATE
AddOutputFilter DEFLATE js css htm html xml
</Location>

And it seems to be working with in index.html but size doesnt change for ext-all.js

snipp from my indext.html:


<html>
<title>xWRIS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<script type="text/javascript" src="js/date-functions.js"></script>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/source/locale/ext-lang-pl.js"></script>

<script type="text/javascript">
<?php
zeruyo
18 Dec 2009, 1:22 AM
I don't know how to see the size of js sent to the browser to check that the setting work. Any suggestion?
Thanks
calebos
18 Dec 2009, 3:08 AM
firebug
Animal
18 Dec 2009, 5:18 AM
This is useful: http://www.fiddler2.com/fiddler2/
zeruyo
18 Dec 2009, 8:56 AM
firebug

thanks, but i looked everywhere in firebug and i didn't find any data about the size of downloaded js