Falcon1986-Online

Home of a med student who likes to manage websites and talk tech!

More on compressing your website content for speed [PART I]

with 22 comments

GZipIn one of my previous posts I explained how you could force GZip compression on your server, by specifically focusing on websites hosted within the HostMonster environment. The post has generated a lot of discussion, especially from those using the HostMonster as their web host. Recently, I did some additional research and experimentation that have revealed a few new things, which I will share with you in this article series. I should warn you that this is quite a long article. It is written to be instructive for those who may not possess advanced knowledge in this area because I too do not possess such advanced knowledge. I am by no means a professional at this, so please keep this in mind if you choose to implement the following techniques. This article is simply meant to share what I have discovered and hopefully get constructive feedback from those more knowledgeable in the area, so that we all can benefit.

A. Introduction to Part I

Before proceeding, please note that the content of this article was written quite some time ago when I had great success using the described method. It worked flawlessly on HostMonster and WPWebHost, two very reliable and affordable web hosting providers. Although I have resorted to using a slightly different (and easier) method, I still feel that this information may be useful to those who do not necessarily use WordPress.

B. Let’s get started

With the increasing amount of content and spectacular visual effects that many websites are utilizing these days, it should come as no surprise that there will come a point at which things will begin to slow down. Requiring that your visitors download large CSS and Javascript files, for example, can be an annoyance for those on slower internet connections. Furthermore, valuable website bandwidth is wasted just serving these files. One solution to reducing file size and thereby increasing website responsiveness for your visitors is to compress everything before serving. Here is how it can be accomplished using GZip compression.

C. Activate GZip compression for dynamic content

This was a bit confusing when I first discovered it, so I will try to explain as best I can. Compression can be passively performed by the server (as was the case being described in this post), or it can be actively performed (e.g. via PHP). I choose to focus on the former for now because others have suggested that it saves server resources. The latter triggers compression via PHP on every request, which you may not need, but I will write about it sometime in the future.

As you should have expected, in order to get GZip working properly, your server must support it and it must be activated. It is usually installed as an extension module to Apache, i.e. mod_gzip. You can perform a quick check to see if GZip is available for activation by checking phpinfo(); (see the PHP Manual). php.ini and .htaccess must also be configured. One important thing to note is that the configuration changes you make to php.ini activate server-side compression of dynamic content, not static content.

For those using HostMonster hosting: Several users have informed me that HostMonster does not support mod_gzip or mod_deflate for compression. At the time of writing this article I was successfully able to utilize GZip compression. Some time ago I heard that HostMonster added a “switch” to manually activate compression using mod_deflate instead via the cPanel, but this “switch” has suddenly disappeared. I have no explanation for why I am able to activate GZip while others can not; perhaps it has to do with the particular server your website is housed on. As a fallback for those having problems, I have included the settings needed to activate ZLIB compression instead, which I know for sure works in the HostMonster environment.

You can activate either GZip or ZLIB via php.ini, not both. Make the relevant changes to php.ini and save. This assumes that you have a master php.ini file that takes care of all of your PHP. If you maintain separate PHP environment settings for different sub-directories, you will need to make the following changes to the individual php.ini files.

Activate GZip compression on the server:
output_buffering = On
output_handler = ob_gzhandler
zlib.output_compression = Off
Activate ZLIB compression on the server:
output_buffering = Off
output_handler =
zlib.output_compression = On

[Note that there is no value set for output_handler using the ZLIB method.]

For completeness, add the following lines to your .htaccess file. If you are using WordPress, add the code after the default WordPress-inserted rules.

modgzip

The lines above should trigger compression of text-based files only, not images. Forcing the compression of images may result in garbled output since many are saved in compressed formats to begin with. Try Smush.it for compressing images to save even more on bandwidth.

D. Activate GZip compression for static content

By now, you are probably asking yourself, “What?! Didn’t I just activate compression for static content using the above .htaccess code?” After all, are not external CSS and Javascript considered “static content”. That is what I thought as well, but for some reason none of my CSS or Javascript were being served compressed – at least not yet!

