1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    80
    Vote Rating
    0
    Slapyo is on a distinguished road

      0  

    Default gzip JS and CSS files?

    gzip JS and CSS files?


    By placing the code below at the top of the CSS file, and renaming it to .php ... is this an appropriate way to gzip CSS files and JS files? Obviously the content type would be changed to text/javascript. Is there a better way to go about doing this?

    Code:
    <?php 
    ob_start ("ob_gzhandler");
    header("Content-type: text/css; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 ;
    $ExpStr = "Expires: " . 
    gmdate("D, d M Y H:i:s",
    time() + $offset) . " GMT";
    header($ExpStr);
    ?>

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    80
    Vote Rating
    0
    Slapyo is on a distinguished road

      0  

    Default


    i took some time this morning and applied this to my javascript files and my css files.

    before, it was 402k.
    after, it is 97k.

    that's a huge improvement and much more reasonable as well.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    122
    Vote Rating
    0
    moraes is on a distinguished road

      0  

    Default


    there's also a discussion about gzip here:

    http://www.yui-ext.com/forum/viewtopic.php?t=1685

  4. #4
    Ext User
    Join Date
    May 2007
    Posts
    31
    Vote Rating
    0
    kato is on a distinguished road

      0  

    Default


    I've been playing around with gzipped js and css files and while the overall sizes were reduced significantly (i.e., 466Kb down to 125Kb for ext-all.js), caching them is another issue. I've yet to figure out how to cache gzipped content.

    Also, there have been concerns about IE's somewhat buggy handling of gzipped content. Might have been fixed in IE7, but there are still quite a lot of IE6 users.

  5. #5
    Sencha User trbs's Avatar
    Join Date
    Mar 2007
    Posts
    310
    Vote Rating
    0
    trbs is on a distinguished road

      0  

    Default


    Using mod_deflate (on apache) or an alike feature in your webserver / webstack / webframework works quite well for me.

    Most of the mature gzip implementations for web usage detect and handle those IE cases quite nicely.. (at least it has been tested by lots of other people and sites)

    specially if u also configure server side caching of the gzipped data, so that your webserver does not have to gzip ext-all.js for every new request.

    my $0.02

  6. #6
    Ext User
    Join Date
    May 2007
    Posts
    31
    Vote Rating
    0
    kato is on a distinguished road

      0  

    Default


    Hi trbs,

    I'm able to gzip js and css files successfully and cache them on the server and the results were great - reducing overall files sizes down to as low as 20%. The dilemma, however, is that they're not cached by browsers and therefore subsequent page requests will still consume quite some bandwidth to load the gzipped files from the server. While normal (not gzipped) files are automatically cached by browsers and take up negligible time to re-access.

    Is it actually possible to work out client-side/browser caching of gzipped files? Most browsers may be caching files only after deflating them locally for execution/output. I'm still hoping there's someone out there who's figured out a way.

  7. #7
    Sencha User trbs's Avatar
    Join Date
    Mar 2007
    Posts
    310
    Vote Rating
    0
    trbs is on a distinguished road

      0  

    Default


    just checked this against my production server with firefox.

    it's a debian linux / apache2 box with mod_deflate enabled on css, javascript and html files.

    when i load it the first time firebug reports:
    ext-all.js 125KB content-encoding: gzip
    ext-all.css 12KB content-encoding: gzip
    the total load contained 19 request totalling 163KB

    * the files are respectivly 455KB and 71KB on disk.

    the next time i reload the page firebug report:
    ext-all.js 125KB content-encoding: gzip
    ext-all.css 12KB content-encoding: gzip
    the total load contained 19 request totalling 162KB (160 KB from cache)

    it appears to be caching the requests just fine.

    i cannot speak for Internet Explorer but i found this link: http://www.port80software.com/200ok/...01/21/272.aspx

    # re: The Vary header and HTTP Compression
    Internet Explorer versions 4 through 6 all have a bug in dealing with the Vary header.

    For versions 5 through 6, if the Vary header is set and its value is anything other than "Vary: User Agent", it will not cache the file if the file was served uncompressed to the browser - assuming the file is served with the correct headers to allow browsers/proxies to cache the content.

    For version 4.x, it's worse in that setting any Vary header whatsoever will cause the browser not to cache any content.
    I dont have IE to test with, but at least it's a known problem.

  8. #8
    Ext User
    Join Date
    May 2007
    Posts
    31
    Vote Rating
    0
    kato is on a distinguished road

      0  

    Default


    Thanks for the feedback trbs. Just curious, have Ext's examples (i.e., http://extjs.com/playpen/ext-2.0/exa...rid/grid3.html) been caching correctly for you? The js files are gzipped too, but they're not cached on either FF or IE on my end.

  9. #9
    Sencha User trbs's Avatar
    Join Date
    Mar 2007
    Posts
    310
    Vote Rating
    0
    trbs is on a distinguished road

      0  

    Default


    no it's not, it doesn't cache the url.

    it seems to cache google-analytics and images but not the compressed javascript.
    it seems that on my server, it does not send the "Cache-Control: must-revalidate" header like extjs.com does and it's also sending some extra headers like: etags and last-modified.

  10. #10
    Sencha User Ronaldo's Avatar
    Join Date
    Jul 2007
    Location
    Enschede, The Netherlands
    Posts
    290
    Vote Rating
    0
    Ronaldo is on a distinguished road

      0  

    Default


    Hi all,

    My system administrator told me they used GZip in the past, but it used to give trouble for css files and javascript files, as not every browser (IE) could handle specifically these files well when GZipped....

    Any news on that? Does it work well on all major browsers?

    Ronald

Similar Threads

  1. How to implement GZIP using PHP
    By manugoel2003 in forum Community Discussion
    Replies: 10
    Last Post: 3 Aug 2007, 1:10 PM
  2. What is the files I should include??
    By G_elias in forum Sencha Cmd
    Replies: 2
    Last Post: 18 Mar 2007, 10:34 PM
  3. gzip
    By Charles in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 25 Feb 2007, 4:40 PM
  4. Files to be included
    By in forum Ext 1.x: Help & Discussion
    Replies: 23
    Last Post: 1 Jan 2007, 12:45 PM
  5. Providing compressed (gzip) .js file
    By liotrox in forum Community Discussion
    Replies: 14
    Last Post: 14 Dec 2006, 9:07 AM

Thread Participants: 9