My question is when you go to this page http://www.executivetravelholdings.com the page styles loads in like a second. I want it to load like if I used regular css. I have the less stylesheet in the head and the less.js in bottom of the body. I am using less.js 1.3.3 and PHP instead of html. Any help with this would be greatly appreciated.
0
votes
Question no longer useful, since the website referred to is gone, and it is not stated what less files needs to be compiled.
- Mads Skjern
Voted to close (though it's not hard to guess that the answer would be "just don't use client-side script and precompile your ls files to css").
- seven-phases-max
I tried to delete this question a while ago but's it not letting me. @seven-phases-max. I figured the answer out to this question quite a while ago. But when I tried to delete it it say this question has answers and cannot be deleted.
- dowomenfart
3 Answers
1
votes
You're only supposed to use the client-side LESS renderer during development:
Client-side is the easiest way to get started and good for developing your LESS. For production and especially if performance is important, we recommend pre-compiling using node or one of the many third party tools.
In practice, you can either:
- Install Node.JS and render the file, then put the (static) compiled version and put it online.
- Use a GUI app to compile the LESS file, like SimppLESS. Be sure that it's a recent version and that they've kept their internal LESS version up-to-date. (Easier)
- If you're using something like PHP, there are PHP ports of the LESS compiler. That way, it's rendered server side and cached. (More convenient)
1
votes
You will never be as fast as native css, since the script has to parse the css first. However, this strong form of FOUC comes from the fact, that you provide the less script in the body and so the complete document gets rendered before the styles are transformed and applied. The solution is to put the less.js script in the head. Yes this slows down the page loading process, but I think this is the better trade-off.
Personally, I would never (at least for production environment) use the js version but always process the styles serverside. Imagine a user has blocked javascript or no javascript available at all.
0
votes
Have a backup stylesheet which at least places all objects in their right places and has simple formatting.
That way when the less kicks in, the changes aren't so noticable.
Also have your less.js output cached by the users browser and by your server(if possible). That way you also improve navigation.
