The 'Last Minute Skin' Technique

How does it work?

The last minute skin is a JavaScript technique which reduces the size of downloaded pages by caching most of the page rendering code on the client browser. This page is an example which involves:

• A naked HTML page containing a single <div> with the actual page contents. No extra formatting is added or needed. This is what the user downloads on every request.
• A single script, 'lastminute.js', which is included from that page. It is a very small script that when loaded immediately includes jQuery and 'skin.js'.
• The jQuery library.
• The 'skin.js' script, which transforms the skinless, naked page into a fully themed page, by adding the theme elements (header, menu, footer...) to the page and including the appropriate stylesheets, using the jQuery library to manipulate the DOM.

Since the 'lastminute.js', 'jquery.js' and 'skin.js' scripts are the same on every page, they can be cached on the browser and used without an additional query to the server. This allows quite complex page layouts with reduced page overheads (since the layout data is only downloaded once), and also helps reduce server-side overhead.

You can view the source of this page to see for yourself.

What is it for?

This technique has several advantages over other means of rendering pages:

• Unlike traditional "change content with AJAX" approaches, the individual pages remain accessible through normal HTTP addresses, which allows bookmarking, refreshing, the "back" button, and improved search engine optimization.
• The layout-less page is usually a lighter and shorter version of the skinned page, which makes it easier to adapt to javascript-less accessibility devices.
• Since the layout is rendered with knowledge of the client browser, it's possible to have lastminute.js conditionnally include browser-specific CSS or JS patch files.
• It is server-agnostic, meaning one can design a last-minute-skin theme or template for any existing projet (Wordpress, Drupal, Magento, phpBB...) or language (PHP, Java, C#...).

There are, of course, disadvantages: without JavaScript, the page is just ugly (a noscript stylesheet can ease the pain, though); and the page layout setup eats precious rendering time on every page load.