Version control is no different, and you typically compile on the server before sending to the client. The LESS.js shim is for convenience, like when you're editing a site over FTP with no access to the server.

CSS precompilers help DRY up your code and introduce structure. For example, no more repeating that hex value and forgetting which red is the error red vs the logo red, constantly retyping vendor prefixes, or maintaining a single gigantic stylesheet.

As a PHP developer, I prefer to "refresh to see changes", which is why using Assetic is a must for compiling both CSS and JS resources.

For less.js the browser has to download the js, then the less file and then produces the CSS

Until the browser has the CSS it can't start rendering the page.

Here's a waterfall for lesscss.org (http://www.webpagetest.org/result/120509_18_ff2ca6e34c6b8e90...) notice how for a really simple webpage that the rendering doesn't start until over 1.2 seconds in!!!

  p {color: <?=$mainColor?>}

Here's some of my (old crappy)code:

  color: <?php echo $foreground1; ?>;
  font-family: <?php echo $font2; ?>;