A server configured with GZip enabled will only present the compressed version of content to the client browser if the browser supports interpreting that compressed content. Most modern web browsers will send the proper request in their headers, while others have a bit of difficulty doing so. When there is no client-side support for interpreting compressed content, the uncompressed version is served instead. In a sense, this provides a fallback for a few website visitors using old versions of web browsers without this feature.

Some web browsers need to be “told” that the compressed content that they are receiving is of a particular MIME type in order to be properly interpreted. This is especially true in the case of compressed Javascript and CSS files. Adding the following lines to your .htaccess file immediately following the above rules should take care of this problem.

modgzip2

Some persons may get a bit more creative and decide to serve files that are pre-compressed. By “pre-compressed”, I mean that they take their CSS file, for example, and use a program such a 7Zip to output a GZipped version, in the same way one would Zip a file for local archiving. Referencing mystylesheet.css.gz in the HTML’s header will not be sufficient as the web browser requires additional information in order to read the GZipped content. Append your .htaccess file with the following lines:

modgzip3

Additionally, do not forget to specify the MIME type for the CSS call in the HTML’s header.

CSS reference in HTML header

These additional .htaccess statements force browsers to interpret .css.gz and .js.gz files as CSS and Javascript respectively. Safari and old versions of Internet Explorer have problems with this so additional statements have to be made for them. You will notice that their User Agents are mentioned within the 3rd and 4th lines of the .htaccess rules above.

While serving pre-compressed files can save you a lot of bandwidth and speed up website loading, compatibility across different browsers (and different versions of a single browser) may pose a problem. There are bound to be browser User Agents that will not be able to interpret your .css.gz and .js.gz files. Here is where checking your website’s appearance through multiple web browsers comes in handy. Should you use Google Analytics, you can easily pin-point those popular web browser clients coming to your website and determine whether or not compression will hurt your visitors’ experience.

E. Test for compression

There are several tools out there that you can use to see whether or not your website content is being served compressed. Two of my favourite are Site-Perf.com and GIDNetwork.com. Simply enter your website’s URL and run the test. If compression is working properly, you will notice compression ratios being reported for the various elements on the web page.

GZip Test

Sample test report after GZip activation

F. Final words

I hope this article has been helpful to you. If you find problems and have suggestions, please mention them in the comments. In Part II of this series, I will share with you my experience using PHP to compress website content when you do not have access to activating it via php.ini. Hopefully, that one should be much shorter!

Advertisements

Written by falcon1986

8 January, 2010 at 8:42 PM

Posted in Web Development

Tagged with , , , ,

22 Responses

