所以我想知道，与使用less.js相比，提前编译我的less样式表是否更有利于我的网页速度。经过通过谷歌页面速度测试后，我发现在预编译后实际上下降了几个点。据我所知，这应该对用户要求更少。但是我猜想我错了吗？还有其他需要考虑的因素吗？缩小css也是一个选择，但我不认为会有显著的差异。
谢谢。
预编译 less 是否更快？
3
- mpn
6
可能是[LESS css - JS解析器 vs 编译]的重复问题 (https://dev59.com/oGPVa4cB1Zd3GeqP5WUD) - Steve Sanders
2任何类型的预编译/预缓存/预加载都可以使应用程序更快。不仅适用于 Less-CSS 生态系统。 - Itay Moav -Malimovka
编译 -> 压缩 -> 合并 - Igor Milla
页面速度具体在抱怨什么？ - deceze
@deceze 嗯，有几件事情，但是这些事情自从预编译后并没有改变。不过，我的排名确实变得更差了。 - mpn
@deceze，这就是为什么我想知道是否有什么我忽略了的关于预编译如何可能阻碍页面速度的事情。 - mpn
1个回答
2
我认为你应该将问题的标题改成"预编译Less能生成更好的页面速度得分吗？"
这可能取决于您的Less代码大小。一般来说，页面速度要求您先加载可读的内容，然后再加载非关键的CSS和JavaScript。
当您将所有的Less代码编译成一个大的CSS文件时，页面速度会抱怨您应该首先加载关键的CSS（最好在源中执行此操作（无需额外的http请求））。
使用less.js进行客户端编译时，编译后的CSS代码被插入到源中，但需要两个http请求（编译器和less文件）。Less代码可能比编译后的CSS小。但是您必须加载编译器（可以从CDN加载）。
总的来说，您应该意识到客户端编译器必须针对每个页面请求重新编译您的Less代码。客户端编译需要时间，因此在大多数情况下会导致糟糕的用户体验。
缩小css也是一种选择，但我不认为它会有明显的差异。
缩小可以减少要发送的字节数，因此始终有助于使网站加载更快。
一些测试
当我加载一个简单的页面：
<link href="css/bootstrap.min.css" rel="stylesheet">
我发现一个页面速度评分为95/100，需要修复以下问题：
优化以下内容的CSS传送： http://example.com/css/bootstrap.min.css
当我加载相同的页面时：
<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，需要解决以下问题：
移除阻止呈现的JavaScript： http://cdnjs.cloudflare.com/ajax/libs/less.js/2.0.0/less.min.js
尽管第二种情况涉及许多HTTP请求（以加载所有Less代码）并在客户端运行代码，但得分并不会降低太多（仍然足够好）。
如果你没有对第一种情况中的CSS进行优化，例如缩小代码并设置适当的缓存头等等，则页面速度得分将进一步下降。
总之，为了更好的用户体验，应该预编译Less代码并缩小CSS代码。而页面速度并不总是用户体验的良好预测指标。
- Bass Jobsen
1
非常完整的答案，谢谢。我得出了类似的结论关于页面速度，要满足所有指标真的很难！ - mpn
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接