Is it faster to precompile less?

Question

So I am wondering whether it is better for me as far as page speed, to precompile my less style sheets instead of using less.js. After testing this via google page speed, I noticed I actually went down a couple points after precompiling. As far as i know it should be less demanding on the user. But I guess I am wrong? Is there something else I should take into account? Minifying the css is also an option, but I don't think that will make a considerable difference.

Thanks.

Answer 1

I think you should change the title of your question in something like "does precompiling Less generates a better page speed score?"

If probably depends of the size of your Less code. In general page speed wants that you first load something readable and load non critical CSS and JavaScript afterwards.

When you compile all your Less code in one big CSS file, page speed will complain that you should load the critical CSS first (preferred to do that in source (no extra http request) ).

When compiling client side with less.js the compiled CSS code is inserted in source, but require two http request (the compiler and the less file). Less code can be smaller than the compiled CSS. But you will have to load the compiler (possible from CDN).

But overall you should realize that the client side compiler have to compile your Less code again for every page request. Client side compiling will take time and so create a bad user experience in most situations.

Minifying the css is also an option, but I don't think that will make a considerable difference.

Minifying reduce the number of bytes that have to be send and so always helps to make your website load faster.

some tests

When i load a simple page with:

<link href="css/bootstrap.min.css" rel="stylesheet">

I found a page speed score of 95/100 and have to fix:

Optimize CSS Delivery of the following: http://example.com/css/bootstrap.min.css

When i load the same page with:

   <link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" />
   <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.0.0/less.min.js"></script>

I found a page speed score of 91/100 and have to fix:

Remove render-blocking JavaScript: http://cdnjs.cloudflare.com/ajax/libs/less.js/2.0.0/less.min.js

Although the second situation has to do many http request (to load all the less code) and run the code client side the score is not so much lower (and still good enough).

When you don't optimize the CSS in the first situation, for instance minify the code and set proper caching headers and so on the page speed score will further go down.

So in summary, yes you should precompile your Less code and minify the CSS code for a better user experience and page speed is not always a good predictor for the user experience.