Subscribe to comments with RSS.

  1. I think you did not need to create a static category.
    I did the same you did, then saw js were not compressing and then set the headers so that they are sent telling it is going to be compressed. That was it and now it works like a charm. However, I am unable to compress the regular http://www.sitename.com/ file which is html after the php parser has done its job.

    Luis

    14 January, 2010 at 12:31 AM

  2. I think in the sites the response says it is being compressed. However, I am using firefox as well tied with fiddler2. Firefox says it is not being compressed for some reason, I need to still try other browsers to check the headers. Fiddler2 says the header is being received as Firefox, in this case no compression…

    Firefox issue? or really why are the testers saying there is compression?

    Luis

    14 January, 2010 at 2:15 AM

    • Hello Luis.

      In order for your browser to receive compressed content, it must be able to send request headers to the server saying that it is capable. In Firefox, open about:config and search for the ‘network.http.accept-encoding’ preference. Ensure that the value is set to ‘gzip,deflate’. The browser header should now be ‘Accept-Encoding: gzip,deflate’.

      I suspect that Fiddler2 is probably not sending ‘Accept-Encoding: gzip,deflate’ to begin with, so is only receiving the uncompressed content.

      Try using the following Firefox addons, then inspect the response headers for ‘Content-Encoding: gzip’. They should be much more reliable in this situation:

      Live HTTP Headers – after installation, navigate to your website and from the Firefox menu, choose Tools > Page Info > Headers.

      Web Developer – after installation, navigate to your website and go to Information > View Response Headers.

      falcon1986

      14 January, 2010 at 4:51 PM

  3. First a big thanks for this post and your previous one on the subject. GIDNetwork reports 62% – 82% increase in download performance of my site pages. I had no idea that my Hostmonster account was not gzipping.

    My question: Site-Perf and YSlow still says my CSS file is not compressing. I have confirmed that my HM account is using single php5. I even tried using the method described here: http://www.wangarific.com/how-to-gzip-css-files/

    What am I missing?
    Thanks for your help.

    Here is my .htaccess file:

    # Use PHP5 Single php.ini as default
    AddHandler application/x-httpd-php5s .php

    # The following code is for gzip compression.
    # This forces all CSS files through gzip compression if browser accepts it
    RewriteRule ^(.*).css$ /csszip.php?file=$1.css [L]

    # Check if gZip support has been installed

    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file \.(html|txt|css|js|php|pl)$
    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.*

    AddEncoding gzip .gz

    ForceType text/css
    Header set Content-Encoding: gzip

    ForceType text/javascript
    Header set Content-Encoding: gzip

    Paul

    31 January, 2010 at 5:05 AM

    • Hello Paul.

      First of all, to address the method used on the other website: Did you remove the .TXT extension so that you have csszip.php instead of csszip.php.txt? Additionally, did you double-check that the path to csszip.php is correct as referenced in the .htaccess RewriteRule?

      Secondly, I would like to suggest that you move that entire section (from ‘AddEncoding gzip .gz’ to ‘Header set Content-Encoding: gzip’) to the location right before the RewriteRule for csszip.php. I’m not sure if this will make a difference, I would imagine that the browser needs to be told first that it should accept the gzip content-encoding before giving it instructions on how to handle the gzip-compressed content.

      BTW, WordPress may just be stripping the FilesMatch and Files tags here that enclose the content-encoding rules. Please do not forget to include them as written above in your .htaccess file.

      Finally, I would like to recommend that you use Live HTTP Headers or the Web Developer extension for Firefox to examine the header requests and responses.

      Recall that accepting gzip content is totally dependent on the browser’s support of it, so you need to ensure that you are telling browsers that you have a gzipped alternative to download. If the browser or user-agent does not support gzip (or even reading gzipped content for a particular file type) it will try obtaining the uncompressed version and will report as such.

      falcon1986

      31 January, 2010 at 12:16 PM

    • Yes, I have the csszip.php correctly named. I rearranged as you suggested to no avail. And using Live HTTP headers didn’t show anything I didn’t already know.

      Then it hit me that I had used a RewriteRule on another one of my websites in the .htaccess file. When I looked at that one, I saw this line…

      RewriteEngine On

      …before the RewriteRule.

      Now in checking on Site-Perf not only does my CSS get compressed by 75%, but for some reason, so does my .js files too. Bonus.

      Everything is working so I won’t argue with success. Thanks for your suggestions. It helped get me thinking in the right direction.

      Paul

      1 February, 2010 at 3:06 AM

    • Thanks for coming back to share your success, Paul. It’s amazing that we forget to look at the most obvious things sometimes. All the best!

      falcon1986

      1 February, 2010 at 2:11 PM

  4. Just thought you might find it useful to know that your recommendations also work on iPage.com hosting. I just switched my portfolio site there as a test, and after figuring out I had to generate the php.ini file, then upload it with your changes, it was smooth sailing…

    Thanks again!

    🙂

    Tieson T.

    12 March, 2010 at 6:10 AM

    • Thanks for the notification, Tieson! I’m sure others will find that bit of information useful.

      falcon1986

      14 March, 2010 at 7:51 PM

  5. Hey there,

    Don’t know if you recall me, but I’m orion2001 from the HM forums, and I remember picking your brains about this stuff in a forum thread on HMforums.com a while ago :). I was really hoping that this new post would solve my problems, but unfortunately it didn’t :(. Let me give you the run down on my situation.

    my HTML file compresses fine, using either Gzip or Zlib. However, neither methods are able to zip and deliver CSS and JS files. I really have no clue why. I thought that the new bit about AddEncoding gzip .gz would do the trick but it didn’t seem to help.

    The only 2 things that I can get to work are to either place css.gz and js.gz files manually in the same folders and then use .htaccess code to deliver the gzip file instead of the css/js files, or to try and call some script that zips css files on the fly.

    Do you know of any method that would enable zipped delivery of CSS and JS files via htaccess and php.ini modifications? Thanks a ton for the articles and resources.

    Cheers

    Sudeep

    30 March, 2010 at 12:39 AM

  6. Great post man, love the detailed info. Linking on my site.

    thinklime

    30 April, 2010 at 1:40 PM

  7. This may be a bad question, but I’m wondering if I have wp super cache enabled (with gzip compression), will adding server side compression (gzip once again) that you outlined make my site even faster?

    Thornhill Spa

    10 July, 2010 at 10:58 PM

    • No, it won’t. Your pages will no longer display correctly due to the garbled output that occurs when additional compression is applied.

      falcon1986

      11 July, 2010 at 11:33 PM

  8. I couldn’t get the css or js compression working on my hostmonster website (although html compression was working by default). In my case at least it seems that the was failing to trigger, indicating the module was not installed.

    I noticed that the apache version was 2.2+, so looking at the apache docs I thought I’d give some mod_deflate config settings a try. I added this to my .htaccess file:

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

    And according to GIDZipTest website my css and js files are now compressed. Hope this helps.

    Asha Carlos

    18 August, 2010 at 2:44 AM

  9. Looks like my above comment was wordpress filtered, resulting in some of the example code disappearing.

    The AddOutputFilterByType lines should have an IfModule mod_deflate.c wrapper.

    Asha Carlos

    18 August, 2010 at 2:50 AM

    • Thanks for the input! I’m sure others will benefit from what you posted.

      falcon1986

      18 August, 2010 at 8:59 AM

  10. This is an old thread, so sorry for bringing it back to life, but I’m having some difficulties. Similar to some posts above, GidZip test shows my site as being compressed, but running through Google’s page speed test (http://code.google.com/speed/page-speed/), google shows it as not being compressed.

    Below is my CSS code, hope it doesn’t get truncated by your WordPress filter. Any help getting it to pass Google’s test would be greatly appreciated. The website I’m trying this on is http://www.easyaccessenglish.com. I have the SuperCache plugin enabled, but not its built-in compression functionality.

    in the .htaccess code, I even added “RewriteEngine On”, which was noted in an above post. Not sure if I put it in the right place.

    
    
    RewriteEngine On
        mod_gzip_on Yes
        mod_gzip_dechunk Yes
        mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
        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.*
    
    
    AddEncoding gzip .gz
    
    
    ForceType text/css
    Header set Content-Encoding: gzip
    
    
    
    ForceType text/javascript
    Header set Content-Encoding: gzip
    
    
    

    David

    25 November, 2011 at 11:06 AM

  11. As suspected, my above code was truncated. Not sure how to paste in the full code.

    David

    25 November, 2011 at 11:07 AM

  12. How make it work with WP Super Cache
    I have hostmonster account and did not work with after test it on gidnetwork.com

    Salem Fituri

    26 November, 2012 at 7:21 AM

    • @Salem: Unfortunately, I no longer use HostMonster so cannot investigate. However, what I do know is that HostMonster made some upgrades (before I left them) which might have allowed you to activate compression from within cPanel itself. But again, that was a long time ago and I’m not sure what the situation is at this moment.

      falcon1986

      1 December, 2012 at 11:04 AM

  13. Hello.

    Thank you for contacting Technical Support.

    Mod_deflate is enabled, but none of the configuration opens are available to the customer. Because of this, gzip is not going to be available in the traditional sense you wish. So, simple answer is that gzip is not available on shared servers. You would need a VPS or Dedicated.

    Thank you,
    Marlo
    Web Advisor
    Hostmonster.com

    Mikhail Stroev

    26 February, 2014 at 3:14 AM

    • Hello Mikhail! Thank you for informing us about this feature on the Hostmonster servers. As you can see, this post is more than 4 years old, so I wouldn’t expect it to be relevant if Hostmonster updated its features. Thanks again.

      falcon1986

      24 March, 2014 at 7:45 PM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: