Sunday, September 20, 2009

Do you like slow website ?

Probably not. I will try in this blog to provide hints which will help to make your web mapping site terribly fast.



Cache all what you can

On the data side, generate the tiles and let them serve through Apache. For example, if they are served through mod_wsgi, we generally observe a 10% to 20% performance loss.
For the tile generation, one key point is to generate only the needed tiles. For a vector layer, a feature aware tile generation avoids to fill the disks with transparent tiles ;-) I'll make a blog soon to describe the recent developments made in TileCache which solve this problem.
With optipng or jpegoptim, it is possible to reduce the size of the tiles.
It is also important to configure correctly the expires_header. Typically, in pylons, you can set a cache_max_age parameter.
For large sites, it is also recommended to use a proxy (Squid, Varnish) which will cache the content of the application and will be able to deliver directly this content.

Minify and merge your javascripts

Usually, several javascript libraries are used in one website. The jsbuild tool, for example, allows you to minify and concatenate scripts from JavaScript libraries.
It makes also sense to concatenate the css files and use sprites to deliver images.

Compress content with gzip

In order to reduce the amount of data transferred over the network, it is possible to compress it with gzip. In pylons, you can set that quite easily in the ini file (filter-with = gzip). Apache used the mod_deflate mode to do that.

All these points provide performance improvement and therefore a better user experience. But all these points are not sufficient if the application is not made to be fast. Here some example of bottleneck:
- If you query a database and forget to create the correct indices, the query will be slow and all the applications will be slow. And in general, avoid complex queries in database. In certain circumstances, it makes sense to denormalize the database model in order to reach top performance.
- Large XML contents are difficult to parse with javascript, prefer json/GeoJson format to transfer content.
- If your application has a large number of layers, merge them on the server side and not on the client side.
- The best thing that a browser can do is presenting HTML code. It makes sense to prepare the information on the server side (templating) instead of treating it on the client side.

I propably missed some aspects, so don't hesitate to provide your tricks.

1 comment:

Jérôme Andrieux said...

Among all possible optimizations, from page layout to system architecture, it's always nice to set up tools to measure performance.

On the server side, I really like Munin (a linpro varnish project brother btw - http://munin.projects.linpro.no/) because of its lightness and all its nice plugins (
http://muninexchange.projects.linpro.no/)

On the client side, I like to use Firebug with PageSpeed (http://code.google.com/speed/page-speed/) or yslow (http://developer.yahoo.com/yslow/).
Those tools provides a page level performance analysis and various recommendations.

For web mapping sites, one could pay special attention to :
- serving static content with a dedicated service (from lighttpd, varnish, nginx+memcached to a CDN) - forget Squid
- reducing HTTP requests (CSS & JS minimizing is part of this)

Pylons' performance is obviously sensible to load and scaling policy can require multiple load-balanced instances : http://pylonshq.com/docs/en/0.9.7/#internationalization-sessions-and-caching