How To Optimize Your Site With GZIP Compression

Blog Articles
41

Hi Rob, I’ll see if I can help with your questions :).

  1. Using .htaccess

When configuring Apache, you can turn on settings like compression in many places. First, there’s a global configuration file (httpd.conf). Next, you can have a .htaccess file in a root directory, which can apply to all subdirectories. Lastly, you can have a .htaccess file in each subdirectory.

So, if compression is being turned on mysteriously, you may need to check the config files “higher up” to see if they have enabled it.

  1. Getting Started

To start off, just try using

SetOutputFilter DEFLATE

in a .htaccess file in the directory you want to compress (or the root directory to compress it all. If you get a server 500 error check for a typo; or it may be that your version of Apache doesn’t support DEFLATE by default.

  1. If that works, you can turn on compression for other file types as needed:
SetOutputFilter DEFLATE SetOutputFilter DEFLATE

(Put these alongside the *.js rule in the .htaccess file).

  1. You can use both the “Files *.js” and AddOutputFilterByType if you need.

  2. Try downloading the examples and see if they show up as compressed on your site. Download them here: http://betterexplained.com/examples/compressed/compression-example.zip

Hope this helps,

-Kalid

42

Hey thanks for the response. I am getting it a bit more now. Can I have something like the following or does it cancel each other out or what?

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

# Or, compress certain file types by extension:

SetOutputFilter DEFLATE


# Or, compress certain file types by extension:

SetOutputFilter DEFLATE
43

whoops have to do that one again

compress all text & html:

AddOutputFilterByType DEFLATE text/html text/plain text/xml

Or, compress certain file types by extension:

<Files *.js>
SetOutputFilter DEFLATE

Or, compress certain file types by extension:

<Files *.php>
SetOutputFilter DEFLATE
44

Hi Rob, you should be able to use all 3 at the same time. The directives shouldn’t cancel out – you can have multiple overlapping commands.

45

[…] How To Optimize Your Site With GZIP Compression | BetterExplained  Annotated But it’s 2007. Most of my traffic comes from modern browsers, and quite frankly, most of my users are fairly tech-savvy. I don’t want to slow everyone else down because somebody is chugging along on IE 4.0 on Windows 95. Google and Yahoo use gzip compression. A modern browser is needed to enjoy modern web content and modern web speed — so gzip encoding it is. Here’s how to set it up. […]

46

[…] How To Optimize Your Site With GZIP Compression | BetterExplained  Annotated But it’s 2007. Most of my traffic comes from modern browsers, and quite frankly, most of my users are fairly tech-savvy. I don’t want to slow everyone else down because somebody is chugging along on IE 4.0 on Windows 95. Google and Yahoo use gzip compression. A modern browser is needed to enjoy modern web content and modern web speed — so gzip encoding it is. Here’s how to set it up. […]

47

[…] To improve page load times I wanted to take advantage of the Apache 2 zlib component and the comments on this article gave me the clue I needed and I created a .htaccess file with the following code: <filesmatch> SetOutputFilter DEFLATE </filesmatch> […]

48

Thanks to this and other articles I desiced to gzip my pages and now I save 72% on file size! Some of my pages are only 2.5k!

This really is an awesome idea and I don’t know why people fight over .00004 in coding speed when simply changing things on the server does such wonders!

49

Thanks David, glad you liked it! You’re totally right, sometimes a front-end optimization (of 75%!) can totally overshadow any back-end work. Making the page render in .01 vs .02 seconds really has no difference when you take the download into account.

50

thanks

51

Is it possible to compress all the js and css files into one file? I am actually including multiple files in the page.

52

Hi Arpan, you sure can. If you have a build script, you can run something like “cat *.js > allfiles.lib.js”. There’s more info here:

http://betterexplained.com/articles/speed-up-your-javascript-load-time/

53

Had no .htaccess access so added that ob_start… line of php code to my pages. Results are amazing. One of the pages is now 25K (was 85K) Wow!

54

Great, glad it helped your site! It’s pretty amazing what a few lines can do.

55

[…] Even better, you can “replay” any header, editing the data that is sent. This is useful when testing or debugging cache or gzip encoding behavior. […]

56

[…] How To Optimize Your Site With GZIP Compression Compression is a simple, effective way to save bandwidth and speed up your site. I hesitated when recommending gzip compression when speeding up your javascript because of problems in older browsers. (tags: Http Gzip Compression) […]

57

[…] gzip compression […]

58

[…] You should try to convert your website from TABLES to DIV based design. This one should be your first consideration. You could do a self comparison: Make 2 same look pages, one using table, other using div. you should see the div version is lighter then the table version. Graphic compression, will be your next consideration. You can optimize it using image ready or photoshop, or other graphic software. The save for web feature should be useful to lighten up your heavy page. When you’re done with the above, recompress your page using gzip compression. you can read about it here: How To Optimize Your Site With GZIP Compression Alrite, good luck. __________________ Panasonic Blu-ray Player | Blu-ray Movies Review | MotoGP News […]

59

More cudos, amazingly simple article! -Thanks!! my pages are “racing” now!!

60

Awesome, glad it was helpful.