it-swarm.cn

减少CSS以加快加载速度/减少带宽

压缩CSS /删除特定页面的未使用规则值得在带宽方面,还是我们可以依靠缓存(标题/最后修改)来消除这种开销?

干杯

此外,祝大家好运!

9
Aiden Bell

减小文件大小肯定会减少带宽并缩短页面加载时间。用户第一次访问您的网站时,他们将无法缓存任何内容,并且对于大多数网站,首次访问者是流量的主要部分。

此外,请确保您启用了gzip压缩。这将大幅减少带宽。

8
Matthew Shanley

有更多可能产生影响的潜在优化场所......

如果您正在寻求严格的性能提升,那么CSS源优化在食物链上相当低。

CSS源代码中的过多损失将在第一次加载样式表时受到轻微影响。缓存应该从那时起处理问题。

2
Evan Plaice

我不认为这是一个或两个。减小文件大小将有助于用户第一次访问该文件。缓存将有助于他们的第二次访问。

2
jessegavin

任何时候你可以删除东西,你会提高加载的速度,如果只是可以忽略不计。此外,最好还删除不用于代码清晰度的内容。

1
Jason

您可以从两个世界中获得最佳效果,在执行时缩小文件并gzip输出。
当您需要编辑源文件时,源文件仍然可读,但在下载时会对其进行压缩

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

in .htaccess AddHandler php5-cgi .css AddType text/css .css AddOutputFilterByType DEFLATE text/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

第三:利润?

0
The Disintegrator

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

0
Travis Northcutt

删除一些未使用的CSS显然会改善一页上的加载时间,但您还必须将其与多页上的效果进行平衡。您还希望避免过多的HTTP请求。

请记住,gzipping CSS是加速CSS加载的最有效方法。 gzip之后,一个文件与所有内容和另一个文件之间的区别在于删除了一些不必要的块可以忽略不计。

0
DisgruntledGoat

即使通过逐页删除未使用的CSS来降低性能(并且我非常确信缓存会超过这个,除非你谈论完全不同的页面),你需要考虑这样做所需的维护时间。 。除非你是谷歌,否则在网站生命周期中花费几天时间可能不值得为每个用户节省十分之一秒。

这很大程度上与您网站的使用情况有关。如果你真的很粘,那么缓存赢得胜利。但是,如果您的跳出率很高,那么使用优化的CSS可能会更好(或者花费时间浪费在CSS优化上,使您的网站更加坚固!)。

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

0
JasonBirch