Codigo para enviar Todo el CSS en unico archivo - Optimizacion avanzada de CSS

Blog sobre Optimizacion Avanzado y Optimizacion avanzada de CSS en Estados Unidos

Suponiendo que tenemos los siguientes estilos: estilos.css, responsive.css, fuentes.css y bootstrap.css. el funcionamiento basico seria el siguiente:

1 - En nuestra pagina donde se indica la direccion de nuestro archivo CSS lo modificaremos a:

<link rel="stylesheet" type="text/css" href="/css/estilos.css" />

2 - En nuestro servidor no existira el archivo estilos.css, en cambio crearemos un archivo llamado estilos.php. Mediante .htaccess cuando el navegador solicite el archivo estilos.css recibira estilos.php. Para lograr esto debes crear o editar el archivo .htaccess y agregar las siguientes lineas:

RewriteEngine On
RewriteRule ^css/estilos.css$ css/estilos.php [L]

3 - Editar css/estilos.php, aqui basicamente debemos añadir include a cada archivo pero no funcionara. Para que funcione sera necesario enviar un header PHP indicando al navegador que el codigo es CSS y algunos header para que el archivo sea almacenado en cache. El codigo ejemplo completo sera:

$tsstring = gmdate('D, d M Y H:i:s ', $timestamp) . 'GMT';
header('Expires:'.gmdate('D, d M Y H:i:s', 1407595380 + 3600 * 24 * 90).' GMT');
header("Content-type: text/css");
header("Last-Modified: $tsstring");
echo '@charset "utf-8";';
$css = file_get_contents('estilos.css');
$css .= file_get_contents('responsive.css');
$css .= file_get_contents('fuentes.css');
$css .= file_get_contents('bootstrap.css');
$css .= file_get_contents('dinamico.css');
echo $css;Hasta aqui nuestro codigo en vez de realizar 5 peticiones http solo realizara una. Tendremos el codigo facil de entender ya que no hemos unificado realmente todo. 

Para minificar el contenido podriamos realizarlo desde PHP en forma automatica pero no seria recomendable para CSS. Esto demoraria el tiempo de carga e incluso algunos estilos podrian no funcionar. 

Lo ideal va a ser minificarlos en minifier.org, de esta forma tendremos 2 archivo por cada estilo. Para mejor administracion de los archivos guardaremos el CSS original como estilos_max.css y el minificado como estilos.css. Igual para los otros archivos.

Cuando estamos trabajando en el sitio solo deberiamos reemplazar en estilos.php, el include de estilos.css por estilos_max.css y podremos trabajar en un codigo legible. Al finalizar actualizamos nuestro archivo minificado y volvemos estilos.php a como estaba. 

Visitar articulo completo sobre Optimizacion avanzada de CSS

Comparte tu opinion o comenta

Cuenta tu opinion o amplia el contenido del articulo
Contactenos Ahora!