How To Optimize Your Site With GZIP Compression
来源:互联网 发布:c语言大全 app 编辑:程序博客网 时间:2024/05/17 06:48
[转载] http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
Compression is a simple, effective way to save bandwidth and speedup your site. I hesitated when recommending gzip compression when speeding up your javascript because of problems in older browsers.
But it’s 2007. Most of my traffic comes from modern browsers, and quite frankly, most of my usersare fairly tech-savvy. I don’t want to slow everyone else down becausesomebody is chugging along on IE 4.0 on Windows 95. Google and Yahoouse gzip compression. A modern browser is needed to enjoy modern webcontent and modern web speed — so gzip encoding it is. Here’s how toset it up.
Wait, wait, wait: Why are we doing this?
Before we start I should explain what content encoding is. When you request a file like http://www.yahoo.com/index.html
, your browser talks to a web server. The conversation goes a little like this:
1. Browser: Hey, GET me /index.html
2. Server: Ok, let me see if index.html is lying around…
3. Server: Found it! Here’s your response code (200 OK) and I’m sending the file.
4. Browser: 100KB? Ouch… waiting, waiting… ok, it’s loaded.
Of course, the actual headers and protocols are much more formal (monitor them with Live HTTP Headers if you’re so inclined).
But it worked, and you got your file.
So what’s the problem?
Well, the system works, but it’s not that efficient. 100KB is a lot of text, and frankly, HTML is redundant. Every <html>, <table> and <div>
tag has a closing tag that’s almost the same. Words are repeated throughout the document. Any way you slice it, HTML (and its beefy cousin, XML) is not lean.
And what’s the plan when a file’s too big? Zip it!
If we could send a .zip file to the browser (index.html.zip) insteadof plain old index.html, we’d save on bandwidth and download time. Thebrowser could download the zipped file, extract it, and then show it touser, who’s in a good mood because the page loaded quickly. Thebrowser-server conversation might look like this:
1. Browser: Hey, can I GET index.html? I’ll take a compressed version if you’ve got it.
2. Server: Let me find the file… yep, it’s here. And you’ll take a compressed version? Awesome.
3. Server: Ok, I’ve found index.html (200 OK), am zipping it and sending it over.
4. Browser: Great! It’s only 10KB. I’ll unzip it and show the user.
The formula is simple: Smaller file = faster download = happy user.
Don’t believe me? The HTML portion of the yahoo home page goes from 101kb to 15kb after compression:
The (not so) hairy details
The tricky part of this exchange is the browser and server knowingit’s ok to send a zipped file over. The agreement has two parts
- The browser sends a header telling the server it accepts compressed content (gzip and deflate are two compression schemes):
Accept-Encoding: gzip, deflate
- The server sends a response if the content is actually compressed:
Content-Encoding: gzip
If the server doesn’t send the content-encoding response header, itmeans the file is not compressed (the default on many servers). The“Accept-encoding” header is just a request by the browser, not ademand. If the server doesn’t want to send back compressed content, thebrowser has to make do with the heavy regular version.
Setting up the server
The “good news” is that we can’t control the browser. It either sends the Accept-encoding: gzip, deflate
header or it doesn’t.
Our job is to configure the server so it returns zipped content ifthe browser can handle it, saving bandwidth for everyone (and giving usa happy user).
In Apache, enabling output compression is fairly straightforward. Add the following to your .htaccess file:
Apache actually has two compression options:
- mod_deflate is easier to set up and is standard.
- mod_gzip seems more powerful: you can pre-compress content.
Deflate is quick and works, so I use it; use mod_gzip if that floatsyour boat. In either case, Apache checks if the browser sent the“Accept-encoding” header and returns the compressed or regular versionof the file. However, some older browsers may have trouble (more below)and there are special directives you can add to correct this.
If you can’t change your .htaccess file, you can use PHP to return compressed content. Give your HTML file a .php extension and add this code to the top:
In PHP:
We check the “Accept-encoding” header and return a gzipped versionof the file (otherwise the regular version). This is almost likebuilding your own webserver (what fun!). But really, try to use Apacheto compress your output if you can help it. You don’t want to monkeywith your files.
Verify Your Compression
Once you’ve configured your server, check to make sure you’re actually serving up compressed content.
- Online: Use the online gzip test to check whether your page is compressed.
- In your browser: Use Web Developer Toolbar > Information > View Document Size (like I did for Yahoo, above) to see whether the page is compressed.
- View the headers: Use Live HTTP Headers to examine the response. Look for a line that says “Content-encoding: gzip”.
Be prepared to marvel at the results. The instacalc homepage shrunk from 36k to 10k, a 75% reduction in size.
Try Some Examples
I’ve set up some pages and a downloadable example:
- index.html - No explicit compression (on this server, I am using compression by default ).
- index.htm - Explicitly compressed with Apache .htaccess using *.htm as a rule
- index.php - Explicitly compressed using the PHP header
Feel free to download the files, put them on your server and tweak the settings.
Caveats
As exciting as it may appear, HTTP Compression isn’t all fun and games. Here’s what to watch out for:
- Older browsers: Yes, some browsers still may havetrouble with compressed content (they say they can accept it, butreally they can’t). If your site absolutely must work with Netscape 1.0on Windows 95, you may not want to use HTTP Compression. Apache mod_deflate has some rules to avoid compression for older browsers.
- Already-compressed content: Most images, music andvideos are already compressed. Don’t waste time compressing them again.In fact, you probably only need to compress the “big 3″ (HTML, CSS and Javascript).
- CPU-load: Compressing content on-the-fly uses CPU timeand saves bandwidth. Usually this is a great tradeoff given the speedof compression. There are ways to pre-compress static content and sendover the compressed versions. This requires more configuration; even ifit’s not possible, compressing output may still be a net win. Using CPU cycles for a faster user experience is well worth it, given the short attention spans on the web.
Enabling compression is one of the fastest ways to improve yoursite’s performance. Go forth, set it up, and let your users enjoy thebenefits.
- How To Optimize Your Site With GZIP Compression
- How To Optimize Your Site With HTTP Caching
- HOW TO: Spice up Your Site With Simple PHP
- How to configure Nginx Gzip compression
- How to use a SQL Server database with your PHP web site
- How to Secure Your Web Site Running on IBM i
- [Django] Tell your site how to load the template files?
- How to communicate with your boss.
- How to Understand Your Users with Personas
- How to Flirt With Your Crush
- How to optimize NexentaStor performance?
- SSD: how to optimize your Solid State Drive for Linux Mint 17.3, Ubuntu 16.04 and Debian
- how does eclipse optimize your android code
- How to Create and Optimize Sprite Sheets in Cocos2D with Texture Packer and Pixel Formats
- 5 ways to optimize your design
- How to optimize for the Pentium
- How to optimize the WebStrom performance?
- How to Do Everything with Your Smartphone, Windows Mobile Edition
- Joomla! 系统间同步策略
- 关于软件设计的心得
- 导出与导入C++ DLL小记
- JSP利用JAVAbean链接JDBC
- The 256 color mode of xterm
- How To Optimize Your Site With GZIP Compression
- Java中StringBuilder.append和直接用String+String的效率比较
- 工作的优先级安排
- 内核态与用户态交互的方式(1)
- 官方原生驱动/软件不齐的条件下,windows 7上网银U盾/淘宝的替代使用方法
- 操作系统复习笔记(3)
- UNIX环境高级编程习题 4.11 myftw改造
- How To Optimize Your Site With HTTP Caching
- 用户态与内核态交付方式(2)