blog.betabong.com » Browser

Use GZip compression for your website

betabong — Thu, 25 Mar 2010 09:53:50 +0000

Most of my Flash apps or websites use XML files, either for communication or initial data. They can get quite large, reaching about 100 kb or more is not seldom. You might say: so what?! 100 kb is like nothing for a bandwidth nowadays! Well, if you’ve every used iPhone tethering in an area where there is no 3g network, you start appreciating every single byte you won’t have to suck from the net. (On a side note: That’s when Opera really comes in handy.)

XML files compress really well

Because XML usually contains a lot of repetitive elements (noticably tags and attributes), they are like a compressor’s darling. Just zip a few of your XML files and you’ll see.

Now I kind of always thought that on nowadays webservers gzip compression is activated by default anyway. Which was wrong, at least for quite a bunch of servers I use.

Activate GZip compression

If your server installation contains the deflate module (which is the case for all of the ones I use), then you can simply add the following line to your .htaccess file:

# compress all html, plain text, xml, css and javascript:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript

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

I’ve also tried more complex constructs found on the web, but they resulted in «Internal server errors» which is why I’ll go along with this simple one for now.

The effects are dramatic! I usually get about 70% – 80% of reduction for non-minimized files,

Examples

	Uncompressed	Compressed	Reduction
Javascript minimized MooTools YUI compressed	66,867	20,964	68.6%
Javascript minimized MooTools uncompressed	102,991	27,599	73.2%
XML/CSS combined A larger initial XML file for a Flash website of mine	84,316	18,229	78.4%
XML/CSS combined A larger initial XML file for a Flash website of mine	84,316	18,229	78.4%
HTML A swiss news website, 20 Minuten	148,587	29,385	80.2%
HTML My blogs home page	51,638	12,991	74.8%

Tools

If you want to test your website, these pages are very informative (first one is faster, second one more informative):

http://www.whatsmyip.org/http_compression/

http://www.gidnetwork.com/tools/gzip-test.php

I also like this one, although it only gives you little info on content-encoding. But very much on top of that :-)
http://www.wmtips.com/tools/info/

This little Firefox addon will tell you wether any site you visit has GZip activated:
https://addons.mozilla.org/en-US/firefox/addon/54647 (Content Encoding Detector)

Conclusion

HTML websites will profit a lot from this compression, as well as Flash sites (if just for your swfobject.js) that use textual communication. And best of all: it won’t need any kungfu effort on your side! And: practically all browsers support it. (I’ve only heard of problems with IE6, but then, you know, f*** IE6)

Update:

A more complete solution for your .htaccess file:


	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/xml
 
	AddOutputFilterByType DEFLATE image/x-icon
 
	AddOutputFilterByType DEFLATE text/css
 
	AddOutputFilterByType DEFLATE text/javascript
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/x-javascript
	AddOutputFilterByType DEFLATE text/x-js
	AddOutputFilterByType DEFLATE text/ecmascript
	AddOutputFilterByType DEFLATE application/ecmascript
	AddOutputFilterByType DEFLATE text/vbscript
	AddOutputFilterByType DEFLATE text/fluffscript
 
	AddOutputFilterByType DEFLATE image/svg+xml
	AddOutputFilterByType DEFLATE application/x-font-ttf
	AddOutputFilterByType DEFLATE application/x-font
	AddOutputFilterByType DEFLATE font/opentype
	AddOutputFilterByType DEFLATE font/otf
	AddOutputFilterByType DEFLATE font/ttf
	AddOutputFilterByType DEFLATE application/x-font-truetype
	AddOutputFilterByType DEFLATE application/x-font-opentype
	AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
	AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.formula-template

(Source)

3D Point Cloud with Javascript and Canvas

Switch Flash Browser Plugin on Mac OS X

betabong — Mon, 27 Apr 2009 13:12:35 +0000

Sometimes you need to test your Flash stuff with different plugin versions. Even if you just want to run some performance tests, it is very useful to switch to the release player (see below for another example).

For windows there is a neat Firefox Plugin that makes switching quite a snap. On Mac there is one too – I haven’t tested it, but it’s supposed to work (though I’m not too sure about that when I read these comments here). Still I prefer to work with Safari and I kind of dislike the thought of starting Firefox to just switch Plugins.

Fortunately I’ve found another solution: WSPluginSwitcher. This one comes as a Cocoa app and once configured (you really should read this wiki page), it works real well for me. Also they have prepared plugin versions for you to download (though the most recents are missing, but no big deal really).

As for the speed tests, let me just give you another example (impressing enough for me to wanna switch players for real world testing).

In Debug Player:

method...................................................ttl ms...avg ms
tare [2]                                                      0     0.00
CSSFastParser                                               603   120.60
CSSRegExpParserFast                                         987   197.40
CSSRegExpParserFastAdvanced                                1457   291.40
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

In Release Player:

method...................................................ttl ms...avg ms
tare [2]                                                      0     0.00
CSSFastParser                                               354    70.80
CSSRegExpParserFast                                         972   194.40
CSSRegExpParserFastAdvanced                                1469   293.80
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

Both 10.0.22.87, and exported as release swf. Oh, and by the way tested with another useful tool from Grant Skinner: AS3 Performance Testing Harness.

Test Flex/Flash throttled (aka Simulate Download)

betabong — Sat, 06 Dec 2008 15:52:55 +0000

Most of the Flash application deal with server side data like images, xml files etc. We tend to forget about that because the default Run or Debug commands in Flex will open a local html file (and also because we developers often have quite a nice internet connection when testing remotely). Thus all data is loaded nearly instantely.

In Flash we have a menu command called «Simulate Download» to see how things run at different bandwidth situations. But how to achieve this in Flex?

I’ve been using Sloppy for a long time. It’s little java app that can be started via a simple web click. It’s really easy to use and does very well what it does. For debugging your app (your flash website) throttled in Flex Builder simply follow these steps:

Open the Sloppy website
Click the little Sloppy icon:
A «sloppy.jnlp» file is downloaded. Open it if doesn’t open automatically.
The actual application will be downloaded and started. If it asks you to trust: trust! :-)
Enter the address of your html file in the bin-debug or bin-release folder. It should be a webserver address. I usually create a symbolic link of my project directory and put it into my local webserver directory.
Click «Go» – this will start the Sloppy proxy and open the page in your default browser.
Copy the address from the browser window (usually http://127.0.0.1:7569/your/path)
You may close the window. Go to Flex Builder and open the project properties (right click on project folder, last item). In an Actionscript Project, switch to ActionScript Build Path.
Enter the copied address into «Output folder URL», clear the html name (e.g. App.html).
Click «OK» and you’re done. You can now Run and Debug as if your website was hosted on some server and you had a 256K ADSL connection (instead of your T1).

Note: I tried to automate the whole thing (with Ant of course) and succeeded to a certain limit. What I did was download Sloopy’s source code (java), modify it so it can handle more terminal attributes and build the .jar file. This can be run on command line, which will start the sloopy server. So I created an ant file that does all that for me, but this ant file would only be cool, if it could also trigger the run or debug commands and modify the output folder url. I haven’t found a way (at least not a satisfying one) to do this, so I might just follow the manual street for once ;)

Another note: If you are windows user, you might wanna try this Firefox plugin: Firefox Throttle