Reducción de CSS para una carga más rápida / menos ancho de banda

¿Vale la pena compactar CSS / Eliminar reglas no utilizadas para una página específica en términos de ancho de banda o podemos confiar en el almacenamiento en caché (encabezados / última modificación) para eliminar esta sobrecarga en la naturaleza?

Salud

Además, ¡buena suerte con la versión beta de todos!

Reducir el tamaño de los archivos ciertamente reducirá el ancho de banda y acortará el tiempo de carga de la página. La primera vez que un usuario accede a su sitio, no tendrá nada en caché, y para la mayoría de los sitios, los visitantes por primera vez son la mayoría del tráfico.

Además, asegúrese de tener habilitada la compresión gzip. Esto hará una cantidad drástica para reducir el ancho de banda.

No creo que sea una o la otra. Reducir el tamaño del archivo ayudará al usuario la primera vez que acceda al archivo. El almacenamiento en caché ayudará en su segunda visita.

Hay muchos más lugares potenciales para la optimización que tendrán un mayor impacto ...

Si busca estrictamente un aumento de rendimiento, la optimización de la fuente CSS es bastante baja en la cadena alimentaria.

El exceso de cruft en la fuente CSS tendrá un impacto menor la primera vez que se carguen las hojas de estilo. El almacenamiento en caché debería ocuparse del problema a partir de entonces.

Cada vez que pueda eliminar cosas, mejorará la velocidad de carga, aunque solo sea de forma insignificante. Además, también es una buena práctica eliminar cosas que no está utilizando para la claridad del código.

Sospecho que depende de la dinámica de su sitio. Si tiene muchos visitantes habituales y no muchos visitantes nuevos, el almacenamiento en caché probablemente sea suficiente. Sin embargo, si tiene muchos visitantes nuevos (y especialmente si desea causar una buena primera impresión), creo que debería reducir el tamaño de su CSS tanto como sea posible.

La eliminación de algunos CSS no utilizados obviamente mejorará los tiempos de carga en una página, pero también debe equilibrar eso con el efecto en varias páginas. También desea evitar demasiadas solicitudes HTTP.

Recuerde, desglosar CSS es, con mucho, la forma más efectiva de acelerar la carga de CSS. La diferencia entre un archivo con todo dentro y otro con algunos bloques innecesarios eliminados es insignificante después de gzip.

Incluso si el rendimiento se reduce al eliminar CSS no utilizado por página (y estoy bastante convencido de que el almacenamiento en caché sería mayor que esto a menos que esté hablando de páginas radicalmente diferentes), debe tener en cuenta el tiempo de mantenimiento requerido para hacerlo. . A menos que sea Google, probablemente no valga la pena pasar varios días durante la vida útil del sitio para ahorrarle a cada usuario una décima de segundo.

Mucho de esto tiene que ver con el perfil de uso de su sitio. Si eres realmente pegajoso, entonces el almacenamiento en caché gana sin dudas. Sin embargo, si tiene una alta tasa de rebote, puede que esté mejor con CSS optimizado (¡o gastando el tiempo que está desperdiciando en la optimización de CSS haciendo que su sitio sea más pegajoso!).

Un enfoque que podría adoptar si tiene un marcado específico de la página es tener un archivo CSS genérico en todo el sitio e incrustar reglas por página en el encabezado del documento HTML.

Puede obtener lo mejor de ambos mundos, minimizar el archivo en el momento de la ejecución y comprimir la salida.
El archivo fuente sigue siendo legible cuando necesita editarlo, pero se comprime cuando lo descarga

primero: use htaccess para indicarle a apache que trate todos los archivos css como scripts php y comprima la salida cuando escriba text / css

en .htaccess AddHandler php5-cgi .css AddType text / css .css AddOutputFilterByType DEFLATE text / css

segundo: utilice el búfer de salida con una función de devolución de llamada para minimizar el código CSS antes de que comience la descarga, también establezca el tiempo de caducidad para que el archivo se almacene en caché

en tu archivo 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

Tercero: ¿ganancia?