less.js load impact

Question

How much does less.js impact the speed of a site?

For standardization purposes, let's assume we're using Benchmark.less.

How much slower is the compilation process than the pre-compiled css? Also, at what filesize will users see a performance impact?

Answer 1

You can check load time with Firebug (you will exactly see what takes how long to load).

Additionally there is still the option that you compile your .less to .css locally or even do it online before you put it on the site.

EDIT:

Here is what I get trying benchmark.less on my local server:

less: parsed hxxp://localhost/testing/css/style.less successfully.
less: saving hxxp://localhost/testing/css/style.less to cache.
less: css for hxxp://localhost/testing/css/style.less generated in 640ms
less: css generated in 641ms

p.s. No matter what the load impact is, I would still compile it to css before you put it online, otherwhise people with JS disabled will get nothing.

Answer 2

Im using twitter bootstrap and the page load is somewhat slow with the less.js file. simply loading the bootstrap navigation and my page load time was > 1s (1.08s) to be precise; that is slow.

No optimizations whatsoever though!

Answer 3

If you do not Cache less and you are running something simple like twitter bootstrap you can be adding a full second of load. It requires testing and caching to be effective or the results can be detrimental to your site.

Answer 4

We're using less on a pretty large project (our compiled css is around 9k lines -- and we've gone to considerable lengths to keep it minimal). On Chrome, running off a local server on a fast laptop, less.js compiles our less files in about 600ms. On Safari -- everything else the same -- it mysteriously takes 5s (!). On Firefox 4.3s (!). It takes a stupid amount of time on my iPad 4th Gen. This is significantly worse on a slowish network.

Precompiled, the CSS loads effectively instantly on all browsers.

It's worth noting that whatever optimizations Google is doing in V8 are markedly superior for less.js than Safari and Firefox's engines, but here's the kicker:

1. Until recently our less compilation was sufficiently fast as to not be perceptible on all browsers (including Safari on iOS). We made some change, we don't know what that is slowing it down. If anything our less files have been getting smaller not larger (we have a guy dedicated to CSS optimization).

2. We cannot figure out any way of getting useful information out of the less compiler.

3. We contemplated trying SCSS/SASS instead, but it seems like everyone is switching from SASS to LESS, so I'm guessing the grass is no greener on that side of the fence.

I'd say that if you're interested in mobile clients (iOS in particular), avoid less.js like the plague.