CSS减少，加载速度更快/带宽更少

9

在带宽方面，压缩CSS /删除特定页面的未使用规则是否值得，还是我们可以依靠缓存（标头/最后修改）来消除这些开销？

干杯

此外，祝大家Beta测试顺利！

optimization css bandwidth

— 艾登·贝尔
source

8

减小文件大小肯定会减少带宽并缩短页面加载时间。用户首次访问您的网站时，他们不会缓存任何内容，对于大多数网站，首次访问者是访问量的主要来源。

此外，请确保已启用gzip压缩。这将大大减少带宽。

— 马修·香里（Matthew Shanley）
source

1

事实是，如果要通过将页面上的文件卸载到其他页面上的唯一或嵌入式CSS来减小一页的文件大小，那么您就忽略了缓存的好处。最好先采取行动，以便为用户提供2- X页上的出色体验。因此，请使CSS尽可能整洁。将倍数合并为一个。但是，请勿制作冗余的，唯一的代码以（略微）减少一次性攻击。

— bpeterson76 2010年

2

我不认为这不是一个。减小文件大小将在用户首次访问文件时提供帮助。缓存将对他们的第二次访问有所帮助。

— 杰西加文
source

2

还有很多潜在的优化地方会产生更大的影响...

如果您要严格追求性能提升，那么CSS源代码优化在整个食物链上就很少。

第一次加载样式表时，CSS源中多余的内容将受到较小的影响。从那时起，缓存应解决该问题。

— 埃文·普莱斯
source

1

只要可以忽略，您可以随时删除内容，从而提高了加载速度。同样，删除代码中不使用的东西也是一种好习惯。

— 杰森
source

例如，一个主要的theme.css文件，其中每个页面仅使用大约30％的规则...但是这种混合会使修补程序分裂成一个难题。

— 艾登·贝尔

0

我怀疑这取决于您网站的动态。如果您有很多重复访问者而又没有很多新访问者，那么缓存可能就足够了。但是，如果您有很多新访问者（特别是如果您想给人留下良好的第一印象），那么我认为您应该尽可能减少CSS的大小。

— 特拉维斯·诺斯卡特（Travis Northcutt）
source

0

删除一些未使用的CSS显然会缩短一页的加载时间，但是您还必须在多页效果之间取得平衡。您还想避免太多的HTTP请求。

请记住，对CSS进行gzip压缩是迄今为止加快CSS加载速度的最有效方法。gzip之后，一个文件中包含所有内容的文件和另一个文件中除去了一些不必要的块的区别可以忽略不计。

— 心怀不满的山羊
source

0

即使通过逐页删除未使用的CSS来降低性能（并且我非常确信除非您谈论的是截然不同的页面，否则缓存将胜过这一点），您还需要考虑这样做所需的维护时间。除非您是Google，否则在网站的整个生命周期里花几天时间来节省每个用户十分之一秒的时间可能不值得。

这在很大程度上与您网站的使用情况有关。如果您真的很粘，那么缓存将是您的不二之选。但是，如果跳出率较高，则使用优化的CSS可能会更好（或者将时间浪费在CSS优化上，使您的网站更具粘性！）。

如果您具有特定于页面的标记，则可以采用的一种方法是拥有通用的站点范围CSS文件，并将每页规则嵌入HTML文档的头部。

— 杰森·伯奇
source

0

您可以从两全其美的方法中获得最大的收益，在执行时将文件缩小，然后gzip输出。
当需要编辑时，源文件仍然可读，但是在下载时已压缩

第一：使用htaccess告诉apache将所有css文件视为php脚本，并在输入text / css类型时压缩输出

在.htaccess中AddHandler php5-cgi .css AddType文本/ css .css AddOutputFilterByType定义文本/ css

第二：在下载开始之前，使用带有回调函数的输出缓冲来最小化css代码，还设置过期时间以使文件被缓存

在你的css文件中

<?php
ob_start("trima");
header("Content-type: text/css; charset=utf-8");
ob_start();
date_default_timezone_set('GMT');
$lasmod = "Last-Modified: " . strftime ("%a, %d %b %Y %T GMT", filemtime (__FILE__));
Header($lastmod);
$offset = 3600*24*30*12;
$expire = "Expires: " . date("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($expire);
function trima($str) {
    $str = str_replace(array("\n", "\r", "\t", "\o", "\xOB"), '', $str); // remueve enter tabs y demas
    $str = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $str); // remueve comentarioa
    $str = ereg_replace("[ ]+", " ", $str);                         //remueve espacios multiples
    $rep = array( '{ '=>'{', ' }'=>'}', '; '=>';', ', '=>',', ' {'=>'{', '} '=>'}', ': '=>':', ' ,'=>',', ' ;'=>';' ); // remueve espacios inecesarios
    $str = strtr($str, $rep);
    return $str;
}
?>
css content here

第三：利润？

— 崩解器
source