减少预编译速度更快吗? [英] Is it faster to precompile less?

问题描述

所以我想知道，对于页面速度而言，预编译我的较少样式表而不是使用less.js是否对我更好.通过谷歌页面速度测试后，我注意到我实际上在预编译后下降了两点.据我所知，它应该对用户的要求不高.但是我想我错了?还有什么我应该考虑的吗?缩小CSS也是一种选择，但我认为这不会带来很大的不同.

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.

谢谢.

推荐答案

我认为您应该以预编译少会产生更好的页面速度得分吗?"之类的方式更改问题的标题?

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

如果可能取决于您的Less代码的大小.一般来说，page speed要求您先加载可读的内容，然后再加载非关键的CSS和JavaScript.

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.

当您在一个大CSS文件中编译所有Less代码时，页面速度会抱怨您应该首先加载关键CSS(最好在源代码中加载(无需额外的http请求)).

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) ).

使用less.js编译客户端时，已编译的CSS代码会插入源代码中，但需要两个http请求(编译器和less文件).更少的代码可以比编译后的CSS小.但是您将必须加载编译器(可能来自CDN).

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).

但是总的来说，您应该意识到客户端编译器必须为每个页面请求再次编译Less代码.客户端编译会花费一些时间，因此在大多数情况下会带来不良的用户体验.

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.

缩小css也是一种选择，但是我认为这不会带来很大的影响 差异.

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.

一些测试

当我使用以下内容加载一个简单页面时:

When i load a simple page with:

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

我发现页面速度得分为95/100，必须解决:

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

优化以下内容的CSS交付: http://example.com/css/bootstrap.min.css

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>

我发现页面速度得分为91/100，必须解决:

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

删除阻止渲染的JavaScript: http://cdnjs.cloudflare.com/ajax /libs/less.js/2.0.0/less.min.js

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

尽管第二种情况必须执行许多http请求(以加载更少的代码)并运行代码客户端，但得分并没有降低很多(并且仍然足够好).

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).

在第一种情况下，如果不对CSS进行优化，例如，压缩代码并设置适当的缓存头等，则页面速度得分将进一步下降.

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.

因此，总而言之，是的，您应该预编译Less代码并最小化CSS代码，以获得更好的用户体验，而页面速度并非始终是用户体验的良好预测指标.

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.

这篇关于减少预编译速度更快吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！