Quick Look at .Mac Web Gallery

8 August 2007

Like many others, I had a look the new .Mac Web Gallery feature that Apple announced yesterday. Obviously, it has a beautiful and modern look & feel, for which the developers should be commended.

However, I'm interested in the technical aspects of web applications, so here are some random observations:

  • Total size of the example gallery page on initial load is 2.74 MB (according to Firebug). I wasn't aware of that kind of size being acceptable for a web page already.

  • Of that, 868 KB is just for Javascript files. Total number of lines in those files: 25.479.

  • The Javascript files are not packed, most even contain documentation comments, commented out blocks of code, blank lines, and lots of indentation. They aren't gzip compressed, either, nor are any other resources.

    UPDATE: If the Javascript resources were gzip compressed, that 868 KB number would drop down to about 180 KB. That's nearly a fifth the size. Combine the five separate files into a single one, and you'd have a major yet easy improvement of the “startup time”.

  • You stare at a black page with a spinner until the last Javascript file has been loaded, at which point you've already downloaded 1.12 MB of data.

  • Somehow it's loading a number of images that aren't even being used on the page, at least not in the current “state” of the page. I suppose that's intentional, as browsers normally don't load images attached to style rules that don't actually match any element on a page.

  • Both Etag and Last-Modified headers are being specified for all those resources (they're likely being served directly by Apache). However, no Cache-Control or Expires headers are being set, so when in doubt browsers will do conditional GET requests to make sure the resources haven't changed.

  • While everything is on a single HTML page, albums are bookmarkable, as are individual photos, via anchors added to the URL (probably using this). That means that the back and forward buttons work, too. Nice.

  • However, the album and photo thumbnails are not regular links (as in <a href> tags), but just <div>s with click event handlers. Which means you can't right click and open them in a new tab, or copy the URL, etc. This is a really bad design choice in my opinion, both for usability and for accessibility.

  • There's no kind of degradation whatsoever if Javascript is not available or enabled. Not even a little hint that Javascript is required.

  • Looks very much like there´s Rails under the hood. Although I suspect that the larger part of the application is in the client-side code (which is based on SproutCore, Prototype, and the Javascript library with the worst name ever).