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?

score 4 · Accepted Answer · edited Mar 27 '13 at 08:25

4

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.

edited Mar 27 '13 at 08:25

Lukas Eder

211,314
129
689
1,509

answered Oct 12 '11 at 15:35

r0skar

8,338
14
50
69

I'm asking for actual load impact, not specifically for me, but for anyone wondering what impact less has. This is the nature of *StackExchange*. – Korvin Szanto Oct 12 '11 at 15:53
4

So instead of doing it yourself and posting the results, you want some1 else do it for you? (well I am in a good mood and did the work for you - see my edited answer). Anyhow: if you are worried about page load so much, simply follow my advices above and compile it to .css before you put it online in the actual production enviroment. – r0skar Oct 12 '11 at 19:16
@KorvinSzanto: If you have the tools and ability to test this yourself, why are you asking? You know it will be much slower with javascript. Regarding file size, that is not going to be any different than any other time, it doesn't matter if you used less to create the final complied css or if you did it by hand. – Wesley Murch Oct 12 '11 at 19:20

score 2 · Answer 2 · answered Jul 29 '12 at 15:59

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!

answered Jul 29 '12 at 15:59

nanyaks

171
1
7

score 1 · Answer 3 · answered Jun 30 '12 at 01:33

1

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.

answered Jun 30 '12 at 01:33

Case

4,244
5
35
53

score 1 · Answer 4 · edited Mar 27 '13 at 08:26

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:

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).
We cannot figure out any way of getting useful information out of the less compiler.
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.

For point number two, I wanted to share with you that it is possible to use sourcemaping if you pre-compile the CSS. Unfortunately, the sourcemapping won't work if less is compiled with JS. See http://stackoverflow.com/questions/9865302/less-sass-debugging-in-chrome-dev-tools-firebug . This comes in handy when you compile on pre-production environment (we do it to make sure other devs are not slown down) and it is running like a charm. — Salketer, Jun 13 '13 at 08:00

less.js load impact

4 Answers4